Your First Form

What this does

FormFlow adds new field types and options to the Elementor Form widget. This page shows how to build a form that uses them, so your forms do more than the defaults allow.

Typical use cases

• A feedback form with a Rating field.
• A quote form with a Range Slider and a Currency field.
• A multi‑section form using Containers to group fields.

---

Step 1 — Enable the features you want

Go to FormFlow → Features and switch on the capabilities you’ll use (fields, conditional logic, styling, etc.). Only enabled features appear in Elementor. See Features Tab.

---

Step 2 — Add the Form widget

1. Edit your page with Elementor.
2. Drag in the Form widget (Elementor Pro).
3. Open the Form Fields section to manage fields.

---

Step 3 — Add FormFlow fields

Add a field and pick a FormFlow type. Popular starters (all Starter‑free):

Each field has its own settings and styling — see the matching page under Fields (for example, Rating Field).

---

Step 4 — Add logic or styling (optional)

With features enabled, you can:

• Show/hide fields with Field Conditional Logic (Free).
• Mask inputs or style labels (Free) — see Input Masks and Label Styler.
• Add a Confirmation Popup (Pro).

---

Step 5 — Preview, test, publish

1. Preview the page.
2. Submit a test entry and confirm the fields and logic behave correctly.
3. Publish when you’re happy.

---

Tips & Best Practices

• Group with Containers. For longer forms, Containers keep fields tidy and improve completion rates.

• Enable only what you use so the Elementor editor stays uncluttered.

• Label clearly. Good field labels reduce errors and abandoned forms.

• Test on mobile. Most forms are filled on phones — preview there too.

• Add logic last. Build the fields first, then layer conditional logic once the structure is set.

---

Frequently Asked Questions