Field Types Reference

The React visual builder’s Intelligent Inserter provides ready-configured field presets grouped under Common, Contact Details, Choices, Advanced and Layout. Several presets use the same HTML control type: Name and Full Name, for example, each produce a single text input.

Find and Insert a Field

Open Intelligent Inserter with the + button and search for what you want to collect. Search covers labels, aliases and descriptions, with exact matches first. The same search is available inside a container.

• Website / URL: website, web address, site, link or URL.
• Phone: telephone, mobile, cell or contact number.
• Full Name: fullname, contact name or your name.
• First Name / Last Name: given name, forename, surname or family name.
• Company: business name, organization or organisation.
• Postal Code: zip, postcode, pin code or pincode.
• Message: comments, feedback or long answer.
• File Upload: attachment, document or upload.

Search accepts case differences, extra spaces, hyphens and accented Latin letters. English aliases remain available in translated interfaces. With no matches, clear the search or try another term; the builder never inserts an inferred field automatically.

Search receives focus when the inserter opens. Arrow Down moves into the results; Arrow Up returns from the first result to Search. Enter inserts the first result from Search or activates the focused field button. Escape closes the inserter and returns focus to its trigger. Tab also works through the native controls.

Contact Presets

Each choice supplies its label, meaningful field name and applicable autofill attributes. Fields go into the active step or selected container. Repeated insertion generates unique names across the entire form, such as full_name and full_name_2.

Preset	HTML control	Initial field name	Autofill
Name	text	name	name
Full Name	text	full_name	name
First Name	text	first_name	given-name
Last Name	text	last_name	family-name
Phone	tel	phone	tel
Email	email	email	email
Website / URL	url	website	url
Company	text	company	organization
Job Title	text	job_title	organization-title
Subject	text	subject	None
Message	textarea	message	None
Street Address	text	address_line_1	address-line1
Address Line 2	text	address_line_2	address-line2
City	text	city	address-level2
State / Province	text	state	address-level1
Postal Code	text	postal_code	postal-code
Country	text	country	country-name

New contact presets are optional; Email retains its existing required-by-default behavior. All labels and settings remain editable. Placeholders are hints, not submitted default answers. Phone uses a text-based telephone input, without a country-specific mask. Postal Code stays a text input so letters and leading zeros survive.

Preset labels do not create new server-side field types. Saved field names, labels and attributes survive Code/Visual changes and both save controls. Existing fields are not renamed. Duplicating a field preserves its meaningful name base and edited settings while allocating a new name.

These presets belong to the React visual builder. The older editor identified by its Done button retains its existing controls; the reference below also describes the underlying HTML field types.

Basic Fields

Text

A single-line text input for general text entry.

• Key properties: label, name, placeholder, default value, required, minlength, maxlength, pattern
• HTML output:

<p>
    <label>Full Name</label>
    <input type="text" name="full-name" placeholder="John Doe" required />
</p>

Email

A single-line input with built-in email format validation.

• Key properties: label, name, placeholder, required
• Browser validation: Rejects values that do not match the email format (contains @ and a domain).
• HTML output:

<p>
    <label>Email Address</label>
    <input type="email" name="email-address" required />
</p>

Textarea

A multi-line text input for longer content like messages or comments.

• Key properties: label, name, placeholder, required, rows (default: 5), minlength, maxlength
• HTML output:

<p>
    <label>Your Message</label>
    <textarea name="your-message" rows="5" required></textarea>
</p>

Number

A numeric input with optional min/max range and step control.

• Key properties: label, name, placeholder, required, min, max, step
• HTML output:

<p>
    <label>Quantity</label>
    <input type="number" name="quantity" min="1" max="100" step="1" />
</p>

Phone

A telephone number input. Does not enforce a specific format by default but accepts a pattern attribute for custom validation.

• Key properties: label, name, placeholder, required, pattern
• HTML output:

<p>
    <label>Phone Number</label>
    <input type="tel" name="phone-number" placeholder="+1 (555) 000-0000" />
</p>

URL

A single-line input that validates URL format.

• Key properties: label, name, placeholder, required
• HTML output:

<p>
    <label>Website</label>
    <input type="url" name="website" placeholder="https://example.com" />
</p>

Choice Fields

Dropdown (Select)

A dropdown menu allowing single or multiple selection from a list of options.

• Key properties: label, name, required, options (label/value pairs), default selected, allow multiple
• HTML output (single):

<p>
    <label>Department</label>
    <select name="department" required>
        <option value="">-- Select --</option>
        <option value="sales">Sales</option>
        <option value="support">Support</option>
        <option value="billing">Billing</option>
    </select>
</p>

• HTML output (multiple):

<p>
    <label>Interests</label>
    <select name="interests[]" multiple>
        <option value="design">Design</option>
        <option value="development">Development</option>
        <option value="marketing">Marketing</option>
    </select>
</p>

Radio

A set of radio buttons for selecting exactly one option from a group.

• Key properties: label, name, required, options (label/value pairs), default selected
• HTML output:

<p>
    <label>Preferred Contact Method</label>
    <label><input type="radio" name="contact-method" value="email" checked /> Email</label>
    <label><input type="radio" name="contact-method" value="phone" /> Phone</label>
    <label><input type="radio" name="contact-method" value="mail" /> Mail</label>
</p>

Checkbox

One or more checkboxes. A single checkbox is used for boolean toggles; multiple checkboxes allow multi-select.

• Key properties: label, name, required, options (label/value pairs), default checked
• HTML output (single):

<p>
    <label><input type="checkbox" name="agree-terms" value="1" required /> I agree to the terms</label>
</p>

• HTML output (multiple):

<p>
    <label>Services Needed</label>
    <label><input type="checkbox" name="services[]" value="design" /> Design</label>
    <label><input type="checkbox" name="services[]" value="development" /> Development</label>
    <label><input type="checkbox" name="services[]" value="consulting" /> Consulting</label>
</p>

Advanced Fields

Date

A date picker input using the browser's native date UI.

• Key properties: label, name, required, min (earliest date), max (latest date)
• HTML output:

<p>
    <label>Event Date</label>
    <input type="date" name="event-date" min="2026-01-01" max="2026-12-31" />
</p>

Time

A time picker input using the browser's native time UI.

• Key properties: label, name, required, min, max, step (in seconds)
• HTML output:

<p>
    <label>Preferred Time</label>
    <input type="time" name="preferred-time" />
</p>

File Upload

A file input for uploading attachments. Requires the File Upload extension.

• Key properties: label, name, required, accept (file types), multiple, max file size
• HTML output:

<p>
    <label>Attachments</label>
    <input type="file" name="attachments[]" accept=".pdf,.doc,.docx" multiple />
</p>

Hidden

An invisible field for passing data that the user should not see or edit. Useful for tracking parameters, referral sources, or form identifiers.

• Key properties: name, value (supports template variables like {{post.ID}} or {{url_params.ref}})
• HTML output:

<input type="hidden" name="source" value="{{url_params.ref}}" />

Password

A masked text input for sensitive data. The value is not visible as the user types.

• Key properties: label, name, required, minlength, maxlength, pattern
• HTML output:

<p>
    <label>Password</label>
    <input type="password" name="password" minlength="8" required />
</p>

Composite Fields

Composite fields combine multiple inputs into a single logical field.

Name

A name field that renders first name and last name inputs side by side.

• Key properties: label, required, format (first/last or first/middle/last)
• HTML output:

<p>
    <label>Your Name</label>
    <span class="cf-name-field">
        <input type="text" name="name-first" placeholder="First" required />
        <input type="text" name="name-last" placeholder="Last" required />
    </span>
</p>

Address

A multi-input address block with street, city, state/province, postal code, and country fields.

• Key properties: label, required, show country (toggle), default country
• HTML output:

<fieldset>
    <legend>Address</legend>
    <p><input type="text" name="address-street" placeholder="Street Address" /></p>
    <p><input type="text" name="address-city" placeholder="City" /></p>
    <p>
        <input type="text" name="address-state" placeholder="State / Province" />
        <input type="text" name="address-zip" placeholder="Postal Code" />
    </p>
    <p>
        <select name="address-country">
            <option value="US">United States</option>
            <option value="CA">Canada</option>
            <!-- additional countries -->
        </select>
    </p>
</fieldset>

Consent

A checkbox with a configurable consent message, typically used for GDPR compliance or terms acceptance.

• Key properties: label (the consent text), name, required
• HTML output:

<p>
    <label>
        <input type="checkbox" name="consent" value="1" required />
        I consent to having this website store my submitted information.
    </label>
</p>

Rating

A star-rating input rendered as a group of radio buttons styled as stars.

• Key properties: label, name, required, max rating (default: 5)
• HTML output:

<p>
    <label>Rating</label>
    <span class="cf-rating-field" data-max="5">
        <input type="radio" name="rating" value="1" /><label>1</label>
        <input type="radio" name="rating" value="2" /><label>2</label>
        <input type="radio" name="rating" value="3" /><label>3</label>
        <input type="radio" name="rating" value="4" /><label>4</label>
        <input type="radio" name="rating" value="5" /><label>5</label>
    </span>
</p>

Structure Fields

Structure fields do not collect data. They organize other fields into groups.

Fieldset

Groups related fields under a labeled section. Renders as an HTML <fieldset> with a <legend>.

• Key properties: legend text, CSS class
• Nesting: Fields can be added inside the fieldset via the inserter or drag-and-drop.
• HTML output:

<fieldset>
    <legend>Personal Information</legend>
    <p>
        <label>First Name</label>
        <input type="text" name="first-name" required />
    </p>
    <p>
        <label>Last Name</label>
        <input type="text" name="last-name" required />
    </p>
</fieldset>

See Containers for details on adding and managing fields inside fieldsets.

Container

A generic <div> wrapper for grouping fields without the semantic meaning of a fieldset. Useful for applying CSS classes to a group of fields or creating multi-column layouts.

• Key properties: CSS class
• Nesting: Containers can be nested inside other containers.
• HTML output:

<div class="two-columns">
    <p>
        <label>City</label>
        <input type="text" name="city" />
    </p>
    <p>
        <label>State</label>
        <input type="text" name="state" />
    </p>
</div>

See Containers for details on nesting and drag-and-drop behavior.

Layout Fields

Layout fields add non-interactive elements to the form for visual structure and content.

Heading

A heading element for section titles within the form. Supports levels H2 through H5.

• Key properties: text content, heading level (h2, h3, h4, h5)
• HTML output:

<h3>Contact Information</h3>

Paragraph

A paragraph of descriptive text within the form. Useful for instructions or explanations between fields.

• Key properties: text content
• HTML output:

<p class="cf-description">Please fill in all required fields before submitting.</p>

Divider

A horizontal rule for visually separating sections of the form.

• Key properties: CSS class (optional)
• HTML output:

<hr />

Submit Button

The form submission button. Every form needs at least one.

• Key properties: button text (default: "Submit"), CSS class
• HTML output:

<p>
    <input type="submit" value="Send Message" />
</p>