Add Single-Line Text

Overview

A single-line text field is useful for collecting user-entered text for short 2-5 word answers (ie. company name, age, zip code, etc).

How To Use

To add single-line text to forms you must do the following:

• Add a form item container
• Add a label for each text field
• Add your input form control associated to the label
• Add a name and appropriate type to the input form control

Types attributes include:

• type="email" (for email addresses)
• type="password" (for passwords)
• type="tel" (for phone numbers)
• type="text" (for text)

Markup

Within a div element with the class of form-item, add a label element with what you want shown as the label for your single-line text field. Add a input element with the class of form-control, the name for your single-line text field in between of [], and the type of input element you would like.

<div class="form-item">
  <label>Your Custom Text Field</label>
  <input class="form-control" name="contact[your-custom-text-field]" type="email" />
</div>