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…

DemosFormidableTutorials
25 Jun 2018

Formidable Forms – CSS Isolation Demo

This demo was created using Formidable Forms and CSS only hover styles to create an isolation style hover effect. This…
Website developmentDemosFormidable
25 Jun 2018

Formidable Forms – Text Input Styles 1

Form Style Options: Set 1 - This is the first set of advanced form styling options for text input fields…
Import Values From Database TablesFormidableTutorials
26 Mar 2019

Import Values From Database Tables

Import Values From Database Tables: Formidable Forms Have you ever needed to Import Values From Database Tables within your Wordpress…