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.

Demo - Natural Language Form

Version 1: Restaurant Finder

Version 1

Hello. My name is
and i'm looking for
food in a
restaurant, sometime around
and close to

Version 2: Support Request

Version 2

Dear
I am having some issues with
and i need some assistance.
Please
on
between the hours of
and
.
Thank you.

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.

Let's Get Started

If you’re ready to get started with your next project click on the button below to try the Project Planner

TRY THE PROJECT PLANNER

You may also like…

Tabbed SliderDemosFormidableTutorials
26 Jun 2018

Tabbed Slider: Formidable Forms

This demo was created using Formidable Forms and uses a JS powered tab / button slider instead of the standard…
Share a form entryFormidableTutorials
26 Mar 2019

Share a form entry between users

Share a form entry between multiple users: Formidable Forms There may come a point where multiple users may need to…
Invoicing SystemFormidableTutorials
26 Mar 2019

Create an Invoicing system: Formidable Forms

Create an Invoicing system: Formidable Forms In this guide you'll learn how to use Formidable Forms Pro to create an…