Conversational FormsPRO

Conversational forms present questions one-by-one instead of showing the entire form at once. This makes completing the form easier, improving conversion rates and user satisfaction. They are presented as a full screen form, allowing for larger, easier to read fields.

WS Form PRO - Conversational Forms


To view a demo of a conversational form, visit:


Conversational forms have the following features:

A Few Rules

Conversational forms require forms to be developed in a certain way to work correctly.

  • The WS Form framework must be used. Conversational forms are not compatible with Bootstrap or Foundation frameworks
  • Sections should be 100% width
  • For date fields, we recommend using the ‘Inline’ setting

How It Works

Each section of your form becomes a step in your conversational form and each section can contain any number of fields. We recommend keeping each section to one or two fields for an optimum user experience.

WS Form PRO - Conversational Forms - How It Works

Conversational forms reside on a full website page at a permalink determined by you.

Getting Started

To help you get started we have created a Conversational form template. You can find it here:

  1. Click on ‘WS Form’ in the WordPress administration menu.
  2. Click ‘Add New’.WS Form - Add New Form
  3. Click on the ‘Survey’ tab, then choose the ‘Conversational’ template.WS Form PRO - Conversational Form Template

This will create form that contains an introductory section and a selection of section examples that you can customize to your own preference.

Enabling Conversational on an Existing Form

The conversational form feature is disabled by default. To enable it:

  1. Click the form settings icon at the top of the layout editor when editing a form.
  2. Click the ‘Conversational’ tab.
  3. Check the ‘Enable’ setting.WS Form PRO - Conversational Forms - Enable
  4. Click ‘Save’.

Previewing the Form

You can preview the conversational form by clicking the ‘Preview’ button in the conversation tab. If you have ‘Live Preview’ enabled in Global Settings, the preview will automatically update as you edit your form.

WS Form PRO - Conversational Form - Preview


Once enabled, WS Form will create a permalink for your conversational form. By default, the permalink is:

… where 123 is the ID of your form.

You can customize the permalink as follows:

  1. Click the form settings icon at the top of the layout editor.
  2. Click the ‘Conversational’ tab.
  3. Enter any slug you wish into the ‘URL Slug’ setting.WS Form PRO - Conversational Form - Permalink Slug
  4. Click ‘Save’.

Be sure not to enter an existing slug used by another page or post.

Your form must be published in order to be seen at the permalink.

Setting Section Heights

You can set any sections of the conversational form to have a height of 100% so that it fills the screen completely. This is useful for an introductory section such as is found in the Conversational form template (see ‘Getting Started’ above) or for providing an effect where you only ever see one section at a time.

To set a section height:

  1. Hover your mouse over a section.
  2. Click the section settings icon.
  3. Click the ‘Advanced’ tab.
  4. Check the ‘Full Height (Conversational)’ checkbox.WS Form PRO - Conversational Form - Full Height
  5. Click ‘Save’.

Customizing Appearance

To customize the appearance of your conversational form you can either use the WordPress customizer, or enqueue your own CSS file.


To access the customizer feature:

  1. Click the form settings icon at the top of the layout editor.
  2. Click the ‘Conversational’ tab.
  3. Click ‘Customize’.WS Form PRO - Conversational Form - Customize
  4. Use the WordPress customize feature to change colors, fonts and layout settings.WS Form PRO - Conversational Form - Customize Editor
  5. Click ‘Publish’ to save your changes.

Enqueue Your Own CSS

To enqueue your own CSS, you can use the wsf_conversational_enqueue_styles action.

Sample code this can be found below:

function conversational_form_css() {

    // CSS file URL
    $css_file_url = sprintf( '%s/conversational-form.css', get_bloginfo( 'template_directory' ) );

    // Enqueue CSS file
    wp_enqueue_style( 'conversational-form', $css_file_url );

add_action( 'wsf_conversational_enqueue_styles', 'conversational_form_css' );

To learn more about enqueuing styles: wp_enqueue_style


By default, conversational forms have a navigation bar shown at the bottom of the page. It includes a progress bar and navigation icons for moving up and down the sections. The progress is determined by the number of required fields that have been completed.

WS Form PRO - Conversational Form - Navigation

The ‘Conversational’ tab in ‘Form Settings‘ has the following settings for the navigation bar:


Uncheck this option if you wish to remove the navigation bar from the conversational form.

Progress Help

This setting enables you to add smaller text under the progress bar. By default it shows he progress as a percentage, e.g. 25%.

The following variables can be inserted into this field:

#progress The form progress represented as a number from 0 to 100.
#progress_percent The form progress represented as a percentage from 0% to 100%.
#progress_remaining The remaining form progress represented as a number from 100 to 0.
#progress_remaining_percent The remaining form progress represented as a percentage from 100% to 0%.

Other WS Form variables can also be entered into this field.

Scroll Duration (ms)

Use this setting to configure the time it takes to vertically scroll between sections. This value defaults to 300ms.