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.
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
- advanced forms.
Tip! Caldera Forms is a good alternative for more advanced forms. A guide for Styling Caldera Forms to Look Like the Divi Contact Form.
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:
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!
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 Form DB. 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.
The plugins costs $10 for unlimited amount of Divi websites. A pretty good investment, right?
Purchase Divi Form DB at Elegant Marketplace (no affiliate link)
Ps. A nice bonus feature in the Divi Form DB plugin is that you can publish form responses directly as public posts on your WordPress website. But don’t forget that you need the sender’s consent for this.
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 Email > Content and add as many email addresses as you want.
Separate the email addresses with commas (,) and without any spaces.
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.
7. Create beautiful and user-friendly forms with Divi
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!