Multi-Step Forms and Configurators in Webflow (Easy!)

In this video, Mike Pecha shows us how to use Inputflow in Webflow to create multistep forms and small configurators, which are then sent normally via the Webflow form function and end up in the mailbox. The guide takes you through the basic steps, from using the Webflow Form component to creating steps, conditions, and branches. Inputflow allows forms to be tailored to user needs and even offers validation options. The step-by-step instructions help to make complex forms user-friendly and to customize them individually.

Click here for Inputflow: inputflow.io

Step-by-step guide to creating multistep forms in Webflow with Inputflow

I'm excited to show you how to create your own multistep forms in Webflow today in this step-by-step guide. This tutorial is based on my conversation with Mike Pecha, who gave us his tool Inputflow presented in order to implement this project. Let's get started right away!

Here's a chat with Mike Pecha about how he built Inputflow:

Extra revenue with Webflow apps | Webflow Talk with Mike Pecha

Step 1: Basics in Webflow

Before we get into the details of Inputflow, we need to understand the basics. Use the standard Webflow Form component to build your form. This not only allows you to create multistep forms, but also small configurators and surveys.

Step 2: Get to know Inputflow

Inputflow is the key to multistep forms in Webflow. There is a free version and a paid version with additional features. The free version is sufficient for most projects. However, Mike will add many more premium features to the paid version in the future, which may then be more worthwhile for a customer project. Choose the option that's right for you and get started.

Step 3: Predefine steps

One of the most important requirements is the steps of the form. Create them within your Webflow Form component to define the various sections of the form. Give each step a clear and understandable name with the if-step=” your name” attribute.

Step 4: Link steps and items

Your buttons should also be marked to determine which button takes the user to the next step. Use the if-element=” button-next” and if-element=” button-back” attribute for this purpose.

Step 5: Conditions and Branches

Now it's getting exciting! Create conditions to determine when the user gets to which step. These conditions make it possible to dynamically adapt your form to the user's needs. Experiment with different conditions and branches to perfectly customize your form.

Step 6: Validation and Error Handling

Don't forget to validate your input. Inputflow makes it possible to set conditions to ensure that only valid information is accepted. You can also create individual error messages to inform the user if entries are invalid (premium version).

Step 7: Publish and Test

After you've created your form in Inputflow, generate the code and paste it into your Webflow project. Then publish your project to make sure everything runs smoothly. Test your form thoroughly to make sure it meets your expectations.

Step 8: Conclusion

Creating multistep forms in Webflow with Inputflow is a great way to collect complex information from users. With the right steps, conditions and branches, you can create a user-friendly and tailor-made form, which can even be small configurators.

I hope this step-by-step guide was helpful for you. If you have any further questions or need assistance, don't hesitate to ask them in the comments on the video. Have fun creating your own multistep forms in Webflow!