Pop-up Contact Form using Divi Gif

Want to learn how to create a pop-up contact form using Divi without requiring a plugin? If the answer is yes, continue reading.

1. Lets start with the logic behind this function. We are going to need a small bit of jQuery code. Copy the snippet below and head over to Divi > Theme Options > Integration and paste the code in the body.


<script>
jQuery(document).ready(function() {

jQuery('.button_popup').click(function() {
jQuery('.form_open').css( {'display' : 'block'});
});

jQuery('.form_close .et-pb-icon').click(function() {
jQuery('.form_open').css( {'display' : 'none'});
});

});
</script>

The code snippet above is pretty basic. I coded 2 click functions that will apply a CSS command to targeted classes. The first click function states when someone clicks a div with a class of “button_popup” it will target the class of “form_open” and apply a CSS command of “display: block” (form pops open).



The second click function states when someone clicks a div with a class of “form_close > et-pb-icon” it will target the class of “form_open” and apply a CSS command of “display: none” (form closes).

In my demo, I used a fullwidth header module and targeted the button, but for this tutorial you can use any button. So add a section and insert a button module and input the following class in Custom CSS.
Note: Be sure to a # in the buttons URL or else the popup will not remain open.

button_popup

2. Now add a standard section and input the following code and class in the Custom CSS.

form_open
content: "";
background: rgba(0,0,0, 0.7);
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100;
display: none;

Now add a one column row and insert a Contact Form module. Use the following settings as a basis (be sure to set a background color in Advanced Design Settings).

3. Now input the following code in the Custom CSS.

et-waypoint et_pb_animation_fade_in
position: fixed;
top: 50%;
left: 50%;
transform: translatey(-50%) translatex(-50%);
z-index: 100;
border-radius: 5px;
border: 5px solid #00C3AA;

4. Lastly, insert a Blurb module right beneath the contact form and use the following settings.

In the Advanced Design Settings change the icon size to 30px.

Now input the following code in the Custom CSS of the Blurb Module.

form_close
position: absolute;
top: -60px;
right: -60px;
cursor: pointer;

Now that about wraps it. If you followed the tutorial accurately, the form should pop-up when clicking on the designated button. If not, download the demo and cross reference your code to identify any inconsistencies. Also, if coding doesn’t float your boat, try this tutorial tutorial.

Till the next time, happy coding Divi Dezigners!

Sign Up to download this module

0 Comments

Subscribe!

Join our mailing list to receive tips, tricks, and new DD theme releases.

You have Successfully Subscribed!