Inputflow documentation
  • Getting started
    • 🪄What is Inputflow?
    • 🏷️Adding the Script
    • 💡2 Minute Quick Start
    • 📽️Video tutorial
  • Elements Manager
    • What is the Elements Manager?
    • Form structure
    • Connect a form
    • Create steps
    • Next & back buttons
    • Submit buttons
    • Elements Manager Video Tutorial
  • Form Editor
    • What is the Form Editor?
    • Loading form elements
    • Basic controls
    • Branching & conditions
    • Validation & Error messages
    • Calculations & Variables
    • Formula calculations
    • Action blocks
    • Conditions deep-dive
    • Match renamed radio groups
  • Engagement boosters
    • Progress bar & Progress steps
    • Automatically go to next step
    • Custom success message
    • Conditional success messages
    • Display data
    • Radio button & checkbox active state
  • Other
    • Zapier & Make webhooks
    • Conditional styles & Visibility
  • Examples
    • 🏋️Gym Onboarding Form
    • ☀️Solar Investment Calculator
    • 🍕Order Form Food Delivery
    • 📑Agency Inquiry Form
  • Troubleshooting
    • Common errors & mistakes
    • How to get help?
Powered by GitBook
On this page
  • 1. Group your inputs inside Div Block elements
  • 2. Give your inputs clear & descriptive names
  1. Elements Manager

Form structure

PreviousWhat is the Elements Manager?NextConnect a form

Last updated 1 year ago

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.

Div Block with the form elements inside
Good and descriptive input field name
Bad and confusing input field name