Skip to main content

Adding and Customizing the Password Field in Divi Form Builder

The Password Field in the Divi Form Builder module is essential for login and registration forms where password fields are needed. Follow these steps to add and customize the Password Field in your form.

Video​

Step 1: Add Form Field​

  1. Navigate to the page with your form and open the Form Builder module.
  2. Click on the Add New Field button to start adding a new form field.

Add Form Field

Step 2: Select Password Field​

  1. Enter a descriptive Field Title for the field that users will see.
  2. Enter a Admin Title for administrative purposes to help identify the field.
  3. Assign a unique Field ID to the field for data handling.
  4. Select Password Field from the Type dropdown menu.

Password Field

Step 3: Customize Password Field​

You can customize various features of your password field to control how it functions and what elements are displayed.

Customize Password Field

Password Field Options​

  1. Minimum Length: Set the minimum number of characters required for the password.
  2. Maximum Length: Set the maximum number of characters allowed for the password.
  3. Required: Make the field mandatory for users to fill out.
  4. Autocomplete: Enable or disable the autocomplete/password fill functionality.

Password Show/Hide Icon​

The Password Field enhances the standard password field by adding an icon that allows users to toggle between showing and hiding their password.

  1. Scroll down to the Layout Options section.
  2. Enable the Icon on the Input setting.
  3. Customize the two available icons: The first Icon for showing the password and Password Secondary Icon for hiding it.

Enable Select2 Form Settings

Use these settings to display a “Forgot Password” link below the password field, giving users a quick way to reset their password if they can’t remember it.

  1. Scroll down to the Layout Options section.
  2. Enable the feature by setting Enable Forgot Password Link? to Yes.
  3. Enter your preferred link text in Forgot Password Text.

note

You will find settings to style the appearence in the Design Tab for this field.

Remember Me​

Use these options to add a “Remember Me” checkbox that keeps users logged in on subsequent visits until they choose to log out.

  1. Scroll down to the Layout Options section.
  2. Toggle Enable Remember Me Checkbox? to Yes.
  3. Customize the label by entering text in Remember Me Text.
  4. (Optional) Enable Make Remember Me Checked by Default? to have the checkbox pre-selected when the form loads.

note

You will find settings to style the appearence in the Design Tab for this field.

Additional Tips​

By following these steps, you can effectively add and customize the Password Field in Divi Form Builder, ensuring it meets the needs of your form and provides a seamless user experience. Utilize the various customization options to make your forms both functional and visually appealing.