Core Forms
Get Core Forms

Field Types Reference

Core Forms provides 25+ field types organized into six categories. Each field type generates clean, semantic HTML markup.

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>