Below are the step-by-step instructions for generating a Webflow form with Form Fields Pro and inserting it into the Webflow Designer. Start from Step 1 and follow each step in order.
Step 1 — Create a New Form
- Open Form Fields Pro and click the New Form button.
- Enter a unique name for the form.
- Click Next to open the form builder.
Step 2 — Add Input Fields and Insert the Form into Webflow
- In the Form Fields Pro app, click the “+” icon to open the Input Fields Panel.
- From the panel, select or drag and drop the input fields you want to include in your form.
- Open your Webflow Designer and add a Form component from the Components Panel.
- Inside the Form component, select the Form Element and delete all existing default fields (e.g., name, email, submit button).
- Keep the Form Element selected and return to the Form Fields Pro app.
- Click Insert Form to automatically insert your newly-created form structure into the selected Webflow Form Element.
- For visual guidance, watch the video tutorial provided below.