Would you like to create a Contact form in Divi that appears after clicking on a button?
In this Divi tutorial, we will show you how to create a Contact form which appears after clicking a button using nothing but Divi, jQuery code and CSS code.
Also read our guide on: Divi: How to create a sticky footer with "Reveal" effect
It's a great way to keep the visiteurs of your website focused on the action they committed to at the click of a button. It does not take them to a different page.
Preview
Below, you can take a quick look at what we'll be creating, then jump into the tutorial!
Preview on PC
Preview on phone and tablet
Create a new page with a predefined layout
Let's start by using a predefined layout from the Divi library. For this example, we will use the contact page of the Beauty Product Layout Pack .
Add a new page to your Website and give it a title, then select the option 'Use Divi Builder'.
We'll be using a pre-made layout from the Divi library for this example, so select 'Choose layout'.
Find and select the Home page of the layout 'Interior Design Company'.
Select 'Choose layout' to add the layout to your page.
We are now ready to continue our tutorial.
Create a section with the Button module
The first thing we will have to do is add a new section where we place the button that will allow the Contact form to show up.
See also: Divi: How to create a custom footer
Just add a standard section
Next, select a one-column row.
Once you've done that, add a Button module to it.
You can customize the button however you want, but you need to make sure the button URL starts with '#' followed by something else. You can't just leave it blank or just use the '#' character. By adding '#' and text, the page will not move once you click the button. If you leave it blank, the page will refresh on click. And if you only use '#', you will be sent to the top of the page.
The next important thing we will need to do is assign a CSS class to the button. We will use this CSS class later in this article in the jQuery code to ensure that the contact form appears after clicking. The class we will need to assign to the button is simply “button”.
- CSS class: button
Create a PC version contact form
The next thing we will need to do is create the desktop contact form that will appear once someone clicks the button we created in the previous part of this article. Later in this article, we will also show you how to create the mobile version.
Add a new standard section
Start by adding a new standard section to the page you're working on. In the section settings, go to the Advanced tab add "popup" to the CSS Class field.
Scroll down that same tab and place the following lines of CSS code in the Before field of the Custom CSS subcategory:
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;
By adding this, we ensure that the section takes up the entire tab. You can adjust the background color in the CSS code to create the desired background overlay. In this case we use black color with some transparency. In this same tab, also add the following line of CSS code to the main element:
display: none;
The last thing we will have to do in the Advanced tab is to deactivate the section on the phone and tablet in the Visibility subcategory.
Add a row to two columns
Continue by adding a two-column row and navigate to the tab Style.
- Use Custom Gutter Width: YES
- Maximum width: 1291px
Enter in the parameters of each of the columns.
Modify the internal margins (Top, Left and Right) as follows:
- Internal Margin (Top, Left, Right): 30px
Finish by going to the Advanced tab. In the main element, add the following lines of CSS code:
transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;
Add the first Text module
Once you've made all the changes to the section and row, it's time to add the various modules you want to display.
The first thing we'll add is the title that appears. Start by adding a new Text module to the first column of the row, write the text in the tab Contents and switch to the tab Style.
In the Style tab, we used the following settings for the Text subcategory:
- Header Font: Lobster
- Soft Light Header: Bold Text
- Text alignment: Bold
- Header text color: #002282
- Header Text Size: 37px
- Header line height: 1,7 em
Add a second Text module
Continue by adding a new Text module and type the text you want to appear in the Content tab. Switch to the Style tab and apply the following settings to the Text subcategory:
- Text alignment: Center
- Text Font: Arial
- Text Text Size: 13px
- Text Color Text: #002282
- Text line height: 1,7 em
Add a 'Follow us on social networks' module
Next, we will also add the 'Follow us on social media' module to the first column. In this case, we have chosen three social media icons; Facebook, Twitter and Instagram.
The last thing we will need to do is add padding (Left) to this module in the Advanced tab. Add the following line of CSS code to the main element:
padding-left: 40%;
Add a Contact Form module
Then we can move to the second column in the row. In this column, the first thing we are going to place is the Contact Form module.
For this example, we have only chosen two fields; name and email.
Once you've added the Contact Form module, navigate to the Style tab of the Contact Form module and make the following changes to the Fields subcategory:
- Text Color Fields: #002282
- Text Size Fields: #002282
- Field line height: 1,7 em
On that same tab, make the following changes to the Button subcategory:
- Use custom styles for Button: Yes
- Text size button: 20
- Button text color: #FFFFFF
- Background button: #0086c4
- Button Border Width: 2
- Border Radius button: 3
Switch to the Advanced tab and add a margin of 5%.
Add a Summary module
Another thing we will need to add to the second column is a Summary module. The only thing we need this module for is the exit icon at the top right of the popup window. Choose the next icon from the list of icons and leave everything else blank.
Then go to the Advanced tab and type “close” as the CSS class.
In this same tab, add the following lines of code to the main element of the custom CSS subcategory:
position: absolute;
top: -45px;
right: -30px;
cursor: pointer;
Apply a gradient fill to the line
Finally, we'll add a nice gradient background to the line. Open the settings and apply the following changes to the gradient background option:
- First gradient color: #FFFFFF
- Second gradient color: #0c71c3
- Gradient Type: Linear
- Gradient direction: 124 degrees
- Starting position: 50%
- Final position: 50%
Create a contact form for tablet and phone
Now that we've created the PC version, the tablet and phone version will go much faster. Most of the modules we used for the PC version are the same as for the mobile version.
Duplicate previous section
Instead of disabling it for phone and tablet, as we did for the PC version, we will disable the PC version in the Visibility subcategory in the module settings:
Modify the CSS code of the Summary module
Instead of using the desktop code, use the following instead:
position: absolute;
top: -15px;
right: -25px;
cursor: pointer;
Apply a gradient fill to the line
For the mobile version, we use different settings for the gradient background of the line:
- First gradient color: #FFFFFF
- Second gradient color: #0c71c3
- Gradient Type: Linear
- Gradient direction: 180 degrees
- Starting position: 40%
- Final position: 40%
Add jQuery code
The last thing we will need to do for this tutorial is add the jQuery code. Add a Code module and insert the following JQuery code:
<script type="text/javascript">
jQuery(function($){
jQuery('.button').click(function() {
jQuery('.popup').css('display', 'block');
});
jQuery('.close').click(function() {
jQuery('.popup').css('display', 'none');
});});
</script>
Result
If you follow the message step by step, you should be able to get the following result on computer:
And the following result on tablets and phones:
Download DIVI Now!!!
Conclusion
In this article, we've shown you how to create a one-click contact form. Use this method to get in touch with your visiteurs is subtle but effective.
We hope this tutorial will inspire you for your next Divi projects. If you have any concerns or suggestions, find us in the comments section to talk about it.
You can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
