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.

Subscribe on YouTube

Download and install

1. If you haven't already, install and activate the current version of Formidable Forms Premium on your WordPress site.
2. After confirming your Formidable Forms license, proceed to the Formidable → Add-Ons page and toggle on the Conversational Forms plugin.
   

Set up conversational form mode

1. Go to your form Settings → Conversational Forms.
   
2. Click to toggle Turn on conversational form mode to convert your form fields with one question at a time. This enables JavaScript validation.
   
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.
   
5. The settings for transition types enable users to select how elements are shown or removed from the display. Select the transition style that aligns well with your form requirements.
   • Horizontal. Elements move in from either side, delivering a seamless effect.
   • Vertical. Elements come in from the top or bottom, introducing a vibrant dynamic.
   • Fade. Elements slowly fade in or out, resulting in a soft and smooth visual presentation.
6. 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.
     
   • Text: Show a text to separate each conversation.
     
   • Progress Bar and Text: Show the text above the progress bar to separate each conversation.
     
7. Set the text for the Continue and Start buttons.
8. 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.
   

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.

Style the submit button on the last question

Use this custom CSS to change the style of the submit button for the final question in the conversational form. The frm_final_question class only applies when the conversational form reaches its last question.

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.