# 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.md) {% 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.

Select the form block element

Open the Elements Manager

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.md) 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.md).

Turn element into a step

Enter step name and click "Create step"

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.md) {% endcontent-ref %} {% content-ref url="/pages/2tvRISXPQ3bxbip6VFXp" %} [Create steps](/elements-manager/create-steps.md) {% endcontent-ref %} ### 6. Create next and back buttons Create [next buttons and back buttons](/elements-manager/next-and-back-buttons.md) with the [Elements Manager](/elements-manager/what-is-the-elements-manager.md), 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.md), by clicking "Load elements"
After successfully [loading the steps](/form-editor/loading-form-elements.md), 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.md) 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.md) {% 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.md). ### 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. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.inputflow.com/getting-started/2-minute-quick-start.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.