Creating Forms

Creating a New Form

1. Go to Core Forms in the WordPress admin.
2. Click Add New.
3. Give your form a title (this also generates the slug used in shortcodes).
4. Write your form HTML in the Fields tab.
5. Click Save Changes.

Writing Form HTML

Forms use standard HTML. You write the fields, labels, and submit button. Core Forms wraps your markup in a <form> element and handles submission via AJAX.

Here is a basic contact form:

<p>
    <label for="name">Name</label>
    <input type="text" name="name" id="name" placeholder="Your name" />
</p>

<p>
    <label for="email">Email</label>
    <input type="email" name="email" id="email" placeholder="your@email.com" />
</p>

<p>
    <label for="message">Message</label>
    <textarea name="message" id="message" rows="5" placeholder="Your message"></textarea>
</p>

<p>
    <button type="submit">Send</button>
</p>

You have full control over the HTML structure. Use any elements, classes, or attributes you need.

Available Field Types

The form builder sidebar provides quick-insert buttons for common field types:

• Text – Single-line text input
• Email – Email input with validation
• Textarea – Multi-line text area
• Telephone – Phone number input
• Number – Numeric input
• Date – Date picker
• Checkbox – Single checkbox
• Select – Dropdown menu
• Radio – Radio button group
• Checkboxes – Checkbox group
• Hidden – Hidden input (for passing metadata)
• Submit – Submit button

You can also register custom field types using the cf_available_field_types filter.

Field Naming

The name attribute on your form fields determines the key used in submission data. A few rules:

• Field names starting with an underscore (_) are ignored during processing. Core Forms uses underscore-prefixed names for internal fields like _cf_form_id and the honeypot field.
• Array-style names like options[] are supported and will be stored as arrays.
• Spaces in field names are converted to underscores when processing.

The Honeypot Field

Every form automatically includes a hidden honeypot field. This invisible field catches bots that fill in every field on the page. If the honeypot is filled, the submission is silently ignored.

The honeypot is injected automatically. You do not need to add it to your markup.

Nonce Validation

By default, nonce validation is disabled to allow forms to work with page caching. You can enable it in Core Forms > Settings by checking Enable nonce verification.

When enabled, a WordPress nonce field is added to every form. Submissions with an invalid or expired nonce will be rejected with a session expired error.

Form Preview

Each form has a Preview button in the admin that opens a standalone preview page. This lets you see how the form renders without embedding it in a page first. Only logged-in users with the edit_forms capability can access previews.

Custom CSS and JavaScript

Each form has optional Custom CSS and Custom JS fields in the Settings tab.

Custom CSS is scoped to the form using the .cf-form-{ID} selector:

font-size: 16px;
max-width: 500px;

Custom JS runs inside a closure with access to the form DOM element:

// "form" variable is available and refers to the form element
form.addEventListener('submit', function() {
    console.log('Form submitted');
});