Building a User Registration Form with Divi Form Builder

The Divi Form Builder plugin enables you to create comprehensive registration forms that can utilize both default WordPress fields and Advanced Custom Fields (ACF) assigned to users. This guide will help you set up a user registration form that allows users to create profiles with a wide variety of metadata.

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 Form Module from the list of options.

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 User Registration Form from the Form Type options.
4. Customize the text of the Submit button (e.g., "Register").

Step 3: Consider Your Fields

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

1. Default WordPress User Fields:
   1. Visit the Users section of your WordPress dashboard to see the default fields available.
   2. At a minimum, you need the Login Name and Email fields for any registration form.

2. ACF Fields:
   1. Use the ACF plugin to create a Field Group assigned to users.
   2. Add custom fields within this group to collect additional user information.

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.

Step 5: Map Your Fields

You need to map the form fields to either default WordPress fields or ACF fields. Your registration form can have 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 Email fields for your registration.

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 Registration 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 options include:
   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 options include:
   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 "Registration" type of form.

Additional Tips

1. View the Form: Preview your new registration form containing ACF fields from the front end.
2. Customize Design: Use the Design tab for additional styling to match your website’s theme.

By following these steps, you can create a fully functional registration form using Divi Form Builder that incorporates both default WordPress fields and custom ACF fields. This setup is perfect for allowing users to create detailed profiles with a wide variety of metadata.