Most online forms are quite mundane in nature, which often affects conversion rates and user experience negatively. Modern design has alleviated this issue greatly through the use of conversational forms — i.e., forms that emulate an interactive, bite-sized interface to keep users engaged.
Pro users of Ultimate Addons for Contact Form 7 can use this capability through its Conversational Form plugin.
Setting Up Conversational Form Addon
Predictably, you’ll require the Ultimate Addons for Contact Form 7 Pro plugin installed and activated. In addition, you’ll have to download the UACF7 Addon named Conversational Form from Themefic’s download portal.
Assuming you’ve downloaded the addon, visit the Addons Settings tab and enable the Conversational Form box to enable this feature in Ultimate Addons.
Using UACF7 Conversational Form
To enable the conversational form feature, you first need to go to the editing tab of the particular form. You should see a new tab called UACF7 Conversational Form. To turn that specific Contact 7 form into a conversational one, check the box that says Enable Conversational Form.
-> Once that’s enabled, you should now see two new buttons on the form editing section — Conversational Start and Conversational End. The first button allows you to create a new step in your conversational form, and the latter allows you to close it (think of them as opening and closing tags).
-> Upon clicking on the Conversational Start button, a form-tag generator will pop up, where you can add attributes to the step. The Title section will be the header of the step, and the Step Number will refer to the stage of the form-filling process the user is in.
Finally, the Name attribute lets you add a unique name for that step. Ultimate Addons will use all these attributes to generate a tag for the step, and clicking on Insert Tag will embed it to the form.
Note: Since the conversational form utilizes Ultimate Addon’s multi-step capabilities, you have to enable that particular form on the UACF7 Multistep form tab as well.
- Once you’re done creating the step, you can click on the button named Conversational End, which will bring another pop-up. Here, you can determine if the end of the step will show a button to the user (to redirect them to another page, for example).
You can follow this exact process to create more steps in your form.
Customizing the Conversational Form
By switching to the UACF7 Conversational Form tab, you can customize that particular conversational form.
Conversational Form Option
- Enable full screen allows for a full-screen view of the form, which otherwise will not cover the entire viewport height and width.
- There are three templates for the form’s layout, which you can choose from the Select Layout dropdown.
In addition, the background color, button color, and button background color can be changed by the user. You can also add a background image for the step, either by selecting an image in the backend or uploading one.
Progressbar Option
As this is essentially a multi-step form, you can customize how the progress bar looks. That includes the height (in px), background color, and the background color for the completed portion.
Conversational Intro Option
This section allows you to customize how the intro step of the conversational form will look like.
The Intro Title will be the header users are greeted with, while the intro button will take them forward. You can specify the background image, intro’s background, and text color here.
The text can be edited with a visual editor (if you’re not privy to codes) or a traditional text editor with opening and closing tags.
Conversational Steps Option
In this section, you’ll be able to customize each step of the conversational plugin. Hence, if you have two steps, you’ll find two sub-sections (like the example below).
The Content Position allows you to alternate the positions between the form’s content and the conversational field image (whether the content will be on the left or right). You can select the image and modify the background and content color here as well.
It’s also possible to add your own custom CSS code for additional customizability, as with any addons in the Ultimate Addons lineup.
Combining with Other Ultimate Addons Features
You can utilize other addons from the Ultimate Addons for Contact Form 7 catalog. For instance, you could add custom rules through the UACF7 Conditional Fields addon and have your conversational forms return different results for different conditions.
In the same vein, you can activate other addons from the Ultimate Addons tab and incorporate them with the conversational forms.