Email

Description

The email field type creates a single-line input field in the admin panel, specifically designed for entering email addresses. It is rendered as an HTML <input type="email"> element styled with Bootstrap’s form-control class. This field ensures that entered values conform to a valid email format and is ideal for capturing contact email addresses.

Available Options

Parameter Type Description Required Default
name String The name of the field, used as the identifier and default label if label is not provided. Yes –
type String The field type. Must be set to email. Yes –
label String The display label for the email field. If not provided, the name is used. No name
description String Display a description below the label. No ā€“
placeholder String A hint displayed in the field when it is empty, guiding the user on expected input. No name
default String/Boolean The default value of the email field. If set to false, the field will be empty by default. Should be a valid email if provided. No false
class String Additional CSS classes to apply to the email input for custom styling or JavaScript targeting. No –
help String A help message displayed in a sidebar or tooltip when the user clicks the info icon next to the field. No –
required Boolean If true, the field is marked as required, adding the HTML required attribute. No false


Note: The email field is stored in the settings array as a sanitized string. The value is sanitized using WordPress’s sanitize_email function, which ensures the input is a valid email address or returns an empty string if invalid.

Example

Below is an example of how to define an email field in the $fields array for the Reusable Admin Panel settings class.

$this->fields = array(
    'general' => array(
        array(
            'name'        => __('Email', 'your-plugin-slug'),
            'type'        => 'email',
            'label'       => __('Your Email', 'your-plugin-slug'),
            'description' => __('Enter your email address.', 'your-plugin-slug'),
            'default'     => '[email protected]',
            'class'       => 'email-input',
            'help'        => __('Enter your email address.', 'your-plugin-slug'),
            'required'    => true
        )
    )
);

This configuration will create an email field labeled “Your Email” under the “general” section. It will have a default value of [email protected], include the CSS class email-input, display a help message, and be marked as required.

Usage Notes

  • The email field uses WordPress’s sanitize_email for sanitization, ensuring the input is a valid email address. Invalid entries are sanitized to an empty string.
  • The field’s ID is automatically generated as {section}-{name}, where name is sanitized using sanitize_title.
  • The field is styled using Bootstrap’s form-control class. Custom styles can be applied via the class parameter.
  • The required attribute triggers browser validation for a valid email format, but server-side validation should also be implemented if critical.
  • The type="email" attribute enables browser-specific email input features, such as email-friendly keyboards on mobile devices.
  • To retrieve the value of an email field, use the get_option method, e.g., $this->get_option('general', 'email').