Skip to main content

PasswordProImproved in 5.17+

A special field type that allows you to securely collect a password from a submitter but NOT store the value in the Freeform database (typically used for User Registration forms with the Elements integration). Pair this with the Confirm special field type if you wish to have the user enter their password twice. The field.type property value is password (for conditionals).

​Settings

  • Min Length - the minimum number of characters the password should be.
  • Max Length - the maximum number of characters the password should be.
  • Character Variability - the password should contain at least one number, one lowercase letter, one uppercase letter, and one special character.
  • Show Password Toggle - adds a button that lets visitors show or hide their password while entering it. Disabled by default.New in 5.17+

​Behavior & Limitations

  • Collected data is not stored in Freeform anywhere, nor is it included in the Submission object or allFields variable in email notifications.
  • When using with the Users Element integration, the password will be passed off to Craft's Users member account feature.

​Show Password ToggleNew in 5.17+

Enable Show Password Toggle in a Password field's settings to add an eye button that lets visitors reveal or hide their password. Disabled by default.

​Styling & Customization

​Customize the Appearance

Set the icon color using this CSS property:

.freeform-form {
  --ff-password-toggle-color: #6b7280;
}

Use .freeform-password-toggle to target the button and its SVG icon:

/* Adjust the icon size without shrinking the button. */
form button.freeform-password-toggle svg {
  width: 1.125rem;
  height: 1.125rem;
}

/* Change the color while the password is visible. */
form button.freeform-password-toggle[data-password-visible="true"] {
  color: #4f46e5 !important;
}

The icon inherits the button's color. Some default button styles use !important, so corresponding overrides may also require it.

​Customize the Labels

The Show password and Hide password labels are translatable and used for the button's tooltip and accessible name. Manually rendered inputs can supply custom labels through these attributes:

<input
  type="password"
  name="password"
  data-freeform-password-toggle
  data-password-show-label="Reveal password"
  data-password-hide-label="Conceal password"
>

​Templating

PropertyDescription
field.browserAutofillThe configured HTML autocomplete value, such as current-password or new-password. An empty string uses the browser default.
field.showPasswordToggleWhether Show Password Toggle is enabled.
field.passwordToggleLabelsTranslated toggle labels: show for revealing the password and hide for concealing it.

Use field.render() or field.renderInput() to generate the attributes needed for browser autofill and the password visibility toggle automatically.

​Resources

Page Feedback