How to Customize a Conversational Form with WP Fluent Forms

WP Fluent Forms is a WordPress form plugin that looks amazing and works with almost any theme. However, you might need to style the Conversational Form further so that it appears to suit your overall site design. Fluent Forms offers a separate Design feature to make it easier to customize the form.

This tutorial will demonstrate how to create a custom design in a Conversational Form, with just a few clicks.

After creating the form, click on the Design option next to the editor option. Then the preview page will open where you can start styling the form.

The Design option includes three tabs; Design, Meta, and Share.

Design Tab

The Design tab is used for styling each individual element of the form. Let’s have a thorough look at how the Design tab works:

  • Font: Use this option to choose a Font-Family for the form.
  • Choose the color of the Questions, Answers, Button, Button Text & Background with the color selector.
  • Background Image: Use this option to upload your desired background image to your form.
  • Disable Layout on Mobile Devices: Turn on this option on to hide your Custom Layout of the form on Mobile Devices.
  • Disable Scroll to Next: Turn on this option to prevent users from scrolling down to the next field.
  • Disable Branding: Turn on this option to hide the Fluent Forms brand text.
  • BG Brightness: Adjust the brightness of the Background Image with this option.

Check out the example given below which has been customized with the Design tab:

Meta Tab:

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:

  • Meta Title: Use this option to add your Meta Title to your form. This title will be displayed on your browser tab.
  • Meta Description: Add your Meta Description here, this description is a summary of the content of the form’s page on your site.
  • Featured Image: Upload your Featured Image here, this will be used for your social sharing preview Image.
  • Security Code (Optional): Add this Security Code so that, this will act as a Salt to secure your Share URL so nobody can guess by Form ID.
  • Continue Button Text: Set a relevant text for the Continue button on the form.
  • Confirm Button Text: Set a relevant text for the Confirm button on the form.
  • Skip Button Text: Use this option to add a relevant text for the Skip button.
  • Hint for Single Selection: Add a hint/clue for users to know whether it’s a Single Selection.
  • Keyboard instruction to go to next question: Include an appropriate instruction for users to move on to the Next Question.
  • Progress Text: Use this option to include a Progess Text, the available variables are: {percent}, {step}, {total}
  • Hint for making a line break in Textarea: Add a hint for users to make a line break in the Textarea of the form.
  • Hint for multiple selection: Add a hint/clue for users to know whether it’s Multiple Selection.

Share Tab:

This tab is used for Share your form by unique URL or Copy and Paste the shortcode to embed it in your page and post. The following options available on this tab are given below:

  • Share Via Direct URL: This option is for getting the link or for sharing it on social sites.
  • Shortcode for Conversational Form: Use the given shortcode from this option in your Page or Post.
  • Embed via HTML Code: If you want to use this form in another domain or another site or even outside WordPress? You can use the given code from this option. You can customize the height property.
  • Shortcode for Classic Form: Use this following shortcode in your Page or Post.

Lastly after customizing your form, make sure to click on the Save Settings button to save all the settings.

Was this article helpful to you?

1

How can we help?

Please submit a support ticket if you have any question or pre-sale questions. Our Customer support engineers will answer your query as soon as possible

Open a support ticket