Hello guys! Today I am going to show you how to add a Popup Contact Form in Divi without using any plugins. Not only a contact form. You can add anything you want to the modal window which we are going to create now.

Just click on the below button to check how it works. Wonderful!  isn’t it? 🙂

STEP ONE – Add popup contact form in Divi

Let’s start by adding our form. Here I am creating a new Section and giving it a class ‘modal-wrapper‘.  You have to make some changes here. For the Section Background use a transparent color. I am using rgba(22,24,56,0.61) value to give a dark shade. This section act as a background dimmer for the popup window.

Now you have to add your Row. I am using a single column row here with some customization.
Give it a white background30px padding on all 4 sides in Spacing section. 4px border radius on Border section and a Box shadow(if you want the same design as mine). You can make adjustment to match your website. Then give it an ID ‘modal-contact’.

Finally we have to make the whole section hidden. You can do that now and work on the wireframe view. I recommend that as we have to add some positioning in the row too. It will not work perfectly on the visual builder.  Go to Advanced Setting > Custom CSS section and put ‘display:none;’ in the Main Element. That’s for the Section.

Now you have to add some Custom CSS to the Row Settings. Go to Advanced Settings > Custom CSS and put the below code in Main Element section.

* Just play with the design until you get what you want. I make it 57% width on desktop and 100% width on Tablet and Phone. 

position: fixed;
z-index: 99999;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
popup contact form in divi
popup contact form in divi
divi form

OK. Now let’s add the Close Button to the popup window. I am using a Blurb Module here but only using the icon with some customizations and some custom CSS. Most importantly, add an ID ‘close-btn’ to the blurb module. Turn on the Use Icons and pick an icon. Got to Design >  Image & Icon. Pick an Icon color, Use Icon Font Size to ‘Yes‘ and give 32px as the icon size.

popup contact form in Divi

Copy the below CSS snippet and paste it in Custom CSS > Main Element section in the blurb module to place the closing button to the edge of the window.

popup contact form in Divi
position:absolute;
z-index: 99999;
top: 0px;
right: 0;
cursor:pointer;
Then add your contact form or what ever content you want.  Finally this is what I have done.
popup contact form in Divi
Below is the whole section in wireframe view.
popup contact form in Divi

STEP TWO – Add popup contact form in Divi

Let’s create a button to trigger/open up the modal window (Popup). Here you can switch back to the visual builder and work on there.

Add a button module and give it a class name of ‘trigger-btn’. You can style it the way you want. But do not forget to add a ‘#’ in the link field. Otherwise the page will reload when you click on the button. We just need to open the popup, not to reload. right 🙂

divi form

STEP THREE

Lets do the magic. Here we are going to use some CSS and some jQuery. You can paste these codes on Divi Theme Settings > Integration section. But if you are going to use this form only on one specific page I recommend you to use the code module and put at the bottom of the page.
On my version I simply added a code module below the button.




That’s how to add popup contact form in divi guys. It must work without any errors and will looks nice on all devices. If you have any questions or need any help do not hesitate to leave a comment below.

Also, don’t forget to read our blog to find more exciting things. 

 

Pin It on Pinterest