How to Add Email Fields to WordPress Forms
Email is the most important field on most WordPress forms. Contact forms, newsletter signups, event registrations, and support requests all depend on collecting a valid address you can reply to or add to a list. You need more than a plain text box — you need format validation, typo prevention, and optional rules like company-domain-only addresses.
Auto Form Builder includes a dedicated Email field in the Basic category of the drag-and-drop form builder. It uses the HTML5 email input type, validates addresses on the server with WordPress’s built-in email check, and offers optional confirmation and domain allowlist features — all without writing code.
Last updated: Last update 7 July
What Is the Email Field in Auto Form Builder?
The Email field is a specialized single-line input for email addresses. It appears under the Basic field category alongside Text Input, Text Area, Phone, Number, Date, and Time.
Use the dedicated Email field when you need:
- A contact or reply-to address on a contact form
- Newsletter or mailing-list signup addresses
- An email to send user confirmation messages to after submission
- Company-only addresses restricted to approved domains
- A second “confirm email” field to reduce typos before submission
You can also add email format validation to a Text Input field via the Validation dropdown, but the dedicated Email field is the better choice for collection — it includes email-specific options like confirmation and domain allowlists, renders with type="email" and autocomplete="email", and integrates directly with form email settings.
How to Add an Email Field to Your Form
Step 1: Open the Form Builder
In your WordPress admin, go to Auto Form Builder → All Forms, then open an existing form or click Create New Form.
Step 2: Drag the Email Field
From the field palette on the left, find Email under the Basic category. Drag it onto the form canvas. Click the field to open its settings panel on the right.
Step 3: Configure the Label and Placeholder
Set a clear Field Label (e.g., Email Address or Work Email). Add Placeholder Text such as [email protected] to guide visitors before they type.
Step 4: Set Width and Required Status
Choose Field Width — Full Width, Half Width, One Third, or Two Thirds — to control layout. Enable Required Field so the form cannot be submitted without a valid email address.
Step 5: Configure Email Field Options
Scroll to Email Field Options to set a default value, enable email confirmation, or restrict allowed domains (detailed below).
Step 6: Save, Preview, and Publish
Click Save Form, preview on desktop, tablet, and mobile, then copy the shortcode or embed code from the Forms screen and place the form on any page or external site.
Email Field Settings Explained
Auto Form Builder splits settings into base options (shared by all fields) and email-specific options.
Base Field Settings
- Field Label — displayed above the input
- Field Name — used in submission data and webhooks
- Field Width — full, half, one third, or two thirds
- Required Field — blocks submission when empty
- Placeholder Text — hint text inside the empty field
- Help Text — additional guidance below the field
- CSS Class — optional custom class for styling hooks
- Conditional Logic — show or hide the field based on other answers
Default Value
Pre-fill the email field when the form loads — useful when a logged-in user’s address is known, or when repopulating a form after a validation error elsewhere on the page.
Add Confirmation Field
Enable Add Confirmation Field to display a second input labeled Confirm Email below the main field. Visitors must enter the same address twice. Mismatch errors appear on blur and block submission on the frontend, reducing typos that would otherwise send replies to the wrong inbox.
Restrict Allowed Email Domains
Enable Restrict Allowed Email Domains to accept addresses only from domains you list — for example, limiting a staff intake form to yourcompany.com.
Enter each allowed domain on a new line in the Allowed Email Domains textarea, without the @ symbol (e.g., gmail.com, outlook.com, yourcompany.com). This is an allowlist: only listed domains pass validation.
Domain checks run in the browser on blur and again before submit. Pair this with required-field validation so empty submissions are also blocked.
Hidden Field
Enable Hidden Field under email settings to pass an email value with the submission without showing the input to visitors. Set the Hidden Value in the field settings.
How Email Validation Works
Email fields are validated at multiple levels:
- HTML5 email input — the browser’s native
type="email"provides basic format hints and mobile keyboard layout - JavaScript validation — confirmation matching and domain allowlist checks run on blur and on form submit, with inline error messages and scroll-to-error behavior
- Server-side validation — every submitted email address is validated with WordPress’s
is_email()function before the submission is stored, so format rules cannot be bypassed
Confirmation matching and domain allowlists are enforced on the frontend before submit. The server always validates that the primary email field contains a properly formatted address.
Connect Email Fields to Form Notifications
After you add an email field, connect it to your form’s email settings:
- Admin notification email — receive an email when someone submits the form
- User confirmation email — send an automatic reply to the submitter; select which email field on the form should receive the message
- Conditional email rules — send different confirmation messages based on form answers
Form settings automatically detect Email field types on your form so you can pick the correct field as the confirmation recipient without hard-coding addresses.
Practical Email Field Examples
Standard Contact Form Email
- Label: Email Address
- Placeholder: [email protected]
- Required: Yes
- Confirmation field: Off
Newsletter Signup with Typo Protection
- Label: Your Email
- Required: Yes
- Add Confirmation Field: Enabled
- User confirmation email: Enabled in form settings, linked to this field
Employee-Only Intake Form
- Label: Work Email
- Restrict Allowed Email Domains: Enabled
- Allowed domains: yourcompany.com
- Required: Yes
Event Registration
- Label: Email for Confirmation
- Help text: We’ll send your ticket to this address
- Add Confirmation Field: Enabled
- Required: Yes
Email Field vs. Text Input with Email Validation
- Email field — dedicated type with confirmation field, domain allowlist,
autocomplete="email", and direct integration with confirmation email settings - Text Input with Validation → Email — applies an email format pattern to a generic text field; lacks email-specific confirmation and domain options
For any form whose main purpose is collecting an address you will reply to or mail, use the dedicated Email field.
Combine Email Fields with Conditional Logic
Every email field supports conditional logic. Show a Business Email field only when an account-type dropdown is set to Company, or reveal a secondary email field when a checkbox for “send copies elsewhere” is checked. Rules evaluate in real time as visitors change their answers.
Email Fields on Embedded Forms
Forms embedded on non-WordPress sites use the same email field behavior — HTML5 validation, confirmation matching, domain allowlists, and server-side format checks. Whether placed via shortcode or embed code, email fields work identically everywhere.
Download Auto Form Builder — Free Email Fields
Email fields with confirmation, domain allowlists, server-side validation, and notification integration are included in the free plugin — the same plugin that gives you submission management, form styling, spam protection, and webhooks at no cost.
Install it from the official WordPress.org directory: https://wordpress.org/plugins/auto-form-builder/
Last updated: Last update 7 July
Build forms that embed anywhere — free
Auto Form Builder lets you create multi-step forms, calculators, and lead capture forms in WordPress, then embed them on any site with a single line of code.
Install the free pluginFrequently Asked Questions
How do I add an email field to a WordPress form?
Open your form in Auto Form Builder, drag the Email field from the Basic category onto the canvas, configure the label and options, and save. Publish with the shortcode or embed code.
Does Auto Form Builder validate email addresses?
Yes. Email fields use HTML5 email input validation in the browser and WordPress is_email() validation on the server for every submission.
Can I add a confirm email field to prevent typos?
Yes. Enable Add Confirmation Field under Email Field Options. A second Confirm Email input appears and must match the primary address before the form submits.
Can I restrict emails to specific domains only?
Yes. Enable Restrict Allowed Email Domains and list each allowed domain on a new line (e.g., company.com). Only addresses from those domains are accepted.
What is the difference between the Email field and Text Input with email validation?
The dedicated Email field includes confirmation and domain allowlist options, autocomplete support, and integrates with confirmation email settings. Text Input with email validation only checks format via a pattern rule.
Can I send a confirmation email to the address someone enters?
Yes. Enable user confirmation email in form settings and select the Email field on your form as the recipient. Auto Form Builder detects email fields automatically.
Can I pre-fill the email field with a default value?
Yes. Set a Default Value under Email Field Options to pre-populate the field when the form loads.
Are email fields free in Auto Form Builder?
Yes. Email fields with confirmation, domain allowlists, and validation are included in the free Auto Form Builder plugin on WordPress.org.
