Easily Create Typeform Like Forms In WordPress
Beautifully Elegant Forms, Easily AccomplishedThe WPForms WordPress Plugin
WPForms is an amazing form builder plugin. Here at MacNative we recommend it and feel that it is the best form builder available for wordpress. There are lots of other options out there, but WPForms seems to offer the best mixture of features, extendability, and ease of use, really hitting the sweet spot.
What is Typeform?
Typeform is a hosted solution that allows you to make elegant forms which guide your client step by step through to the completion. They can be used to create anything from surveys to apps without needing to write a single line of code.
Typeform’s conversational forms have become quite popular for their unique style and engaging interactions. The platforms ability to walk the user through a form tends to increase form completion and user satisfaction. This new type of form presentation is changing the way users expect to interact with elements on the web. Unfortunately as useful as they are conversational forms don’t fit the requirements for all form types. Typeform users are then left managing and paying for multiple solutions to handle all of the forms on their website.
Fortunately WPForms has you and your self hosted WordPress site covered. WPForms can handle all of your form needs, including gorgeous conversational forms all from one easy to use interface. But don’t just take our word for it, take a look at their demos. You can preview WPForms live Conversational Form Demo, Conversational Form Addon Details or watch the WPForms demo video. Once you have convinced yourself to try WPForms, follow the How-To below to quickly create your own Conversational Form.
How to Create Typeform Like Forms In WordPress
Using WPForms, your Typeform like forms are just a few clicks away. Following these steps will get you up and running with your first Conversational form in short order.
With WPForms installed in wordpress, go to the WPForms Addons page and then
1: Click on the “Install Addon” button for the “Conversational Forms Addon”. After a few seconds you will see the “Status” change to “Active” in Green text. When that appears you are ready to roll. Once the addon is installed you are ready to build your form.
2: Select the “Add New” menu option to start creating your form.
Create Your Form
Now that you have the Conversational Forms Addon activated it is time to get to work building your form. Fortunately the WPForms team has been hard at work making that as easy as possible. They have included several template forms that you can use to jump start your form building. Once you have selected your template you can then customize the form from there.
3: Your form needs a Name, the more descriptive the better, especially if you have lots of forms. A great name will help you keep things straight as you add to or edit your form in the future.
4: Next you can choose one of the templates, or you can just start with the “Blank Form”. In the case of this how-to we selected the “Billing / Order Form”.
Customize Your Form
Now that you have named your form and selected a template you are ready to customize your form.
5: On the left side of the browser window you will see an array of blue boxes. Each of these boxes represents either a specific field type, form element, or set of form fields. By clicking on a blue box you add that element to the end of your form. Or click and drag the box into the position you wish it to appear in the form.
Once an element has been added to the form layout you can modify its settings by clicking on it. Once selected you can edit its properties in the sidebar. Or you can re-order the items by clicking and dragging them to a new position in your layout.
6: After changing the form to meet your requirements click on the “Settings” button on the far left. That change makes this traditional form into a Conversational Form.
Enable Conversational Form Design
The beauty of how WPForms works is that the form you have just designed could at this point be embedded into any page on your site and operate as a standard form. This next step will take that standard form and make it conversational with a couple clicks. That means that ANY form you build in WPForms can be used to create Typeform like forms in wordpress.
7: Clicking on the Blue “Conversational Forms” section reveals the Conversational Forms Settings.
8: Clicking the “Enable Conversational Form Mode” checkbox shows the settings for finalizing the layout and design elements of your conversational form.
Customize Your Conversational Form Look and Feel
You are almost home free, the last step is to make this form look right. Once you get that set you are good to publish your form and start gathering responses.
9: Set your conversational form design preferences
- The First is your Conversational Form Title, it defaults to what you named the form, but if you don’t want that showing up at the start of the form then change it to the title or headline you want to appear when the user first opens your form.
- The Message is displayed right below the title, use this form to welcome the user, give instructions, ask questions, or insert other information you feel is important for the user to understand before filling out the form.
- The Permalink is the url that your form will appear on, get as creative as you would like, but just know that no spaces are allowed in a permalink, replace spaces with dashes, and the permalink cannot be the same as any existing permalinks on your site.
- The Header Logo can be your logo or any image that you want to display above the Title and Message.
- The “Hide WPForms Branding” checkbox will stop any WPForms images or text from being displayed on your form.
- The Color Scheme selections allow you to select an overall color scheme for your form. If you don’t like the default choices you can choose your favorite color from the box with the eyedropper.
- The progress Bar option allows you to select how you want the progress bar at the bottom of the form to be updated.
10: Whew, you made it, now for the moment of truth. By clicking the “Preview Conversational Forms” button, you see the gorgeous form you created in a new window or tab.
Finally, click the “Save” button in the upper right hand corner of the screen to ensure your form and its settings are all saved.
Feel free to take a look at the form I created for this How-To here or in the gallery of images below, also check out the official WPForms Live Conversational Forms Demo to compare with your creation.
Now you know how to easily create Typeform like forms in WordPress.
