Password Field Element

The Password Field Element is a form field whose input is masked while the visitor types. It is added inside a Tirenoa Form (Tirenoa > Forms) and is meant for forms that register users, log them in or let them set a new password.

Besides the masked input, it can show an eye icon that reveals the typed password, display the WordPress password strength meter, check the password against your own rules, and make sure a confirmation field contains exactly the same password. These options help visitors choose a password they can remember.

In this article: How To Use · Element Options · Tips · Related Elements

How To Use The Password Field Element

Add the Password Field Element to your form and enter the Field Label and the Field Name (lowercase letters, numbers, dashes and underscores only). Set Required Field to Yes and add an Empty Input Notice when a password must be entered. Placeholder Text, Tooltip Text and Input Field Icon add hints and an icon.

Set Autocomplete Tokens to New Password on sign-up forms and to Current Password on login forms, so browsers and password managers offer the right help. A Custom Pattern enforces rules such as a minimum length, with an Invalid Input Notice that explains them. For a confirmation field, add a second Password Field and enter the first field’s name in Input Must Match.

Display Reveal Password Icon adds an eye icon that shows or hides the typed text, and Display Password Strength Indicator shows the WordPress strength meter below the field while the visitor types. Both work together with an input field icon.

Element Options

The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.

General

Heading Description
Field Label Enter the label for the input field. This is how users will identify individual fields.
Field Name Enter the field name. Please use only lowercase alphanumeric characters, dashes, and underscores.
Required Field Make a selection to ensure that this field is completed before allowing the user to submit the form.
Empty Input Notice Enter text validation notice that should display if data input is empty.
Placeholder Text The placeholder text to display as hint for the input type.
Tooltip Text The text to display as tooltip hint for the input.
Input Field Icon Select an icon for the input field, click again to deselect.
Autocomplete Tokens Select an autocomplete detail token. Select custom to add your own token combination. For more info and examples, you can check MDN Web Docs.
Autocomplete Custom Tokens Enter your custom autocomplete tokens. For more info and examples, you can check MDN Web Docs.
Custom Pattern Enter allowed input pattern. For more info and pattern examples, you can check w3schools.
Invalid Input Notice Enter validation notice that should display if data input is invalid.
Input Must Match Enter a field name from the same form. If set, the form will only be sent if the field values match.
Display Reveal Password Icon Set to “yes” to display an icon to reveal the entered password.
Display Password Strength Indicator Set to “yes” to display the WordPress password strength indicator when a password is typed.
Tab Index Tab index for the form field.
CSS Class Add a class for the form field.
CSS ID Add an ID for the form field.

Conditionals

Heading Description
Conditional Logic Add conditional logic for the input field.

Tips

  • The field only masks what is typed. In an ordinary form the password is saved in the entries and sent in the notification email like any other value. Use it only in forms whose actions handle the password, such as registration or login.
  • The strength indicator is a hint for the visitor; it does not block weak passwords. Use a Custom Pattern when a rule must be enforced.
  • Turn on Display Reveal Password Icon to help visitors on phones avoid typing mistakes.
  • Invalid Input Notice is only offered once a Custom Pattern is set.