Natural Language Forms: Formidable Forms

Natural language Forms: Formidable Forms

Create natural language forms using Formidable Forms. This article explains how to create natural language forms and provides a more in-depth look at how to create them with examples and CSS. You can find the original article from Formidable Forms HERE.

Natural Language Forms

Natural language forms are forms that have a mixture of form fields and static text laid out in sentences to more closely resemble a paragraph of text but with customisable options. Natural language forms can work really well for quick Call To Action forms that require minimal input from the end user in order to gain a fast response.

To create a natural language form using Formidable Forms follow these steps.

1. Add a section field to your form for each sentence or block of text. Set the label position to none.
2. Alternate HTML fields with other field types inside the section. The HTML fields will contain the static text.
3. Set the label position on each input field to either placeholder or hidden.
4. Once you have your form fields added save the form.
5. Go to the Settings > Customize HTML and add ‘frm_madlib‘ into the Form Classes box.
6. Go to the Formidable > Styles > Custom CSS and add the below CSS.
7. Create a new style to only show the bottom border on each input field. Formidable provide a tutorial on how do this HERE.
8. You’re all done. Your form should look like the form in the screenshot above.

The CSS:

.frm_form_field {
    font-size: 20px !important;
    line-height: 40px;
}

select {
    box-shadow: none !important;
    border-bottom: 2px dashed #eaeaea !important;
    border-radius: 0 !important;
    font-size: 20px !important;
    line-height: 40px !important;
    background-color: transparent;
}

.frm_madlib .frm_section_heading {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-end;
}

.frm_madlib .frm_section_heading div {
    margin: 5px;
}

.frm_madlib .frm_section_heading div.no-right-margin {
    margin-right: 0px;
}

.frm12 {
    margin: 0 !important;
}

More layout customisation

Users familiar with HTML can further customise the form layout by using the Customize HTML tab on the form settings page.

Summary

Hopefully this will help anyone who is thinking of using Formidable Pro to create Natural Language Forms.

If you liked this tutorial, visit our blog for more ways to improve your Formidable Forms, websites and workflow.

Enjoy.