Generic selectors
Exact matches only
Search in title
Search in content
Filter by Categories
Advanced Scripts
Amazon SES
Amazon Web Services
BasePress
Blocksy Theme
Brand Building
Bricks Builder
BunnyShell
Cloudflare
CSS
Digital Marketing
Elementor
Email Marketing
Entrepreneurship
FilterWP
Fluent CRM
Fluent Forms
Fluent SMTP
GoDaddy
Google Fonts
Gutenberg
HTML
Hydrogen Pack
JavaScript
Jetpack
Kadence Theme
LiveCanvas
Meta Box
Online Business
Oxygen Builder
OxyMade
PHP
Piotnet Forms
Piotnet Grid
Pods
SaaS
Scripts Organizer
Search Engine Optimization
Social Media Marketing
Swiss Knife
Web Design
Web Development
Web Strategy
WooCommerce
WooFunnels
WordPress
Work From Home
WP Social Ninja
Zion Builder

How to Create a Typeform Style Form with Fluent Forms

Written by:
Mohammed Wasim Akram
First Published on:
June 13, 2021
Last Updated on:
June 20, 2021
Post Categories:
✼ Disclaimer: SyncWin is user-supported therefore this page may contain our affiliate links and if you purchase something using those links, we may get some commission without any additional cost to you. Click to Learn More.

Please note we want to keep things crystal clear that this page may contain some of our affiliate links. Also, we don't know, use or recommend every product we link to, so please do your due diligence before making your buying decision.

However, there are very few selected products that we trust, use, and recommend to our readers and community, and we always mention that on our website which you could also find on our dedicated Recommendation Page.

Hence, if you make a purchase using any of those links, then it is safe to assume that we might get a small amount of commission without any additional cost to you, which helps and encourages us to produce more helpful content like this for you.

Feel free to explore our Legal Policy Pages.

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 Form 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.

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 throuout 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.
The Overview of Ready Conversational Forms - Image - SyncWin

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.

1st - Add Create a Conversational Form button - Image - SyncWin

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 find 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.

2nd - Add a Welcome Screen Field - Image - SyncWin

Step #2A. Fill up the fields of 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.
3rd - Fill up the fields of Welcome Screen Element - Image - SyncWin

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

Once you fill up the fields as shown in the above section next 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.
4th - Customize the Advanced Options - Image - SyncWin

Step #2C. Adjust the Layout Settings of 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 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 if the image breaks for some reason.
5th - Adjust the Layout Settings - Image - SyncWin

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.

6th - Add the Simple Text Element - Image - SyncWin

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 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.
7th - Fill up the Simple Text Element Fields - Image - SyncWin

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.
8th - Fill up the Advanced Option Fields of Simple Text Element - Image - SyncWin

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 a 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.

9th - Select & Adjust the Layout Settings for Simple Text Name Element - Image - SyncWin

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.

10th - Add Email Address Element - Image - SyncWin

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 for showing 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.
11th - Fill Up the Email Address Fields - Image - SyncWin

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 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 is 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 address 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.
12th - Fill Up the Advanced Fields of Advanced Options of Email Element - Image - SyncWin

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 a 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.

13th - Select & Customize the Layout Options of Email Element - Image - SyncWin

Step #5. Add a Text Area Element

In this step, you need to add an 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 another 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 on the editor window of the Fluent Forms.

14th - Add a Text Area Element - Image - SyncWin

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 to contact us, so I have added the proper question to encourage them to add details on 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 of 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.
15th - Fill Up the Fields of Text Area Element - Image - SyncWin

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 is 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.
16th - Fill Up the Advanced Fields of Text Area Element - Image - SyncWin

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 a 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.

17th - Select & Adjust the Layout Settings of Textarea Element - Image - SyncWin

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, 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.
18th - Design Adjustment of The Conversational Form

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.

19th - Adjust the Meta Settings & Form Messages of the Conversational Form - Image - SyncWin

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.
20th - Share Details of the Conversational Forms - Image - SyncWin

Conclusion

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

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.

Fluent Forms Product Page: https://syncwin.com/fluent-forms
Fluent Forms Deal Page: https://syncwin.com/deal/fluentform-pro/
Fluent Forms Comparison with Other Forms: https://syncwin.com/comparison/wordpress-form-builders/


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 our website SyncWin.com.

Become an Insider to Syncronize with Web-Success.

email Newsletter
Facebook Group
Subscribe to our newsletter to get insider wisdoms.
Join our community to connect with likeminded folks.
Join FB Group

Related Resource Posts

August 11, 2020
How To Create A Beautiful Sidebar in Oxygen [Step by Step]

If you're new to Oxygen Builder then you must be confused about how to set up a sidebar as there is no such option available, therefore in this post, I am going to teach you to set up and design a sidebar in Oxygen step by step.

Read More
October 30, 2020
Google Tag Manager Installation on WordPress [Step-by-Step]

If you're looking for a way to install Google Tag Manager using our favorite Advanced Scripts Plugin then don't scratch your head and just follow this tutorial to get it done within a few minutes.

Read More

Leave Your Feedback

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Blog Categories

Top menu-circlecross-circlechevron-down-circle
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram