24. Conversational Mode

Conversational mode shows one question at a time in a Typeform-style panel inside the page. It is a Pro feature.

Enabling

Tick Conversational Mode above the form settings in the builder. It is stored in the form settings:

{
  "settings": {
    "conversational": true
  }
}

Technical Implementation

When settings.conversational is true, the renderer of the Free plugin applies the formforge/render_conversational filter, and Fillin Forge Pro draws the form. Key behaviors:

1. Field grouping: each visible field becomes a separate step. Page Break and Divider fields are skipped.
2. Separate CSS/JS: assets/css/conversational.css and assets/js/conversational.js, in the Pro add-on.
3. Keyboard navigation: Enter goes on to the next question, Tab and Shift+Tab move between the controls.
4. Last step: it says “All done!” and the normal success message follows.

Size and placement

The form sits in a panel in the page, not over it. The panel is at least 720 pixels tall, or the height of the screen when that is smaller (min-height: min(720px, 100vh)). Use your own CSS if you need another size.