Formidable Forms

Formidable Forms

  • Features
  • Pricing
  • Resources
    • Docs & Support
    • Blog
    • Community
  • Solutions
    • Web Applications
    • Calculators
    • Surveys
    • Directories
    • Payments
    • Contact forms
  • Login
  • Get Formidable Forms

Conversational Forms

Last Updated: March 18, 2022

Knowledge Base → Add-Ons → Appearance and UI → Conversational Forms

Convert your form into a modern lead generator with Conversational Forms. This plugin allows you to create a more engaging experience for your users by displaying a question one at a time.

Formidable Forms is the best WordPress Form Builder plugin. Get it for free!
Subscribe on YouTube

Download and install

  1. If you haven't already done so, install and activate Formidable Forms Pro.
  2. In your WordPress admin, go to Formidable → Add-Ons and click the Install button for the Conversational Forms plugin.

Set up conversational form mode

  1. Go to your form Settings → Conversational Forms.
    Conversational Forms Settings
  2. Click to toggle Turn on conversational form mode to convert your form fields with one question at a time. This enables JavaScript validation.
    Conversational Forms Settings Mode
  3. Click to toggle Include arrow button navigation to navigate the form with arrow buttons.
  4. Click to toggle Show start page to enable and disable the Start page.
    Conversational Forms Settings - Show Start Page
  5. Conversational Forms plugin includes the option to select a progress bar or text. By default, it will hide the progress bar.
    If you have set your form style template to Always use default, an auto imported style will be used instead of the normal default style.

    Choose from three types of the progress bar:

    • Progress Bar: Show a vertical line separating each conversation in the progress bar.
      Conversational Forms Settings Progress Bar
    • Text: Show a text to separate each conversation.
      Conversational Forms Settings Text
    • Progress Bar and Text: Show the text above the progress bar to separate each conversation.
      Conversational Forms Settings Progress Bar
  6. Set the text for the Continue and Start button.
  7. You can view your conversational form on a blank page, within your current theme, or on a landing page. For the best results, we recommend using a landing page. To preview what it would look like, click on Preview in the top-right corner.
    Conversational Forms Settings Preview

Include title and description

If the title and description are hidden in the form, the Conversational start page is not displayed. If you want to include them in your Conversational form, you can enable this in your form General Settings.

Displaying sections

Section titles and descriptions are shown as separate questions in a conversational form, displayed as field labels. A section heading is displayed with each row when moving between fields in a section. Sections have similar start pages but with continue buttons instead. In this case, the page is skipped if you have section labels set to hidden or none.

Automatic focus on page load

Automatic focus in form fields is implemented for better keyboard usability. By default, automatic focusing on page load for conversational forms will only happen on Landing pages and preview pages.

Additional Customizations

Add HTML using input from previous field

Use frmShowField to add additional HTML to a field using input from the previous field in a conversational form the first time the field is displayed. This Javascript event is triggered in two ways:

  • If a field is shown via conditional logic
  • If a field is shown in a conversational form
<script>
(function() {
    var firstNameFieldKey = '5814x';
    var onShowFieldId = 2549;
    var targetField = document.getElementById( 'frm_field_' + onShowFieldId + '_container' );
    function onFieldShown() {
        var firstName;
        if ( -1 !== targetField.className.indexOf( 'frm_active_chat_field' ) ) {
            firstName = document.getElementById( 'field_' + firstNameFieldKey + '_first' ).value;
            jQuery(targetField).prepend( 'Hi ' + firstName );
            jQuery(document).off('frmShowField', onFieldShown);
        }
    }
    jQuery(document).on('frmShowField', onFieldShown);
}() );
</script>

Replace '5814x' with the field key of the previous field where you want to get the input. Replace '2549' with the field ID of the current field where you want to show the input.

Set focus on date field after in-place edit

Use frmInPlaceEdit to set focus on a target date field after the in-place editor is triggered. This Javascript event happens when you trigger the in-place Edit.

<script>
( function() {
    function onInPlaceEdit() {
        var dateInputId = 'field_vntdo';
        var targetDateField = document.getElementById( dateInputId );
        if ( targetDateField ) {
            setTimeout(
                function() {
                    targetDateField.focus();
                },
                100
            );
        }
    }
    jQuery( document ).on( 'frmInPlaceEdit', onInPlaceEdit );
}() );
</script>

Replace 'vntdo' with the field key of your date field.

Related developer hooks

  • Remove the icon that appears with the press Enter text and the Shift+Tab instructions at the bottom of the page with the frm_filter_final_form hook.
  • Skip the first page with the Start button with the frm_filter_final_form hook.

Related Articles

  • Conversational Marketing Examples That Work 7 Amazing Conversational Marketing Examples That Work
    Read More
    Best Typeform Plugin for WordPress The Best Typeform Plugin for WordPress to Download Today!
    Read More
    Fluent Forms Conversational Forms Alternative A Reliable Fluent Forms Conversational Forms Alternative
    Read More
  • Chatbots vs. Forms Chatbots vs. Forms: Which Is the Best for Customers?
    Read More
    Best Typeform Alternative The 10 Best Typeform Alternatives for Your WordPress Site
    Read More
    A Guide to Conversational Marketing Conversational Marketing: A Quick Guide to Better Customer Service
    Read More
  • Conversational Form Design Conversational Form Design: Everything You Need to Know
    Read More
    create-interactive-forms How to Create Interactive Forms That Convert: 3 Easy Steps
    Read More
    How to Build a Conversational Form in WordPress How to Build a Conversational Form in WordPress (3 Steps!)
    Read More
  • Download and install
  • Set up conversational form mode
    • Include title and description
    • Displaying sections
    • Automatic focus on page load
  • Additional Customizations
    • Add HTML using input from previous field
    • Set focus on date field after in-place edit
  • Related developer hooks
  • Related Articles
Categories
×

Categories

  • Installation & Getting Started
  • Account Management
  • Forms
  • Entries
  • Views
  • Styles
  • Importing & Exporting
  • Add-Ons
  • Extend Formidable Forms

Using WordPress and want to get Formidable Forms for free?

Get Formidable Forms Lite Now

You do not have permission to view this form. Maybe you need to log in?

This article may contain affiliate links. Once in a while, we earn commissions from those links. But we only recommend products we like, with or without commissions.

Take on bigger projects Right Now

Get the tools you need to revolutionize your workflow and architect a masterpiece. Build the most advanced WordPress forms and actually use the data you collect in meaningful ways.

Get the most advanced WordPress form plugin and the only form builder with integrated Views.

Get Formidable Forms Now

Resources

  • Community
  • Affiliates
  • Contact
  • Free Online Form Builder

Top Features

  • Application Builder
  • Calculator Forms
  • Surveys & Polls
  • Quiz Maker
  • Form Templates
  • Application Templates
  • Directories
  • Donation Plugin

Company

  • About Us
  • Giving Back
  • Careers
  • Newsletter
  • WP Tasty
  • Nutrifox

Copyright © 2023 Strategy11, LLC. Formidable Forms® is a registered trademark Strategy11, LLC.
Privacy Policy | Terms of Service | Sitemap

Join 300,000+ using Formidable Forms to create form-focused solutions fast. Get Started See User Reviews