Most people associate WordPress forms with something grey and uninspiring. At the same time, new business connections and opportunities often starts with a form being submitted. There are lots of powerful WordPress form plugins, but they are often difficult to work with and require lots of custom CSS code to even look decent.
For basic contact forms, the built-in Divi Form module works perfect. Here are 7 tricks and hidden features that will optimize your Divi forms.
👉 Related post: 3 Best Divi Contact Form Plugins Comparison – Which Is Better?
👉 Related post: How to Style the Divi Form Success Message
👉 Related post: How to add a Privacy Policy link in your Divi Form
Use Divi Forms if you want to ...
- create beautiful forms with Divi Builder
- use conditional logic
- create basic contact forms.
- avoid custom CSS code and shortcodes
- avoid heavy third-party plugins.
Use a form plugin if you need ...
- calendars with date pickers
- file upload in the form
- automated confirmations to the sender
- more advanced forms.
Two good alternatives for more advanced Divi forms are the plugins Divi Contact Form Helper and Divi Form Builder.
1. Make sure the sender’s email and name are visible in the form replies
The form responses are automatically sent via e-mail to the site administrator (or to the recipient you entered in the form module in Content > Email). But what should you do if the sender’s contact information is missing in the Divi form email?
In order for all the information to appear in the email message, you need to click on the form module’s cogwheel icon and navigate to Content > Email and add the following dynamic text in the field Message Pattern:
%%name%%
%%email%%
%%message%%
This force the field IDs name, email and message to be displayed in email messages generated by your Divis form.
If you’ve added more custom fields to your form (eg Phone or Company), then you should also enter these field IDs between %% and %% in the Message Pattern field.
You can also add any random text in the Message Pattern, like “Good morning” or “This is an email from my awesome website!
Example of a form response with a custom Message Pattern:
Example of a form response with no custom Message Pattern:
Video tutorial on how to create a contact form with Divi
2. Make sure that your Divi form replies arrive in your email inbox
Whether you use Divis forms or a third party plugin such as the Caldera Forms, Contact Form 7 or Gravity Forms, you should always enter your email server information. This will increase the chances of that your form response actually will go all the way to your email inbox.
Install the free plugin WP Mail SMTP (+1 million active installations) and enter your SMTP Host, STMP Port etc. You should encrypt the emails with SSL or TLS for better security. Contact your web host if you don’t know where to find your SMTP credentials.
Always test send a message from your forms afterwards so that you know that everything works as intended.
3. Save Divi form messages in your WordPress database
E-mail in all respects but they have a tendency to disappear in crowded inboxes. Is it possible to save messages from a Divi form in a database per default?
Yes you can, but you’ll need to install a plugin called Divi Contact Form Helper. Once you have activated this neat little plugin, every submitted form response is automatically saved and stored in your WordPress database.
You can list the sender, who has read the message and when, which page the message was sent from and the date it was sent.
Divi Contact Form Helper also adds tons of other cool features like File Uploads, Date & Time Pickers, SMTP Integration, Zapier Integration, Confirmation Emails, Field Icons and much more.
4. Add multiple email recipients to your Divi form
The fact that you can add multiple recipients to your Divis form is a bit of a hidden feature that hardly the Divi support knows about. But it is actually very simple.
Open the form module settings by clicking the cogwheel icon. Navigate to Content > Email and add as many email addresses as you want.
Separate the email addresses with commas (,) with or without spaces in between.
Example: john.doe@gmail.com, jane.doe@gmail.com
5. Create intelligent Divi forms with Conditional Logic
Conditional logic means that you can show and hide fields, based on what the user has previously answered in the form. It’s a perfect way to reduce noise and create relevant forms.
If a visitor indicates that they are interested in product X, you can choose to display just the fields that are relevant for X and not for Y and Z.
As usual when it comes to the Divi Builder, it is easy and user-friendly to create conditional logic. Create your conditional logic by clicking the cogwheel for each field that you want to edit.
6. Stop spam with the invisible reCAPTCHA v3
Since Divi version 4.0.7 you can add reCAPTCHA v3 spam protection for your Forms modules (and Email Optin modules). So what does this mean? reCAPTCHA v3 is free service from Google that will keep the spammers away from your forms. And the best thing is that your visitor wont even be bothered with bizarre “I am human” checkboxes or “Click all images with a car” since the validation is made in the background.
All you have to to is to login to your Google account, register a new website and paste your new keys in your Forms module settings. Say good bye to spam and tacky math fields.
Pro tip: Start with Minimum score: 0.7 and increase the score step by step, until the spam emails stop coming. The higher score, the tougher gate keeper. But beware, a score over 0.8 increases the risk that you are blocking real users
Video tutorial on how to add Google reCaptcha V3 to your Divi forms
7. Create beautiful and user-friendly forms with Divi
Last but not least: the greatest advantage with the built-in Divi form module is that you can quickly and easily create really stylish and user-friendly forms – by just using the user-friendly Divi Builder.
Sync the design with the rest of your website. Make sure that readability is good and that the forms look good on large and small screens.
Add your forms to the Divi Library to reycle them on your webite. Or why not export the forms into a json file and import them to your other Divi websites. The sky is the limit!
Read more:
Looing for more advanced Divi form features? Here comes Divi Contact Form Helper!
Divi Contact Form Helper from Pee-Aye Creative is a premium Divi plugin that
It saves form submissions to the database and adds tons of other cool features like File Uploads, Date & Time Pickers, Conditional Email Address Routing based on field options, SMTP Integration, Zapier Integration, Custom MIME types, Confirmation Emails, Field Icons, custom labels, and so much more.
Annual license for unlimited websites or a lifetime license for unlimited websites? Divi Contact Form Helper offers both options.
That’s all for today!
I hope that you enjoyed this post. Subscribe to VictorDuse.com on YouTube and join our Facebook group for more crisp content on WordPress and web design.
👉 Related post: 3 Best Divi Contact Form Plugins Comparison – Which Is Better?
👉 Related post: How to Style the Divi Form Success Message
👉 Related post: How to add a Privacy Policy link in your Divi Form
Hi
Is there in Divi3 Form Modul any possibility to add hidden fields?
That can stop a lot of spam that comes from robots, they fill-out any fields. With a roule you can block sending the form, if this hidden field is filled out. The normal user can see the field and do not fill it out.
Perhaps this mechanism is a good idea to integrate in the Divi3 Form Module.
Greetings – Mathias
If the native X + Y captcha isn’t enough, I would go for a more solid captcha solution, for example https://wordpress.org/support/topic/integration-with-divi-3/ or perhaps this Divi form plugin (it costs a few bucks though): https://trumani.com/product/divi-forms-google-recaptcha-plugin/
Update: you can now add reCaptcha v3 in the content tab in the Divi Form module. This is the best way to stop spam.
Hi there, is there any way to make the field ID a hyperlink? So, for example, when someone enters a phone number and I receive that via email, I can click straight on the phone number and call them back. Currently, using the message pattern to pull it in only presents it to me as plain text.
Many many thanks in advance
When there are two forms on the one page. Post submitting on the second form, replaces the second form with the first, no matter where in the page it’s positioned. Does any one know how to deal with issue?
Regards,
Is this a problem related to the Divi Form DB plugin? If so, please contact their support at https://www.sean-barton.co.uk/support/
Hi,
I would like to ask if there is any possibility to customise validation messages. In my form I have two fields that are required and I want to translate information into my native language as well as style the information. Can I do it from the Divi Builder panel?
Greetings,
Marzena
Hi Marzena,
If you change the default website language in WordPress at Settings > General > Site Language, it should affect all your Divi modules. If your language is not already translated in Divi, you could try to use a free plugin like Loco Translate to translate/customize the strings in the Divi Form module.
You need to do some custom CSS in order to style the error message text. Use the class .et-pb-contact-message, for example:
.et-pb-contact-message {
font-size:2em;
font-weight:900;
color:#999;
}
Please note that this will also affect the “Thank you” message, that has the same class.
How to add a drop down list?
Hi Заказать сайт!
Sure you can. Just go to Module settings (cogwheel) > Content > Type and choose Dropdown. Read more at https://www.elegantthemes.com/blog/theme-releases/contact-form-update
Hi there
Is there a way to add the name of the page or post that the form was submitted on, into the message pattern?
thanks
Hi Katie,
Nope, not by default. But you can add a custom page name in the Message Pattern. But if you use the same form on multiple pages (via hooks or Divi 4 global features), that will not work.
The neat plugin Divi Form DB displays from what page the form was submitted (only in WP backend, not in the emails though).
Hopefully, Elegant Themes will release an update with this feature + date picker, file uploads and more nice features soon.
Thank you for the post, I was transferring from Weebly to WordPress so this info is exactly what I need!
Welcome to the WordPress family, Angie. 🙂
Hi,
Do you have any idea how to add a dynamic field (e.g. in a message pattern) that will include a post title?
I need a form that will appear on many pages after clicking a button and popup shows a form.
And I need to know from what post the message is.
I have used the dynamic text for CF7 but it stopped to work correctly 🙁
Regards,
Dominik
Hi Dominik,
I’m afraid that’s not possible with the Divi Form module for now. But I think you could achieve this with Caldera Forms, which is a very powerful form plugin.
Btw, here’s a guide on how to style Caldera Forms to look like a Divi form: https://www.elegantthemes.com/blog/divi-resources/styling-caldera-forms-to-look-like-the-divi-contact-form-bonus-looks
One issue I found with a hosting company that may cause your problem is the hosting plan.
My hosting play is 512MB and 1 processor.
As soon as I upgraded to 1G ram and 2 processors, the problem went away.
It was not a plugin this time.
If you host with godaddy you have to get the ultimate hosting, the economy and deluxe are not enough and I keep running into this problem.
So, make sure you have at least 1G of ram and 2 processors if you plan to run the divi theme.
Here is the the error I get
Load of global defaults has failed
An error has occurred while loading the Global History States. Various problems can cause a save to fail, such as a lack of server resources, firewall blockages or plugin conflicts or server misconfiguration. You can try loading again by clicking Try Again.
This is because you only have 512MB of ram and 1 processor.
Check this before you go with a hosting plan.
This is one solution
For most recent information you have to pay a visit internet and on internet I found this website as a finest website for newest
updates.
Thanks for the information . It is very helpful !! Thanks !!
Thanks Wuhan, I’m glad to hear that! 🙂
Nicely written! Thx guys! Lots of useful things found here.
Thanks and cheers! 🙂
Is it possible to have the user get a copy of their form?
Hi Kelsey! No, that’s not possible with the Divi form. If you need that feature, I would recommend the plugin Caldera Forms.
How do I change the font color on divi form when the submit button is clicked and the error message is shown above the form showing the empty fields to be filled.
The “missing” field text color is what I want to change so it’s visible on specific backgrounds. Thank you
Hi Konrad! Just add this CSS:
.et-pb-contact-message {
color:#333;
}
You can also use this class to change for example font-size and font-style. However, notice that the success message uses the same class, so that text will be affected too.
Hi again Konrad! Here’s a fresh post on how to style the Divi Form Success Message more in-depth: https://victorduse.com/blog/how-to-style-the-divi-form-success-message/
Hi Victor,
Thanks this really helped!
Hi! Is it possible to change the input text color (when someone begins typing) to black?
Hi Matt! Sure you can. Just click the cogwheel to open the settings for the Divi Form Module and open the Design tab. Expand the “Fields” tab and change the “Fields Text Color” value to #000
Hi again. Just a short correction: To change the input color, you should go to the same tab and change “Fields Focus Text Color” to #000. The “Fields Text Color” refers to the lead text that is visible when the field is inactive. Sorry about the mixup!
Regards, I want your contact form details. I could display it. On that page. What I set up on the Contact form to redirect you there. I also create that page with Divi editor.
So the user enters his name eg “Laszlo” in the contact form. I will then redirect you to a specified page. Where I write his name is “Dear Laszlo ….”
Hi Balk,
You can redirect the visitor to a thank you page by activating “Enable Redirect URL” under the Redirect tab in the Form module. This page can be made with the Divi Builder, but I’m afraid that you can’t display the visitors name data here.
You can actually display some dynamic data in the default Success Message field by clicking the + icon to the right in the Success Message field. But, sadly, the form fields is not available here. The most exciting you can do is to add current date, for example: “Thanks! Your message was sent June 18:th” or the Page Author name, for example: “Thanks! Balk will contact you soon.”
Maybe the plugin Caldera Forms have the feature that you are looking for.
Thanks for this! Very useful. I also found a free plugin called Divi Supreme on the wordpress plugin repo that does the styling of contact form 7 with visual builder. In other words you don t have to do custom CSS coding at all. Maybe could be helpful for others. Cheers.
Thanks for sharing! I actually have a review post about Divi Supreme coming up later this year. 🙂
I cant add my email address, to which i want the contact form to send the emails to. can anyone help?
Hi Shaurya! Just open the form settings and go the the tab Content > Email. Add your email address in the field “Email Address” and hit save. That should do it for you!
If you are using an SMTP plugin, please check your settings there as well since they could override the settings in your Divi Form module.
hi,
I have a message form at the bottom of my blogpost, would I be able to add the blogpost title in the field Message Pattern as well? I tried %%title%% or %%Post Title%% but it gives me the title of the message form or nothing.
thank you!
I’m afraid that’s not possible with the current Divi form without extensive coding. The %%fields%% only refers to data inside of the forms, not from the surrounding page.
If ET adds a Dynamic Content option in, for example, the ID field (which could be set to “Current page title”) it would be possible to make a work around with an invisible field. But there’s no such option for Dynamic Content in the form fields, yet. :-/
The only option right now is to use the plugin Divi Form DB (see screenshots in this post) that displays “Submitted from” in a nice way.
thank you!
Thanks for your awesome post. I understand everything but i have a question. Can I make conditional recipients email from the contact form? Is it possible that postal code wise recipients receive the email?
Hi CueHacks! I’m afraid that’s not possible with the Divi form as of today.
Hi Vector,
Thank you this is really helpful. You solved two problems success message styling and the validation message color.
My question to you, Is it difficult for Divi developers to include these two simple things in the contact form property? To me, they are very basic (styling a message) options and we shouldn’t be spending time looking for solutions or coding since we are using their builders and it’s made for non coders?
Hi Ayman! I’m glad that the article helped you!
I agree that these settings should be available in the visual builder design settings (and they’ll probably be one day) but I think ET is focused on the upcoming page speed updates right now.
Is there any way to keep the forms from disappearing after submission?
Hi John! You can try this work-around:
1. Open the Contact Form Settings
2. Go to Content » Redirect
3. Set Enable Redirect URL to YES
4. Enter the URL of the page where the form is
5. Save and test.
This works but it’s not a perfect solution since the confirmation message will display in a split second before the redirect loads. If you want to hide the confirmation message completely, you can just add a blank space in Text » Success Message.
If you want more options for the Divi form module, I can recommend this plugin: https://www.peeayecreative.com/product/divi-contact-form-helper/?wpam_id=118
I want to send emails based on selection
Send email to Groups (Option)
Group A
Group B
Email should go to One@example.com if Group A is selected
Email should go to Two@example.com if Group B is selected
I have manage it done it using Contact form 7 and conditional Plugin
I am more interested in doing in Divi.
How this can be done using Divi Forms?
Hi Rattan! It’s not possible out of the box but maybe it can be done with Divi Contact Form Helper or Divi Form Builder.