You’re likely learning how to style Contact Form 7 in Divi. Contact forms are very beneficial for interacting with website visitors. However, despite the immense popularity of the Contact Form 7 plugin in the WordPress arena, you can be reluctant to use the typical structure.
It’s all about creating something unique in the industry. You need to add some useful customizations to create a stunning and distinctive contact form.
Before we begin our “How to customize Contact Form 7 in Divi” tutorial, let’s talk over a short guide on adding contact form 7 in Divi.
Installing & Activating Contact Form 7
You can download this plugin from WordPress’s official repository.
Log in to your WordPress dashboard and follow this: Plugins> Add New> Put the keyword “Contact Form 7” in the search bar.
Eventually, your search result will show several plugins. Nevertheless, you’ll probably find a plugin at the first look-alike in the screenshot below. Install and activate this plugin.
Adding a Contact Form in Divi
Now in your WordPress dashboard sidebar, you will find the “Contact” option. Hover over it, and you will see a “Contact Forms” option. Click it. Then you will see a simple ready-made shortcode for a contact form. Copy and paste [contact-form-7 id=”***” title=”Contact form 1″] this shortcode to your page for instantly creating a contact form like below:
Today, we are adding more fields to our form. You can also format your contact form using HTML elements. For this, click the “Add New” button, and you will see an “Admin Screen” adding your title. See the picture below; we labeled our title “Contact form 2”.
Now in the form tab panel, there are many helpful Tag-generators. You can generate form-tags through these Tag-generators. Further, you will see a form editing field, where the form can be customized using HTML and form-tags.
Anyway, we have already created a contact form in the editing field. You can copy and paste the following HTML code to use this form.
<label>Name (required)
[text* your-name size:60] </label>
<label> Select a option
[select menu-15 "Option One" "Option Two " "Option Three"]</label>
<label> Select an item</label>
[radio radio-115 default:1 "Item One" "Item Two " "Item Three"]
<label>Email (required)
[email* your-email size:60] </label>
<label> Subject
[text your-subject size:60] </label>
<label> Your Message
[textarea* your-message 60x7] </label>
[submit "Send"]
After applying this shortcode in the editing field of the Admin Screen, there will be a contact form like the picture below. Copy & paste the shortcode to use this form on your site.
So, we have answered the question, “How to add Contact Form 7?” For a detailed user guide, follow this article. Now let’s move on to the main part of this article, where we will guide through a step-by-step guide on styling Contact Form & in Divi.
Step-by-Step Guide on How to Style Contact Form 7 in Divi
The next thing to do is customize Contact Form 7 for your Divi website. To do that, we are taking the assistance of a third-party plugin as Divi doesn’t have such functionality by default. To give a highly decorative look to your Contact Form 7 on your Divi website, DiviFlash comes up with a dedicated module.
Our final result will look like the picture below, which is available to download. Opening the demo will let you see all the customization we have done.
Requirements:
- The latest version of Divi Theme is installed.
- The latest version of the DiviFlash Plugin has been Installed. Here is a guide on how to install the DiviFlash plugin.
Now we are ready to begin. Contact form 7 is being redesigned to explain the exact process and the exclusive features of this module. Now we are ready to begin.
Let’s get started with our first step. To do this, you can either start from scratch by creating a new page. Or, go to an existing page and add a regular section.
Start With A Section
Along with adding an image, we change the color to match the section background. You can also customize it to use a different background image. Here is what we are changing:
In the content tab,
Click on the background option, Upload the background image and make the following changes:
- Background Color: #191927
- Background Image: Source File
- Background Image Size: Fit
Leave the rest of the settings at their defaults and move to the row settings.
Row Design
Here, we need a two-column (50/50) structure for our design. So we insert a two-column row by clicking the plus icon.
Then, in the Design Tab,
Under Spacing options,
Padding : Tablet and Mobile only 0px (Top)
Other than that, there is nothing to do in the Row Settings.
Divi Modules
Now you have two columns. In our design, the DiviFlash Contact Form 7 module will be on the right-hand column. However, there will be some default modules to enhance the design. Let’s start designing modules one by one from the left side.
Modules Designs:
To insert a module, click the gray plus icon in the row. You will see a list of modules. Scroll down or search for your required module.
Blurb Module
The first module we need for our design is a Blurb Module. We will add this module to the top of the left column. We will add some content and customize it. Depending on your design needs, you can use different text and customizations. Here is the setting we are using for this module –
In the content tab,
Under Text options,
- Title: Contact Us
- Body: Ask for a quotation from us!
Under Image & Icon options,
- Image: Remove Placeholder image
In the Design Tab,
Under Title Text Options,
- Title Font: Inter
- Title Font Weight: Bold
- Title Text Color: #ffffff
- Title Text Size: 62px (Desktop), 50px (Tablet), 46px (Mobile)
- Text Line Height: 66px
Under Body Text Options,
- Body Font: Inter
- Body Text Color: #c0c0cf
- Body Text Size: 20px (Desktop), 18px (Tablet & Mobile)
Under Sizing Options,
- Content Width: 100%
Under Spacing Options,
- Margin: 20px (Top)
Text Module
Insert a text module underneath the blurb module we just used and set everything as described below.
In the content tab,
Under Text options,
- Body: Contact information
In the Design Tab,
Under Text Options,
- Text Font: Inter
- Text Font Weight: Bold
- Text Color: #ffffff
- Text Size: 20px (Desktop), 18px (Tablet & Mobile)
- Text Line Height: 36px
Under Spacing Options,
- Margin:
- For Desktop: 110px (Top)
- For Tablet & Mobile: 20px (Top)
- Padding: 5px (Top & Bottom) 32px (Left & Right)
Under Border Options,
- Rounded Corners: 5px
- Border Width: 2px
- Border Color: #4f4bff
In the Advanced Tab,
Under Custom CSS options,
Main Element: Add this code – width:fit-content;
Blurb Module
Thirdly, we are adding three different Blurb modules underneath the Text module. We are giving the phone number, address, and location. You can add your contact information or any other texts. Here are the Blurb settings for you-
In the Content Tab,
Under Text Options,
- Body: 985-688-7980
- Title: Remove Default Text
Under Image & Icon Options,
- Use Icon: Yes
- Icon: Find the phone icon and select.
In the Design Tab,
Under Image & Icon Options,
- Icon Color: #5551ff
- Image/Icon Placement: Left
- Image/Icon Width: 20px
Under Body Text Options,
- Body Font: Inter
- Body Text Color: #c0c0cf
- Body Text Size: 18px (Desktop), 16px (Tablet & Mobile)
- Body Line Height: 28px
Under Sizing Options,
- Content Width: 100%
Under Spacing Options,
- Margin: 20px (Bottom)
In the Advanced Tab,
Under Custom CSS options,
Blurb Image: Add this code –
Padding-top:5px;
Width:20px
The next two elements are the same as the blurb we just designed. Let’s copy the blurb we just made and change the content.
Hover over to the module and click the duplicate module icon.
Now change the content and do the same again.
Social Media Module
Now, as per our design, we will need a social media module. Find the social media module in the module list and insert it. Here are the settings for the social media module.
In the Content Tab,
Add Social media networks as per your requirement. We used 3 of them. Click on the settings of each item and in the content tab of (Child Item)-
Under the link option,
- Provide the social media link.
Under the background option,
- Color: rgba(255,255,255,0) & on Hover: #4f4bff
Do the same for all of your social media and go back to the parent settings.
Under Spacing Options,
- Margin:
- For Desktop: 140px (Top)
- For Tablet & Mobile: 20px (Top)
In the Design Tab,
Under Icon Options,
- Icon Color: Regular #c0c0cf and On Hover #ffffff
- Use Custom Icon Size: Yes
- Icon Font Size: Desktop 24px, Tablet 20px, Mobile 16px
In the Advanced Tab,
Under Transition Options,
- Transition Duration: 450ms
That’s it in our left column. Let’s design our right column with the contact form 7.
Divi Contact Form 7 Styler Module
Lastly, start with the Contact Form 7 styler module by DiviFlash. We are adding a contact form in the right column per our design. From your design perspective, choose your preferred area to add the form. Now see how we are styling Contact Form 7:
In the content tab,
After adding this module, it will ask you to choose a contact form. For this, navigate to the Content Tab in the module settings and click “Content.” Then choose Contact form 2 from the dropdown list. You will see your contact form will appear right away.
However, remember the Contact Form title as you saved it before. Here, we labeled our title as “Contact Form 2” on the Contact Form 7 Admin Screen. So in our list, we find this title. Further, make the following changes:
Under Input Textarea Background options,
- Background Color: #212134
Under Drop Down Box Background options,
- Background Color: #212134
Under Button Background options,
- Background Color: #4f4bff
Under Background options,
- Background Color: #212134
In the Design Tab,
Under Label options,
- Label Font: Inter
- Label Text Color: #c0c0cf
- Label Line Height: 26px
Under Input & Textarea options,
- Input Font: Inter
- Input Text Color: #c0c0cf
- Input Line Height: 26px
- Rounded Corner: 4px
- Border Width: 1px
- Border Color: #40405d
Under Dropdown options,
- Dropdown Font: Inter
- Dropdown Text Color: #ffffff
- Rounded Corner: 4px
- Border Width: 1 px
- Border Color: #40405d
Under Submit Button options,
- Submit Button Font: Inter
- Submit Button Text Color: #ffffff
- Submit Button Line height: 20px
- Rounded Corners: 4px
- Border Color: #4f4bff
Under Spacing options,
- Dropdown Margin: 5px (Top)
- Dropdown Padding: 5px (Top & Bottom) , 5px (Left & Right)
- Input Padding: 5px (Top & Bottom), 10px (Left & Right)
- Submit Margin: 20px (Top)
- Submit Padding: 10px (Top & Bottom), 70px (Left & Right)
- Padding:
- For Desktop & Tablet: 48px (Top & Bottom), 48px (Left & Right)
- For Mobile: 30px (Top & Bottom), 30px (Left & Right)
In the Advanced Tab,
Under Custom CSS options,
Main Element: Add this code
border-radius:16px;
border:1px solid #40405D;
And that’s it! We have worked through all the steps. Click Save on the bottom right, then click Exit Visual builder to preview. Now, you have something similar to what we promised.
Hopefully, from now on, you can also take the necessary care of all the components of contact form 7 like buttons, input fields, texts, background, etc.
Why Choose DiviFlash To Customize Contact Form 7 in Divi?
Moreover, the Divi Contact Form 7 Styler Module was fun to play with while creating our design. You can also use it to create an appealing Contact Form 7. Here we are giving you a few more benefits of this module.
- Only dedicated to styling Contact Form 7.
- Facilitates custom spacing to ensure a convenient gap between all ingredients.
- Adorn the dropdown box & input text area backgrounds.
- Provides all the decorative features, including alignment, color, border, and many others.
- You can easily download, import, and edit the premade layout.
- Opportunity to add custom CSS for even more beautification.
Final Thoughts
This post shows one of the most effective ways to style contact form 7 in Divi. Now you can convince your visitors with an interactive contact form. Don’t hesitate to share any thoughts, questions, or suggestions. Please write in the comment box below to let us know.
0 Comments