23. Multi-Step Forms | Form Forge - Build Forms with AI in Seconds

Multi-step forms break a long form into smaller pages with a progress bar and Back/Next navigation. Created by inserting page_break fields. PRO feature.

Field Configuration

{
  "fields": [
    {"id": "field_1", "type": "text", "label": "Name", "required": true},
    {"id": "field_2", "type": "email", "label": "Email", "required": true},
    {"id": "pb_1", "type": "page_break", "label": ""},
    {"id": "field_3", "type": "textarea", "label": "Message", "required": true},
    {"id": "field_4", "type": "rating", "label": "Rating", "required": false},
    {"id": "pb_2", "type": "page_break", "label": ""},
    {"id": "field_5", "type": "checkbox", "label": "I agree to the terms", "required": true}
  ],
  "settings": {
    "multi_step": true
  }
}

This creates: Step 1 (Name, Email) -> Step 2 (Message, Rating) -> Step 3 (Terms, Submit).

Step Validation Behavior

On page load, only Step 1 is visible; the progress bar shows “Step 1 of 3”
Clicking “Next” validates the current step’s required fields
If all valid, the current step hides and the next step slides in
“Back” always works without validation
On the final step, the “Next” button is hidden and the “Submit” button is shown

Creating a Multi-Step Form Programmatically

$form_id = FORMFORGE_Form_Builder::instance()->create( [
    'title'  => 'Multi-Step Registration',
    'fields' => [
        [ 'id' => 'field_1', 'type' => 'text', 'label' => 'First Name', 'required' => true ],
        [ 'id' => 'field_2', 'type' => 'email', 'label' => 'Email', 'required' => true ],
        [ 'id' => 'pb_1', 'type' => 'page_break', 'label' => '' ],
        [ 'id' => 'field_3', 'type' => 'phone', 'label' => 'Phone', 'required' => false ],
        [ 'id' => 'field_4', 'type' => 'select', 'label' => 'Role', 'required' => true,
          'options' => [
              [ 'value' => 'developer', 'label' => 'Developer' ],
              [ 'value' => 'designer', 'label' => 'Designer' ],
          ] ],
        [ 'id' => 'pb_2', 'type' => 'page_break', 'label' => '' ],
        [ 'id' => 'field_5', 'type' => 'checkbox', 'label' => 'I agree to the terms', 'required' => true ],
    ],
    'settings' => [
        'multi_step'      => true,
        'submit_text'     => 'Complete Registration',
        'success_message' => 'Registration complete!',
    ],
] );

—