> For the complete documentation index, see [llms.txt](https://docs.flowappz.com/home/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.flowappz.com/home/form-fields-pro/getting-started/generating-form.md).

# Generating Form

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

1. Open **Form Fields Pro** and click the **New Form** button.
2. Enter a **unique name** for the form.
3. Click **Next** to open the form builder.

<figure><img src="/files/jZkiXf3BobcA2kdr8bSF" alt=""><figcaption></figcaption></figure>

### Step 2 — Add Input Fields and Insert the Form into Webflow

1. In the Form Fields Pro app, click the **“+” icon** to open the **Input Fields Panel**.
2. From the panel, **select** or **drag and drop** the input fields you want to include in your form.
3. Open your **Webflow Designer** and add a **Form** component from the Components Panel.
4. Inside the Form component, select the **Form Element** and **delete all existing default fields** (e.g., name, email, submit button).
5. Keep the **Form Element** selected and return to the Form Fields Pro app.
6. Click **Insert Form** to automatically insert your newly-created form structure into the selected Webflow Form Element.
7. For visual guidance, watch the video tutorial provided below.

<figure><img src="/files/28pSzp1uYTAZuhnkq9Li" alt=""><figcaption></figcaption></figure>