If you’re building with Divi, your contact form can do a lot more than collect a name and an email. With the Divi Contact Form module, you can style every piece of the UI, add conditional logic that responds to a user’s choices, and protect your inbox from spam, all without extra plugins. In this guide, you’ll learn what Divi forms can and can’t do, how to set one up properly, and how to style it so it looks like it was designed with the rest of your site in mind. We’ll keep it practical, fast, and focused on real-world setups.
What Divi’s Contact Form Module Can Do
Core Capabilities
Divi’s Contact Form module covers the fundamentals well. You can add common field types like text, email, textarea, select, radio buttons, and checkboxes. Each field can be labeled, given placeholder text, and marked as required. You can also show or hide fields using conditional logic so the form adapts to a user’s previous answers.
On submission, you can display a success message or redirect to a thank-you page. The module supports basic validation (like email format), a built-in honeypot, and integration with Google reCAPTCHA to filter automated spam. You can customize the message pattern that gets emailed to you, define a subject line, and set the recipient address.
Styling is where Divi shines: you can control fonts, colors, spacing, borders, focus states, and buttons, right from the Design tab. If you want pixel-level control, the Advanced tab and module-level Custom CSS fields are there for fine-tuning.
Common Limitations And Workarounds
Divi forms don’t store entries in the WordPress database by default, so there’s no submissions list in the dashboard. If you need entry storage or exports, use an SMTP plugin plus an email archive, or add a forms plugin that supports database logging.
Multi-step forms and file uploads aren’t native. For complex workflows (quoting wizards, uploads, signatures, payment steps), consider a dedicated forms plugin like Gravity Forms, Fluent Forms, or WPForms, then style it to match Divi.
Finally, CRM and marketing automation integrations are limited within the contact form. If you want direct syncing to tools like HubSpot or ActiveCampaign, either route via a dedicated plugin or use Divi’s Email Optin module where appropriate.
Create A Contact Form Step-By-Step
Add Fields, Labels, And Success Messages
- Add the module: In the Divi Builder, insert the Contact Form module where you want it. Give the form a clear title (“Request A Quote” beats “Contact”).
- Add fields: Open the module settings and add fields for Name, Email, Message, and any qualifiers (e.g., Budget, Project Type). Use short, scannable labels and meaningful placeholders. Mark Email and Message as required. If you’re segmenting inquiries, add a select or radio field like “How can we help?” with options such as Sales, Support, Other.
- Success handling: In Content settings, set a friendly Success Message that confirms receipt and outlines next steps (“Thanks, our team replies within one business day”). If you need tracking or a post-submit offer, enable Redirect and point to a thank-you page with analytics events.
- Field description text: Use the Description setting for helpful nudges (character guidelines, what to include in the message). Keep it short to avoid form fatigue.
Configure Email Notifications
Open Email settings and set the Notification Email Address to your monitored inbox or an alias that routes to your help desk. Add a meaningful Subject line that includes a token like the form title or a field value (“New Inquiry – {{ Project Type }}”).
Use the Message Pattern to control the email body. Include each field label and value on its own line for legibility. If you’re filtering by department, route to unique addresses using conditional forwarding rules in your email client, or spin up separate Divi forms for each department.
For deliverability, send from a domain address that matches your site (you@yourdomain.com), not a free provider. Then configure SMTP at the site level so notification emails don’t land in spam, details in the troubleshooting section.
Style Your Form The Right Way
Design Tab Essentials
Start with the Form Field text settings: set a legible font and a size that works across devices (16–18px for body text is a safe range). Adjust line height for multi-line fields so messages don’t feel cramped.
Color choices matter for clarity. Set field background and border colors with enough contrast against the page. Give the focus state a clear visual indicator, slightly darker border and subtle shadow are usually enough. For placeholders, keep contrast lower than labels to avoid confusion.
Buttons should look tappable but not scream. Match your brand color, add a hover state that shifts brightness or border thickness, and set adequate padding so the target is finger-friendly. Use consistent corner radius and spacing so the form feels like part of your design system.
Advanced Tab, Custom CSS, And Presets
When the Design tab can’t reach a specific target, use the Advanced tab’s CSS fields. Popular tweaks include:
- Styling individual field widths to create balanced two-column layouts on desktop.
- Targeting the focus outline for accessibility without losing your brand look.
- Adjusting error message spacing and icon size for better readability.
If you’ll reuse this look, save the module as a Preset or Global item. Presets keep typography, colors, and spacing consistent across forms. When you update the preset later, every form that uses it inherits the changes, huge time-saver.
For site-wide patterns, add small snippets to your child theme stylesheet or Divi Theme Options > Custom CSS. Keep it minimal and documented so maintenance stays simple.
Responsive And Dark Mode Tweaks
On tablet and mobile, increase vertical spacing slightly and stack fields in a single column for speed. Use the responsive toggles in the Design tab to adjust font sizes and padding per breakpoint. Test with an actual device if you can: thumbs don’t lie.
If your site supports a dark color scheme, set field backgrounds to a true dark, soften borders, and use high-contrast label text. Ensure focus and error states are still obvious in dark mode. Check autofill colors too, browsers like Chrome may inject a yellowish background that you’ll want to override for consistency.
Add Conditional Logic That Feels Seamless
Show Or Require Fields Based On Choices
Conditional logic in Divi forms lets you tailor the experience. Edit a field, enable Conditional Logic, then choose rules like “Show this field if Project Type equals Website Redesign.” You can also use logic to toggle Required status, so you only force extra info when it’s relevant.
Keep rules simple. One or two conditions per field is ideal. If you find yourself stacking complex chains, consider splitting the form or using a multi-step workflow with a dedicated forms plugin.
Real-World Logic Patterns
- Department routing: If “How can we help?” = Support, reveal an Order Number field. If Sales, reveal Budget and Timeline fields.
- Qualification: Show a brief checklist when “Enterprise” is selected to gauge fit before a sales call.
- Location-based inputs: If Country = US, show State. Otherwise, show a Region field.
- Project scoping: If “Custom Development” is selected, reveal a text area asking for tech stack or integrations.
Validation, Spam Protection, And Accessibility
Required Fields And Friendly Error States
Mark only what you truly need as required. Overdoing it tanks completion rates. Use concise error messages near the field, “Please enter a valid email address” beats a generic “Error.” Keep the field in focus after error so the user can fix it quickly.
If you ask for longer messages, add character guidance (“Aim for 3–5 sentences”) and let users know what to include. Small nudges reduce back-and-forth later.
reCAPTCHA And Honeypot Setup
Enable the built-in spam protection: in Divi Theme Options, add your Google reCAPTCHA site and secret keys, then toggle reCAPTCHA in the Contact Form module. Use v3 or an invisible variant for fewer user prompts. Keep the honeypot enabled as a silent second layer. If spam still slips through, add keyword filters at your email client or consider a server-side firewall.
Keyboard And Screen Reader Considerations
Make sure label text is present and properly associated with inputs, don’t rely solely on placeholders. Keep the focus outline visible for keyboard users. Set a logical tab order by avoiding odd column nesting. For screen readers, ensure the success message is announced: using a clear success heading and concise copy helps. If you redirect on submit, load the thank-you page with a meaningful title so assistive tech users aren’t left guessing.
Troubleshooting And Performance Tips
Email Deliverability And SMTP
If notifications don’t arrive, it’s rarely Divi, it’s deliverability. Install an SMTP plugin (like WP Mail SMTP or FluentSMTP), connect it to a trusted mail service (your domain provider, Google Workspace, Microsoft 365, or a transactional service like SendGrid), and set the From address to your domain. Run a test email. This alone fixes most missed submissions.
Avoid sending from a free address and keep SPF/DKIM records configured at your DNS. If messages still hit spam, simplify the Message Pattern, remove excessive links, and verify the recipient isn’t auto-filtering.
Conflicts, Caching, And Updates
Blank submissions or stuck spinners often trace back to caching or a script conflict. Exclude the form page from aggressive page caching and minification. If you use a CDN, purge the cache after major changes. Temporarily disable optimization features to test.
Keep Divi, your theme, and plugins updated. If a conflict appears after an update, test with only Divi and your child theme active. Also check reCAPTCHA keys and domain settings if you suddenly see validation errors. Finally, don’t overload a single page with multiple heavy forms, one optimized form usually converts better and loads faster.
Conclusion
Your Divi forms can look sharp, behave intelligently, and deliver reliably when you set them up with intention. Start with a clean field set, wire up email the right way, then style with consistent typography, spacing, and focus states. Add conditional logic where it adds clarity, not complexity. Lock down spam with reCAPTCHA and honeypot, and keep accessibility in view so everyone can reach you. With that, your contact form stops being a box on a page and starts acting like a thoughtful part of your customer experience.
No responses yet