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%);

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.

position:absolute;
z-index: 99999;
top: 0px;
right: 0;
cursor:pointer;

Then add your contact form or whatever content you want.  Finally, this is what I have done.

Below is the whole section in wireframe view.

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 🙂

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.

jQuery(function($) { 
  $('.trigger-btn').click(function() { 
    $('.modal-wrapper').css('display','block');
    $(window).css('background','rgba(0,0,0,0.34)') 
    $('.modal-wrapper').addClass('dark-background'); 
  }); 
  $('#close-btn').click(function() { 
    $('.modal-wrapper').css('display','none'); 
    $('.modal-wrapper').removeClass('dark-background'); 
  }); 
});

.dark-background{ 
  position: fixed; 
  width: 100%; 
  height: 100%; 
  top: 0; 
  left: 0; 
  z-index: 9999; 
}

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. 

23 thoughts on “How to add a popup contact form in Divi without any plugins

  1. The “Display:None” on the custom CSS section hides all created elements
    Followed the whole steps. It didn’t work….Help

    1. Hi Thaddy, Yes, it must be hidden to show when clicked. you can add the code display:none; once you finalize the design

  2. Hi Sampath.
    That’s a great tutorial :D!!
    Thanks for sharing this tips with us!
    However I have a question. How can I implement your code if I have a lot of little popups to open (a kind of help system :))?
    TIA for any further information :)!!
    All the best,
    Pierre.

    1. Hi Pierre, You can use different ID’s or Classes and copy the jQuery code. That way it will work without any problem.

  3. Thank you for this great tutorial.
    I got it to work, but after sending the message, the success message is displayed above the contact form, and a second (identical) contact form appears below it. Any idea how this could happen? Or, even better, how I could fix it, please?

  4. Great tutorial. I followed the steps and it is working like a charm. I have just one question: pop-up form appears on the top of the page (triggering the action, page scrolls to to top of page). Hw can i make it to pop up at the same place where the trigger button is?

  5. Hi! this works really well…except for mobile! could you add a section on how to modify the mobile fields? on mobile it shows as a long and narrow single column.

    Thanks!

  6. Hi Sampath, thanks for sharing this. Could you give instructions on how to create a popup that appears immediately as the homepage loads (without a button click)? I have a friend who needs to put a COVID-19 update on their website, and they’d like it to be a popup that is seen immediately. Ideally, the popup would include a button that links to a page with more information. Thanks for any help you can provide, and I hope you are safe and well.

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This