How to Create Conversational Forms with WordPress Fluent Forms?

If you’re looking for the process of creating a conversational form like Typeform in WordPress using the brand new feature of the most popular and powerful Fluent Forms, then stick with me as in this tutorial I am going to show you the step-by-step process of creating a basic conversational form.

The intention behind writing this tutorial is to just give you a general idea of creating a conversational form, as it would be impossible to cover all the aspects of creating this type of form in this single post because the possibilities are endless with this latest form builder.

However, if you are already a Fluent Forms user then it won’t be any different than creating a normal contact form using the Fluent Forms Editor window, but if you’re new to this form builder or even an existing user who is confused about using this awesome feature then read this entire post and you will end up creating your own conversational form by the end of this tutorial.

• Fluent Forms Product Page: https://sync.win/fluentforms
• Fluent Forms Deal Page: https://syncwin.com/showcase/fluent-forms/
• Fluent Forms vs Other Forms: https://syncwin.com/wordpress-form-builders-comparison/

Overview of the Conversational Form that We Will Create

Check out the screenshot below to get an overview of the conversational form that we are going to create with Fluent Forms throughout this post. The landing screen of the conversational form will contain the following things once the form is ready and published:

1. A heading, subheading, and call to action button.
2. The form completion percentage indicator.
3. Up and Down arrows to manually move into the previous and next screen.

• Save

Step #1. Create a Conversational Form in Fluent Forms

The very first step is to click the All Forms link from the Fluent Forms menu under the WordPress Admin menu then click on the Dropdown Arrow attached with the Add a New Form button.

Once you click that arrow you will find a button to Create Conversational Form, just hit that button and it will create a blank conversational form for you.

• Save

Step #2. Add a Welcome Screen Element

After creating the blank conversational form you will be redirected to this beautiful editor window of the Fluent Forms where first you need to add the Welcome Screen element to get started.

There are two ways to access the element panel in the Fluent Forms Editor, one is from the right-side properties panel and another is by clicking the Plus (+) button on the editor window and then finding it under the drop-down window of the properties panel.

Whichever method you find convenient just click on the Welcome Screen element and it will be added to the editor window.

• Save

Step #2A. Fill up the fields of the Welcome Screen Element

Now it’s time to fill up all the necessary fields of the Welcome Screen element that we just added in the above step.

Follow the below steps for more details:

1. Element Label: This label will show up as the main heading of your welcome screen so fill it up wisely.
2. Description: You can add a description explaining more about this form to make it more clear for the users.
3. Content Alignment: It will make your content left, right, or center, however, I left it as it is because in the next step I am going to add an image and adjust the layout from there.
4. Submit Button Text: This button is a call to action to encourage people to move to the next step of your form.

• Save

Step #2B. Customize the Advanced Options of the Welcome Screen Element

Once you fill up the fields as shown in the above section you need to customize the Advanced Options of the Welcome Screen element.

1. Open the Advanced Options: Click on the drop-down Arrow (^) sign on the right side of the Advanced Options panel to open up the settings panel.
2. Button Style: Now select the button color from the multiple available options in the Button Style drop-down field or just select Custom to add your own branded colors for the button as I did for this tutorial.
3. Button Size: In this section, you can make your button Small, Medium, or Large, in this case, I kept it medium.

• Save

Step #2C. Adjust the Layout Settings of the Welcome Screen Element

Here you can adjust the layout of your welcome screen by adding an image of your choice to make it look more attractive and visually appealing.

1. Open the Layout Settings: Click on the drop-down Arrow (^) sign on the right side Layout Settings panel to open up the settings panel.
2. Select & Adjust Layout Type: Here you can select from multiple available layout options, in this case, I have selected the second option which keeps my content on the left and the image on the right with top and bottom paddings.
3. Add Media Alt Text: Must add a Media Alt Text if you want to make the text visible in case the image breaks for some reason.

• Save

Step #3. Add the Simple Text Element

In this step, you need to add a Simple Text element which we are going to use for the Name Field.

However there are two ways to do this as I showed in Step #2, one is from the right side properties panel and another is by clicking the Plus (+) button on the editor window just below the Welcome Screen element and then find it under the drop-down window of the properties panel.

From there you need to click on the Simple Text element and add it to the Fluent Forms editor window.

• Save

Step #3A. Fill up the Simple Text Element Fields

In this section, we will fill up all the necessary fields of the Simple Text element to make it look how we want it to be on the front end.

Follow the below steps for more details:

1. Element Label: As we’re going to make this a name-capturing field, so the question we would add here is to ask the name of the visitor.
2. Admin Field Label: It will help you understand the purpose of this field by looking at it on the backend, thus I am adding “name” to this field to make it recognizable.
3. Placeholder: This field is best for showing an example to the visitors of what this field is all about.
4. Required: Here you can make the field Required or Non-Required by selecting from the two obvious options.
5. Error Message: You can add an error message here if this name field is left blank by the users to make them aware that this is a required field.

• Save

Step #3B. Fill up the Advanced Option Fields of Simple Text Element

In this section, we will fill up all the necessary fields on the Advanced Options of the Simple Text element to make this more engaging for the visitors.

1. Open the Advanced Options: Click on the drop-down Arrow (^) sign on the right side Advanced Options panel to open up the settings panel.
2. Default Value: Use this field to pre-populate a custom or dynamic value on the front end, so in this case, I have added the {user.display_name} dynamic tag from the various available options, which means the website users will see their name already populated in this field.
3. Help Message: Use it to describe the purpose of the field to make it easier for users to understand, so in this case, I have asked to add the user’s full name here.
4. Name Attribute: Add a unique name attribute to this field as it will be used while submitting the form, I added full_name_input as the field attribute.
5. Max Text Length: It helps you to set predefined character limits of this field to get accepted, I would leave this field blank as I don’t want people to trim their names just because of me 😉
6. Validate as Unique: If you want to make this field validation unique from the previous submission of this same form then mark it as unique, I will leave it blank in this case.
7. Conditional Logic: You can add conditional logic to this field to dynamically show or hide it based on the other field data of this form.

• Save

Step #3C. Select & Adjust the Layout Settings for Simple Text Name Element

In this section, you can select and adjust from the multiple layout options to this field by adding media on the right or left with or without top and bottom padding. However, I would leave this as default because I don’t want to add an image with a name field.

Note: Don’t forget to hit the save button to save all the customizations you have made to this name field, or everything will be lost.

• Save

Step #4. Add Email Address Element

In this step, you need to add an Email Address element to capture the emails of the website visitors.

So again there are two ways to achieve this as I showed in Step #2 and Step #3, one is from the right side properties panel, and another by clicking the Plus (+) button on the editor window below the Simple Text element and then find it under the drop-down window of the properties panel.

From there you need to click on the Email Address element to add it to the editor window.

• Save

Step #4A. Fill Up the Email Address Fields

In this section, we will fill up all the necessary fields of the Email Address element to make it look how we want it to be on the front end.

Follow the below steps for more details:

1. Element Label: This field is all about capturing the email addresses of the visitors so here we would simply ask people to provide their email addresses.
2. Admin Field Label: It will help you understand the purpose of this field by looking at it on the backend, thus I am adding “email” to this field to make it recognizable.
3. Placeholder: It is best to show an example to the visitors of what this field is all about, so I have added a demo email address over here.
4. Required: Here you can make the field Required or Non-Required by selecting from the two obvious options. In this case, getting the email address is a must so I will make it as required.
5. Error Message: You can add an error message here if this email field is left blank by the users to make them aware that this is a required field.

• Save

Step #4B. Fill Up the Fields of Advanced Options of Email Address Element

In this section, we will fill up all the necessary fields in the Advanced Options of the Email Address element.

1. Open the Advanced Options: Click on the drop-down Arrow (^) sign on the right side of the Advanced Options panel to open up the settings panel of the Email Address element.
2. Default Value: Use this field to pre-populate a custom or dynamic value to the front end, so in this case, I will add the {user.user_email} dynamic tag which means the website users will see their email addresses already populated in this field.
3. Help Message: Use it to describe the purpose of the field to make it easier for the users to understand, so in this case, I have asked to provide the user’s email address here.
4. Validate as Unique: If you want to make this field validation unique from the previous submission of this form then mark it as unique, I will leave it blank in this case.
5. Name Attribute: Add a unique name attribute to this field as it will be used while submitting the form, I added email_address as the field attribute.
6. Conditional Logic: You can add conditional logic to this field to dynamically show or hide it based on the other field data of this form.

• Save

Step #4C. Select & Customize the Layout Options of Email Address Element

In this section, you can select and adjust from the multiple layout options of this email address field by adding media on the right or left with or without top and bottom padding. However, I would leave this as default because I don’t want to add an image with the email address field.

Note: Don’t forget to hit the save button to save all the customizations you have made to this email address field, or everything will be lost.

• Save

Step #5. Add a Text Area Element

In this step, you need to add a Text Area element to let the website visitors write about their concerns in detail.

So again as I said there are two ways to achieve this as I showed in Step #2, Step #3 & Step #4, one is from the right side properties panel, and the other by clicking the Plus (+) button on the editor window below the Email Address element and then find it under the drop-down window of the properties panel.

From there you need to click on the Text Area element to add it to the editor window of the Fluent Forms.

• Save

Step #5A. Fill Up the Fields of Text Area Element

In this section, we will fill up all the necessary fields of the Teaxarea element to make it how we want as we will use this field to offer users to explain their concerns in detail.

Follow the below steps for more details:

1. Element Label: We will ask the website, visitors, to explain the reason for contacting us, so I have added the proper question to encourage them to add details to this textarea field.
2. Admin Field Label: It will help you understand the purpose of this Textarea field by looking at it on the backend, thus I am adding “textarea” to this field to make it recognizable.
3. Placeholder: You can add an example content as a placeholder for what you want users to add in this field.
4. Rows: This setting will help you to make the textarea field taller or shorter by adding or removing the number of rows. I added 4 rows, in this case, to make it a mid-height field.
5. Columns: These settings will let you make the textarea field narrow or broad by adding or removing the number of columns. I left this field option default which is 2 to keep the field as it is and match with the other fields.
6. Required: Here you can make the field Required or Non-Required by selecting from the two obvious options.
7. Error Message: You can add an error message here if this field is left blank by the users to make them aware that this is a required field.

• Save

Step #5B. Fill Up the Advanced Fields of Text Area Element

In this section, we will fill up all the necessary fields on the Advanced Options of the Text Area element to make this more engaging for the visitors.

1. Open the Advanced Options: Click on the drop-down Arrow (^) sign on the right side of the Advanced Options to open up the settings panel of the Textarea element.
2. Default Value: Use this field to pre-populate a custom or dynamic value to the front end, however, I don’t need any dynamic data in this case of the textarea field.
3. Help Message: Use it to describe the purpose of the field to make it easier for users to understand, so in this case, I have asked to add the user’s message for this textarea field.
4. Name Attribute: Add a unique name attribute to this field as it will be used while submitting the form, I added “your_message” as the field attribute.
5. Max Text Length: It helps you to set predefined character limits of the field to get accepted, I would leave this field blank but you can add certain limits like 400 characters or so.
6. Conditional Logic: You can add conditional logic to this field to dynamically show or hide it based on the other field data of this form.

• Save

Step #5C. Select & Adjust the Layout Settings of Textarea Element

In this section, you can select and adjust from the multiple layout options of this Textarea element field by adding media on the right or left with or without top and bottom padding. However, I would leave this as default because I don’t want to add an image with the textarea field.

Note: Don’t forget to hit the save button to save all the customizations you have made to this textarea field, or everything will be lost.

• Save

Step #6. Adjust the Design, Meta & Sharing Options of the Conversational Form

In this section, we will see how we can customize the design and appearance of the form, and adjust the meta tags and form messages as per our needs. Also, we will see all the sharing and embedding options of the Conversational Forms made with the Fluent Forms.

Step #6A. Adjust the Design & Appearance of the Conversational Form

Using this Design Tab under the Design Section of Fluent Forms you can make changes to the appearance like colors, layout, background, and branding of the Conversational Form.

1. Open the Design Tab: Click on the Design Tab under the Design Section to customize the appearance of your Conversational Form.
2. Font: Here you can select the Font for your form from the available font options.
3. Questions: Select the color for the Questions of your conversational form.
4. Answers: Select the color for the answer fields of your conversational form.
5. Button: Select the color for the buttons of your form.
6. Button Text: Here you can select the text color for the buttons.
7. Background: Select the color for the background of your form.
8. Background Image: Upload the background image for the form.
9. Disable Layout on Mobile Devices: This option will allow disabling the layout on mobile devices.
10. Disable Scroll to Next: This option will let you disable the scroll to the next screen on the front end of the form.
11. Disable Branding: This option will allow you to remove the Fluent Forms branding.
12. Save Settings: After customizing all the settings just hit this Save Settings button to save the changes you made.

• Save

Step #6B. Adjust the Meta Settings & Form Messages of the Conversational Form

Using this Meta Tab under the Design Section you can make changes to the meta settings and form the messages of the Conversational Form.

1. Open the Meta Tab: Open the Meta tab under the Design Section to adjust the meta texts as per your needs.
2. Meta Title: You can change the meta title of your conversational form and it will show up on social media if you share the form there.
3. Meta Description: You can add meta descriptions for social media sharing.
4. Featured Image: Add a featured image for your form for social media sharing.
5. Security Code: It’s an optional feature to enhance security so nobody can guess the form ID when you share the form URL somewhere.
6. Continue Button Text: This field will let you change the text for the continue button.
7. Confirm Button Text: This field will let you change the text for the confirm button.
8. Skip Button Text: This field will let you change the text for the skip button.
9. Hint for Single Selection: This field will let you change the text hint for a single selection from multiple options.
10. Keyboard instruction to go to the next question: This field will let you change the text for the continue button Keyboard instruction to go to the next question of your conversational form.
11. Progress Text: This field will let you change the progress text of your conversational form using the available variations with the combination of custom text.
12. Hint for making a line break in Textarea: This field will let you change the text hint for making a line break in textarea.
13. Hint for multiple selections: This field will let you change the text hint for multiple selections.

Note: At the end must hit the Save Button to save all the changes you made on this window.

• Save

Step #6C. Sharing Options of the Conversational Forms

Using this Share Tab under the Design Section you can find all the sharing and embedding information of your Conversational Form.

1. Open the Share Tab: Now click on the Share Tab under the Design Section to find all the sharing options for your conversational form.
2. Share Via Direct URL: You can find the URL here to share your conversational form on social media or somewhere else.
3. Shortcode for Classic Form: This shortcode can be used to embed the conversational form as a classic form on your website.
4. Shortcode for Conversational Form: This shortcode can be used to embed the conversational form on the pages of your website.
5. Embed via HTML Code: This HTML code will let you embed the conversational form on a different website as an iframe.

• Save

Conclusion

In this tutorial, I have tried my best to cover every detail it takes to create a basic conversational form using the power of Fluent Form to give you an overview of what you can achieve with this new form format of one of the Best WordPress Form Builders.

I strongly believe that you have found this post helpful and if that is the case then consider sharing it with your friends and community to help them find this tutorial as well.

Also if you have to ASK or SAY something regarding this topic then feel free to share your thoughts in the comment box below and add some value for the readers and the community.

Thanks for visiting syncwin.com!