Skip to main content

Building a Login Form with Divi Form Builder

Creating a login form with Divi Form Builder allows users to access their WordPress accounts using both default WordPress fields and Advanced Custom Fields (ACF). Follow these steps to set up a functional and customized login form on your Divi WordPress site.

Video​

Step 1: Add The Form Module​

  1. Navigate to the page where you want to add the registration form.
  2. Click on the '+' icon to add a new module, then select the Form Module from the list of options.

Add Form Module

Step 2: Define Form Settings​

  1. Add a descriptive Form Title for your registration form.
  2. Assign a unique Form ID to the form to ensure it is easily identifiable.
  3. Select Login Form from the Form Type options.
  4. Customize the text of the Submit button (e.g., "Login").

Form Settings

Step 3: Consider Your Fields​

After configuring the main settings, you need to add and customize the form fields relevant to a login form. There are two primary sources for these fields:

  1. Default WordPress User Fields:
    1. These include fields like password, email, login name, etc. For a login form, you must include at least the Login Name and Password Fields.
  2. ACF Fields:
    1. These fields can be added using the ACF plugin to enhance user profiles with additional metadata.
note

To see specific options for the password field such as show/hide icon, remember me, etc, please see the documentation.

Step 4: Add Form Fields​

  1. Click on the Add New Field button to start adding fields to your form.
  2. Configure Each Field:
    1. Add a descriptive Field Title and Admin Title for your contact form.
    2. Ensure each form field has a unique Field ID for proper data handling.
    3. Choose from various Field Types such as Email, Number, Date, Input, etc.

For more detailed information on our Field Types, click HERE.

Add Form Fields

Step 5: Map Your Fields​

You need to map the form fields to either default WordPress fields or ACF fields. Your login form can include both types of fields.

  1. Map Default WordPress Fields:
    1. Select User Field (Register/Login Form Only) from the dropdown.
    2. Choose from the available default WordPress User fields.
note

Ensure you include at least the Login Name and Password fields.

Map Default Fields

  1. Map ACF Fields:
    1. Select User Meta Field (Register/Login Form Only) from the dropdown.
    2. Enter the name of your user meta field in the input field.

For more detailed information on field mapping, click HERE.

Step 6: Customize Login Form​

Divi Form Builder offers extensive customization options for both the entire form and individual form fields.

A Few Features​

For more detailed information on our features, click HERE.

  1. Form-Wide Customization Options:
    1. Customize the appearance of the entire form, including colors, fonts, and borders.
    2. Set up redirection rules to take users to a specific page after form submission.
  2. Field-Specific Customization Options:
    1. Customize the appearance of individual fields, including font size, color, and background.
    2. Apply conditional logic to show or hide fields based on user input, enhancing the form's interactivity and relevance.
note

Some features are not available for the "Login" type of form.

Additional Tips​

By following these steps, you can create a functional and visually appealing login form using Divi Form Builder. This form will allow users to access their WordPress accounts with ease, utilizing both default WordPress fields and custom ACF fields for a richer user experience.