# What is Inputflow? (To get started with Inputflow, we recommend our [**2 Minute Quick Start Guide**](/getting-started/2-minute-quick-start)**!**) Inputflow is a Webflow App to build multi-step forms. The use-cases include: * Onboarding forms * Pricing calculators * Lead generation quizzes * Order forms * Signup forms * and much more ... Inputflow is a unique form builder, because unlike other tools it gives you 100% design control over your form. You build all of your form steps inside Webflow. And then you use Inputflow to add the multi-step functionality (connecting steps, custom error messages, calculations, conditions, branching etc.)

The intuitive Inputflow Form Editor allows you to build any type of multi-step form which you can think of.

To get started with Inputflow, we recommend our [**2 Minute Quick Start Guide**](/getting-started/2-minute-quick-start)**!** # Adding the Script I**MPORTANT: Do not skip this step, otherwise your form will not work!** In order for Inputflow to work, you need to add the Inputflow script to the page where the multi-step form will be created. Copy the following code: ```html ``` and paste it into the code section of your page, and then click on "Save".

Insert the embed script into the "Inside <head> tag" code block

Watch the following video to learn how to add the Inputflow script to your site: {% embed url="" %} # 2 Minute Quick Start ### 1. Install Inputflow Webflow App Open the following link and install the Inputflow Webflow app: Then refresh your Designer, and launch Inputflow: ### 2. Create account Create your own Inputflow account inside the app (This account is separate from your Webflow account)

### 3. Add script to page Copy the following script to your page (Inside \ tag), where you want to create a multi step form. ```html ``` Detailed explanation: {% content-ref url="/pages/Z74uVOA3pkAFHBJtT25a" %} [Adding the Script](/getting-started/adding-the-script) {% endcontent-ref %} ### 4. Connect form with Inputflow To turn a form into a multi-step form, you need to connect it with Inputflow. To do that, select the form inside the Navigator, and inside the Elements Manager, click on the "Connect" button.

You can either do this while the form element is selected or while the form block is selected, both will work. ### 5. Build your form steps Group your form elements (inputs, next-buttons, text, etc.) into multiple Div Blocks. Later, we will turn each of these Div Blocks into an individual form step. The class name is not relevant (in the example below it is ***onboarding\_form-step***), but you can name the class of your step elements however you want.

[To turn a Div Block into an actual step](/elements-manager/create-steps) of the multi-step form, you have to select it, and the click the "Step" button inside the [Elements Manager](/elements-manager/what-is-the-elements-manager).

Type in the name of the step and click on “Create step.“ Detailed explanation: {% content-ref url="/pages/jW4wPdW6Q0eTt5jbDjDY" %} [Form structure](/elements-manager/form-structure) {% endcontent-ref %} {% content-ref url="/pages/2tvRISXPQ3bxbip6VFXp" %} [Create steps](/elements-manager/create-steps) {% endcontent-ref %} ### 6. Create next and back buttons Create [next buttons and back buttons](/elements-manager/next-and-back-buttons) with the [Elements Manager](/elements-manager/what-is-the-elements-manager), so that the users of the form can jump back and forth between the individual steps. ### 7. Load elements into Form Editor After you have created your steps and buttons, you have to publish your Webflow project to the staging domain (.webflow\.io domain). After you have published, you can load all of the steps which you created into the [Form Editor](/form-editor/what-is-the-form-editor), by clicking "Load elements"

After successfully [loading the steps](/form-editor/loading-form-elements), they will appear in the sidebar, and you can now proceed to add the multi-step functionality. (**IMPORTANT**: If you create additional steps or inputs later, and want them to show up in the Form Editor, you must follow the same process: 1. Publish to webflow\.io domain, 2. Click on "Load elements") ### 8. Add multi-step functionality Setup the multi-step functionality by dragging steps and/or action blocks onto the canvas of the Form Editor. Then you can [connect them](/form-editor/basic-controls) in a logical sequence, in which they should appear to the user. You can find a concise overview of the form editor controls here:
{% content-ref url="/pages/BbHm8HLV4uNt2vG5yqVH" %} [Basic controls](/form-editor/basic-controls) {% endcontent-ref %} The form editor allows you implement advanced form functionalities (Logic, branching, calculation, validation, redirects, etc.). To learn more about that, check out the documentation section: [Form Editor](/form-editor/what-is-the-form-editor). ### 9. Test submission Once you have configured the multi-step functionality, it is important to do a few test submissions, to see that the form is working exactly how you expect it to work. # What is the Elements Manager? The elements manager is the section of the Inputflow app, where you inititalize your form elements. You can think of the Elements Manager like a setup assistant. Its purpose is to prepare all of the elements, so that Inputflow can properly recognize and work with them.

Open the Elements Manager by clicking on the "Elements" menu

With the Elements Manager you can: * Connect a form to Inputflow * Create form steps * Turn button elements into "Next" and "Back" buttons * Create error elements # Form structure Before you start to initialize elements with the Elements Manager, you have to make sure that your form is structured correctly. This is very simple to do and only involves 2 steps: ### 1. Group your inputs inside Div Block elements Since Inputflow is used to build Multi-step forms, you have to put inputs, text, etc. that should show up together, inside the same Div Block:

Later, we will turn each of these Div Blocks into an individual form step. The class name is not relevant (in the above example it is ***onboarding\_form-step***), but you can name your class however you want. ### 2. Give your inputs clear & descriptive names The next step is to give clear names to all input elements. Avoid using unclear names that can cause confusion. This way you will have an easier time working with these elements inside Inputflow later.

# Connect a form To turn a form into a multi-step form, you need to connect it with Inputflow. To do that, select the form inside the Webflow Navigator. Inside the [Elements Manager](/elements-manager/what-is-the-elements-manager), click on the "Connect" button.

You can either do this while the form element is selected or while the form block is selected, both will work. # Create steps To turn a Div Block into an actual step of the multi-step form, you have to select it, and the click the "Step" button.

### Rename steps If you later decide, to change the name of a step, click on it and enter the new name inside the Elements Manager:

# Next & back buttons Back buttons and next buttons allow your website vistors to jump back and forth between the different steps of the multi-step form. To create these buttons, select a button element on the page, and inside the Elements Manager, click the "Back button" or "Next button" button.

# Submit buttons To execute a standard Webflow form submission, just put a normal Webflow submit button inside the final step of your form.

# What is the Form Editor? The Form Editor is the section of the Inputflow app, where you configure the Multi-step functionality. Here you can load the steps that you created with the Elements Manager, and connect them visually on the canvas.

# Loading form elements Before you can start to configure the multi-step functionality, you must load all of the form elements (steps and inputs) into the Form Editor. To do that, you must: 1. Make sure, that you have prepared your form and its elements with the [Elements Manager](/elements-manager/what-is-the-elements-manager) 2. Publish your project to the .webflow\.io staging domain 3. Click the "Load elements" icon at the top right of the canvas

Once you have loaded your form elements, all of your steps will appear in the sidebar, and you can start to drag them onto the canvas. ### Future changes If you want to make changes to the form elements at a later point in time (like adding new steps, renaming inputs), and want these changes to be visible inside the Form Editor, you must follow the same steps: 1. Make changes to form elements 2. Publish your project to the .webflow\.io staging domain 3. Click the "Load elements" icon at the top right of the canvas ### Tutorial Video {% embed url="" %} # Basic controls ### Moving the Canvas To reposition the canvas in the Form Editor, press and hold the left mouse button anywhere on the canvas, then drag to move it to a new location. ### Zoom In and Out Zoom in or out by scrolling with your mouse wheel or touchpad. ### **Adding Steps & Action Blocks** Drag steps and action blocks from the Form Editor's sidebar onto the canvas to add them.

### **Connecting Steps and Action Blocks** Create a connection by clicking the black knob at the bottom of a step and dragging it to the top center of the next step. Release the mouse button to complete the connection. It works the same with action blocks.

### Deleting Connections Double-click on a connection between two steps to delete it. ### Accessing Step & Action Block Settings Click a step on the canvas to open its settings panel. This also provides access to additional step functionalities such as input validation and calculation.

Click on a step or block, and associated settings panel opens up.

### **Deleting Steps & Action Blocks** Right-click on a step or action block and select 'Remove' to delete it from the canvas.

# Branching & conditions The big advantage multi-step forms have, is that you can show different steps to different website visitors, based on their previous answers. This is called branching. Based on a condition which you set up, the website visitor will be routed through the form differently. ### Example scenario In the following example, you can see step branching in action

Based on the selection that the website visitor makes in the step "Main fitness goal", they will be redirected to a different step. Here is what the live step looks like:

### Creating conditions Watch the following video, to learn how to create conditions: {% embed url="" %} # Validation & Error messages Inputflow allows you two different input validation methods: 1. Required field validation, for very simple forms 2. Advanced validation with custom error messages The following two videos, teach you exactly how to set these up: ### 1. Required field validation, for very simple forms {% embed url="" %} ### 2. Advanced validation with custom error messages {% embed url="" fullWidth="false" %} # Calculations & Variables You can create variables, and perform calculations with these variables. This is very useful to calculate a final score, price or cost, etc. Watch the following video to learn how to set up calculations & variables {% embed url="" %} # Formula calculations Formula calculations offer more power and flexibility, than Inputflow's standard calculation features. Watch the following video to learn how it works:ou {% embed url="" %} # Action blocks Action blocks are powerful elements which provide additional functionality. # Conditions deep-dive Conditions are relevant for multiple differeent Inputflow features. Watch the following video to learn more about conditions in Inputflow: {% embed url="" %} # Match renamed radio groups Learn how to match renamed radio groups to old ones. {% embed url="" %} # Progress bar & Progress steps Learn how to add engaging progress indicators to your Inputflow forms with a few clicks: Inputflow has 2 types of progress indicators. 1. Progress bar 2. Progress steps You can use both at the same time, or only one of the two individually. ## How to create a progress bar {% embed url="" %} ## How to create progress indicator steps {% embed url="" %} # Automatically go to next step With this setting, the website visitor will automatically go to the next form step, after clicking on a radio button: {% embed url="" %} # Custom success message Create a custom success message, instead of using the default Webflow form success state {% embed url="" %} # Conditional success messages Show different success messages, depending on the user input: {% embed url="" %} # Display data To display user input or the value of a variable inside of your form, you just have to write @\[input or variable name] inside of a text element (headings, paragaphs, text blocks, etc). If you for example want to display the value of the field "First name", then you would have to write @\[First name]. ### Example data display This is how it looks like in the Designer:

The user of the form fills out the "First name" field

**The first name is dynamically displayed in the next step of the form** (And in all other places where a text element contained the @\[First name] placeholder):

You can use this functionality to display any Input value of your choice. You can also display variable values this way. If you have a variable called "price", then you could display it anywhere inside the form, simply by typing @\[price] # Radio button & checkbox active state Activate this setting to automatically add a combo class to all active radio buttons and checkbox fields. Watch the following video to learn how: {% embed url="" %} # Zapier & Make webhooks ## Submit form to Zapier {% embed url="" %} ## Submit form to Make {% embed url="" %} # Conditional styles & Visibility # Common errors & mistakes ### Inputflow does not work on the website, but it works in the Designer A lot of times this happens, if the Inputflow script has not been added to the page yet: {% content-ref url="/pages/Z74uVOA3pkAFHBJtT25a" %} [Adding the Script](/getting-started/adding-the-script) {% endcontent-ref %} ### My form does not work on the production domain, only on the .webflow\.io domain! In order for Inputflow to work on your production domain, you must subscribe to one of our plans. Check out your available options here: [inputflow.io/pricing](https://inputflow.io#pricing) # How to get help? Fill out the support form at and we will get back to you as soon as possible. Support is very important to us, so for simple requests, we reply by email, for complex requests and questions we usually send you a personalized Loom video.