EmailField Examples - Form Widgets

1. Basic EmailField

Standard email input with icon and validation. Type an invalid email and tab out to see the error.

Email Address

JavaScript

FormWidgets.init('#em1', 'EmailField');

2. Required Email

Required field â€” validation error shown when left empty.

Email Address (Required)

JavaScript

FormWidgets.init('#em2', 'EmailField', {
    required: true
});

3. Auto-init via Class

Using the fw-email class for automatic initialization â€” no JavaScript required beyond autoInit().

Auto-initialized Email

HTML

<input type="text" class="fw-email">

<script>
  FormWidgets.autoInit();
</script>

4. Multiple Email Fields

Multiple email fields, each independently validated.

Primary Email

Backup Email

JavaScript

FormWidgets.init('#em4a', 'EmailField', { required: true });
FormWidgets.init('#em4b', 'EmailField');

5. In a Contact Form

EmailField combined with other widgets in a realistic form layout.

Full Name

Email Address

Phone Number

JavaScript

FormWidgets.init('#em5email', 'EmailField', { required: true });
FormWidgets.init('#em5phone', 'PhoneField', {
    pattern: '+44 ## #### ####',
    showPattern: true
});