Hello Divi lovers. Today I am going to show you how to add a Popup Contact Form in Divi without using any plugins. But not only a contact form, you can add anything you want to the modal window what we are going to create.
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(12,12,12,0.31) value to give dark shade. This section act as a background dimmer for the popup window. Then you have to go to Advanced Setting > Custom CSS section and put ‘display:none‘ in the Main Element. That’s it for the Section.
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. 10px border radius on Border section and a Box shadow. I am using the second option with default settings here. You can make adjustment to match your website. Then give it an ID ‘modal-contact’.
Finally 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.
OK. Now let’s add the Close Button. 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.
Then add your contact form or what ever content you want. Finally this is what I have done.
You must have a button which will act as the trigger for the popup window. I used a text module here and added an ‘a‘ tag without a link. And added the class ‘trigger-btn’. You can style it the way you want. I am not using the button module here. The reason is when I clicked on the button it reloaded the page. So I decided to go with a custom designed button here.
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 custom designed button.
Thats All. 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.
See how it works.