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 background. 30px 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.
transform: translateX(-50%) translateY(-50%);
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.
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.
STEP TWO – Add popup contact form in Divi
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 🙂
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.