Fluent Forms provides a variety of options for customizing Conversational Forms based on your preference. This article will guide you through designing conversational forms with Fluent Forms.
Designing Conversational Forms #
To learn how to design a conversational form, follow the steps with screenshots below –
First, go to Forms from the Fluent Forms Navbar, select the desired Conversational Form you want to design, and click the Edit option.
If you do not have any existing conversational form, read this Documentation to create a new one.
Once you are on the Editor page, go to the Design section, and three major options will appear for designing your form. These are:
- Design
- Meta
- Share
All the three options are explained below:
1. Design #
Under the Design tab, you will get various options to customize your form appearance. The Design tab is used for styling each element of the form. These are:
A. Font: Use this option to choose a font family for the form.
B. Questions: Choose the color of the Questions using the color selector.
C. Answers: Choose the color of the Answers using the color selector.
D. Button: Choose the color of the Button using the color selector.
E. Button Text: Choose the color of the Button Text using the color selector.
F. Background: Choose the color of the Background using the color selector.
G. Background Image: Use this option to upload your desired background image to your form. BG Brightness: Adjust the brightness of the Background Image with this option.
H. Disable Layout on Mobile Devices: Turn this option on to hide your Custom Layout of the form on Mobile Devices.
I. Disable Scroll to Next: Turn on this option to prevent users from scrolling down to the next field.
J. Disable Branding: This option hides the Fluent Forms brand text.
K. Key Hint: If you Enable this option, the user can select any option by pressing the Keys (Only for Radio & Checkbox fields) by using the keyboard button( for example, Key A, Key B, Key C, etc., from the keyboard).
Once you are done, click the Save Settings button to save all your changes.
2. Meta #
The Meta Tab is used for setting your Social Sharing Meta texts and Form messages. The following options available on this tab are given below:
A. Meta Title: Use this option to add your Meta Title to your form. This title will be displayed on your browser tab.
B. Meta Description: Add your Meta Description here. This description summarizes the content of the form’s page on your site.
C. Featured Image: Upload your Featured Image here. This will be used for your social sharing preview Image.
D. Security Code (Optional): Add this security code to act as a Salt to secure your Share URL so nobody can guess by Form ID.
E. Continue Button Text: Set a relevant text for the Continue button on the form.
F. Skip Button Text: Use this option to add relevant text to the Skip button.
G. Keyboard instruction to go to the next question: Include an appropriate instruction for users to move on to the Next Question.
H. Hint for making a line break in Textarea: Add a hint for users to make a line break in the Textarea of the form.
I. Hint for multiple selections: Add a hint/clue for users to know whether it’s Multiple Selection.
J. Key Hint Text: Add a key hint text for users.
K. Confirm Button Text: Set a relevant text for the Confirm button on the form.
L. Hint for Single Selection: Add a hint/clue for users to know whether it’s a Single Selection.
M. Progress Text: Use this option to include a Progress Text; the available variables are: {percent}, {step}, {total}.
N. Invalid Prompt: Add a text for users to show when they fail to fill the field accurately.
O. Default Placeholder: Here enter the desired text as a default placeholder for fields.
P. Key Hint Tooltip: Here, add the desired text as a key hint tooltip.
Q. File Upload Size Limit Text: Here describe the recommended file upload size limit through the text.
Once you are done, click the Save Settings button to save all your changes.
3. Share #
This tab is used for Sharing your form by unique URL or Copying and Pasting the shortcode to embed it in your page and post. The following options available on this tab are given below –
A. Share Via Direct URL: This option is for getting the link or sharing it on social sites.
B. Shortcode for Conversational Form: Use the given shortcode from this option in your Page or Post.
C. Shortcode for Classic Form: Use the following shortcode in your Page or Post.
D. Embed via HTML Code: If you want to use this form in another domain/another site, or even outside WordPress? You can use the given code from this option. You can customize the height property.
After customization, click the Save Form button in the top right corner to save all the changes.
Click the Preview & Design button in the middle if you want to see the preview of your form. Also, copy the Form ShortCode from the top bar to display it on the front end.
Here is the preview of the designed conversational form.
If you have any further questions, concerns, or suggestions, please do not hesitate to contact our @support team. Thank you.
