24. Conversational Mode | Form Forge - Build Forms with AI in Seconds

Conversational mode renders each field as a full-screen step in a Typeform-style experience. PRO feature.

Enabling

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

Technical Implementation

When settings.conversational is true, the renderer calls render_conversational(). Key behaviors:

Field grouping: Each visible field becomes a separate step
Step numbering: Numbered badges are recalculated from currently visible steps; conditionally hidden fields are skipped without leaving numbering gaps
Separate CSS/JS: assets/css/conversational.css and assets/js/conversational.js
Keyboard navigation: Enter advances, Shift+Enter always advances, Up arrow goes back
Back navigation: No validation when going backwards

Embedding as a Full-Page Experience

<?php
/**
 * Template Name: Conversational Form
 */
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head(); ?>
    <style>
        body { margin: 0; padding: 0; overflow: hidden; }
        .ff-conversational { min-height: 100vh; }
    </style>
</head>
<body>
    <?php echo FORMFORGE_Form_Renderer::instance()->render( 42 ); ?>
    <?php wp_footer(); ?>
</body>
</html>

—