Adding a form to your Divi website is straightforward, primarily utilizing Divi's built-in modules or integrating popular third-party form plugins for more advanced functionalities.
Understanding Your Form Options in Divi
Divi offers flexibility when it comes to integrating forms. Your choice will depend on the complexity of the form and your specific requirements.
1. Using Divi's Built-in Contact Form Module
For basic contact forms, the Divi Builder includes a dedicated Contact Form module that's quick to set up and customize. It's ideal for simple inquiries, feedback, or quote requests.
Steps to Add a Divi Contact Form Module:
- Enter the Divi Builder: Edit the page or post where you want to add the form using the Divi Builder.
- Add a New Row: Click the green + icon to insert a new row into your layout. You can choose any column structure, such as a single column for a full-width form.
- Insert the Contact Form Module: Inside the newly added row, click the gray + icon. This action opens the Divi Module Library.
- Select the Module: In the Module Library, locate the Contact Form module (you can use the search bar for quicker access) and click on it. This will load the module into your page.
Once the module is added, the Contact Form Settings pop-up will appear, allowing you to configure your form.
Customizing the Divi Contact Form:
The Divi Contact Form module comes with various settings under three main tabs: Content, Design, and Advanced.
-
Content Tab:
- Email: Specify the email address where form submissions will be sent.
- Title: Give your form a descriptive title (e.g., "Get in Touch," "Request a Quote").
- Form Fields: Add, remove, or reorder fields. Each field can be customized with a name, ID, type (input, email, text area), and validation rules (e.g., required, spam protection).
- Success Message: Customize the message displayed to users upon successful submission.
- Redirect URL: Optionally, redirect users to a specific page after submission.
- Spam Protection: Enable the basic reCAPTCHA for spam prevention.
- Pattern: Define custom validation patterns for fields if needed.
- Background: Set a background color, gradient, or image for the module.
-
Design Tab: This tab offers extensive styling options to match your form's appearance with your website's design.
- Title Text: Customize font, size, color, and spacing for the form title.
- Form Fields: Style the input fields, labels, and text.
- Body Text: Adjust the success message text.
- Button: Design the submit button's appearance (color, font, border, icon).
- Sizing & Spacing: Control the module's width, height, margin, and padding.
- Border & Box Shadow: Add borders or shadows to the module.
-
Advanced Tab: For developers or advanced users, this tab allows for custom CSS, conditional logic, and visibility settings.
- CSS ID & Classes: Assign custom IDs and classes for specific styling.
- Custom CSS: Write custom CSS for various elements of the module.
- Visibility: Control when and to whom the module is displayed.
2. Integrating Third-Party Form Plugins
For more complex forms, advanced logic, integrations with CRM systems, payment gateways, or detailed conditional fields, third-party WordPress form plugins are the superior choice. Divi integrates seamlessly with most popular form plugins.
Popular third-party form plugins include:
- WPForms: Known for its user-friendly drag-and-drop builder, offering various form types, payment integrations, and conditional logic.
- Contact Form 7: A free, highly popular, and versatile plugin, though it requires a bit more technical knowledge for setup.
- Gravity Forms: A premium option renowned for its powerful features, extensive add-ons, and advanced form capabilities.
- Fluent Forms: A fast and robust form builder with many advanced features, including conversational forms and payment integrations.
Steps to Add a Third-Party Form:
- Install and Activate the Plugin: From your WordPress dashboard, go to Plugins > Add New, search for your desired form plugin, install it, and activate it.
- Create Your Form: Follow the plugin's documentation to create your form within its dedicated interface. Most offer a drag-and-drop builder.
- Insert the Form into Divi:
- Using the Code Module: The most common method. After creating your form, the plugin will provide a shortcode. Copy this shortcode. In the Divi Builder, add a Code module to your page and paste the shortcode into its content area.
- Using the Text Module: Some plugins' shortcodes can also be pasted directly into a Divi Text module.
- Dedicated Divi Integration: Some plugins, or Divi-specific extensions, might offer their own Divi module (e.g., a "WPForms Module") for a more integrated experience.
Choosing the Right Method
| Feature | Divi Contact Form Module | Third-Party Form Plugins (e.g., WPForms, Gravity Forms) |
|---|---|---|
| Ease of Use | Very easy, native Divi Builder integration | Generally easy with drag-and-drop builders, but more settings |
| Form Complexity | Basic contact, feedback, simple quote forms | Multi-page forms, conditional logic, file uploads, quizzes |
| Spam Protection | Basic reCAPTCHA | Advanced reCAPTCHA, hCaptcha, Akismet, honeypot fields |
| Integrations | None (basic email notification) | CRM, email marketing, payment gateways, Zapier, etc. |
| Data Storage | No backend storage (email only) | Stores submissions in WordPress database (for review/export) |
| Conditional Logic | Limited (field visibility based on another field) | Extensive, multi-level conditional logic for fields and sections |
| Pricing | Included with Divi | Free versions/plugins, but premium for advanced features |
For a quick and simple "Contact Us" form, Divi's built-in module is perfectly adequate. For business-critical forms, surveys, registration forms, or any form requiring advanced logic and integrations, a dedicated form plugin is highly recommended.
