Divi Theme with Contact Form 7
Looking to integrate Contact Form 7 with Divi theme, let’s start! Contact for 7 is a very established plugin and well used Free WordPress Contact Form. With over 5 million installs Contact Form 7 is huge. Combine with Divi theme from elegant themes one of the most popular themes, magic can happen.
Note: Some of the code (HTML, CSS or PHP) within this blog are from other blog posts, forums and may have been modified from other web sources. Always verify the code prior to using it on a live website.
Plugin Break down
Contact Form 7 is a very versatile plugin allowing customisation of many aspects, including:
- Custom form entries
- Drop-down menu boxes
- Tick boxes and radio boxes
- Text entry formatting, such as email, telephone number etc.
- Email templates in HTML format
- Auto email confirmations
- Upload attachments
- Acceptance validation (terms and conditions etc)
- Security and spam CAPTCHA
Add-ons & extra Plugins
To add more functionality extra add-on plugins can be installed:
- Conditional formatting (hide or show extra entry fields, plugins: Contact Form 7 Conditional Fields)
- Store all submitted forms in database (Plugins: Advanced CF7 DB, Flamingo, or Contact Form CFDB7)
- Export all forms in a database to Excel etc
- CRM customer database import function
- Re-direct to another page (used for easy conversion tracking, plugin: Redirection for Contact Form 7)
- Google V2 CAPTCHA (Plugin: ReCaptcha v2 for Contact Form 7)
Is it all good? Maybe not!
So why isn’t everyone using Contact Form 7. The interface and method of styling the forms is not intuitive. Many other plugins with similar functionality and are much easier to use, yet they are not free. A great example of an easy to use Contact Form plugin is “WP Forms“. But to enable some functionality such as allowing attachments it may cost a fee.
Website loading speed due to plugins and code
The other drawback to Contact Form 7, is the issue with slowing the website loading speed. With the he main plugin and all the add-on plugins, it can impact the load time and response time. This is not good for users, and as we know speed matters as a SERP ranking factor. One way to prevent the java script and CSS on all pages of the website then the following script can be modified to only the required pages. Note: Do NOT use this if using Google CAPTCHA V3. Google CAPTCHA V3 requires tracking the user’s interactions on the website. However, if working with Google V2 CAPTCHA, this works.
Let’s get started! Contact Form 7 CSS code styles!
Firstly you will need to edit your Style.css code. Always make a full back-up prior to making any changes! This guide we are focussing on making Contact Form 7, look like a Divi style contact form. If you have Divi already installed but have not yet created a child theme, we recommend creating a Divi child theme now! In the next section, the code can be added to your child theme or style.css code. The code has markup to help you style the form, to your liking. Some parts are not required, so pick and choose what you need. The validation styling really is optional.
Basic Divi theme styling for Contact Form 7
Much more Contact Form 7 stlying!
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Find out more about our services
Two boxes per line on desktop and tablet.
So now we have the boxes and the general colour schemes. But you may want to have two smaller entries of the form on the same row! Whilst having a single entry per row for mobile viewing.
This requires two parts:
- CSS code in stlye.css
- Additional code in the Contact form 7 form builder
CSS code to be added to style.css:
Within Contact Form 7, Form settings:
<div class=”one-half”><label> Your name (required)
[text 1=”your-name” 2=”placeholder” 3=”Your First & Last name here” language=”*”][/text] </label></div>
<div class=”one-half last”><label> Your Company (required)
[text 1=”your-company” 2=”placeholder” 3=”Your company name here” language=”*”][/text] </label></div>