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.

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.
   
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. 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.
     
5. Set the text for the Continue and Start button.
6. 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.

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.