Skip to main content
Version: Divi 5

Input Field

Purpose​

The Input field type renders a single-line text input. By choosing Field Type input, email, url, or password, you get plain text, email validation, URL validation, or a password input (with optional show/hide icon).

When to use​

  • input — Names, short text, custom patterns (letters/numbers/alphanumeric), min/max length.
  • email — Email addresses; uses email validation and optional email message.
  • url — URLs; uses URL validation and form-level or field-level URL message.
  • password — Passwords; optional Remember me and Forgot password (e.g. login forms).

Key settings​

  • Field — Field Type (input | email | url | password), Field Title, Add Field Prefix.
  • Validation — Required, min/max length, allowed symbols or custom pattern, email/URL/pattern messages.
  • Layout — Label position, placeholder, description.
  • Icon — Use icon, font icon, color, size; for password, show/hide icon.
  • Password (when type is password) — Forgot password link, Remember me, default checked.

Top features to configure​

  • Field type switching — Pick email or url when you want built-in format validation.
  • Custom patterns — Restrict input to letters, numbers, or custom formats when data quality matters.
  • Min/max length — Prevent overly short or long values.
  • Password extras — Enable show/hide icon and optional remember/forgot links for login-style forms.
  • Add field prefix — Add a visible prefix when a value needs context (e.g. +, @, or fixed code).

Validation behavior​

  • Required blocks submission when the field is empty.
  • email type checks for a valid email format.
  • url type checks for a valid URL format.
  • Pattern and length settings are applied before submission and should match your expected input format.

Common mistakes​

  • Applying strict pattern rules without updating the user-facing error message.
  • Using input when you actually need built-in email or URL validation.
  • Enabling password options in non-password use cases.

Verify it works​

  1. Submit one valid entry and confirm the value appears in Entries and notifications.
  2. Submit invalid values (empty required field, invalid email/URL, pattern mismatch).
  3. Confirm the expected validation message appears for each failed case.

What's Next​

  • Configure Textarea and Number field for other typed input use cases.
  • Learn about Field settings for labels, validation, and behavior options.
  • Use FAQ if field validation does not behave as expected.