Popup Contact Form in WordPress & Divi

CSS, Divi, HTML5, WordPress

Using a Popup in Divi to Display a Contact Form

A quick and easy shortcode only solution for a popup on your WordPress site. I’ll be using one of the features in Shortcodes Ultimate, for the lightbox, and for the form I’m using a Contact Form 7 Shortcode.

We will be putting this together:

Shortcodes Ultimate is a plugin I use frequently. For me, it compliments Divi, and is useful on any site that I have done, After installation, you will have a new tab in your text editor, “insert shortcode”.

This form pop-up solution will use 2 of the shortcodes, “lightbox” and “lightbox content”.

You could replace the form shortcode with any other shortcode, or if you like, the actual HTML code for your form. I’m keeping this short and simple, with no added scripts, however, once you have the pop-up function working for you…experiment!

The PopUp

With your text-module open and an area selected, click the tab to insert shortcode. (image 1)

Select the Lightbox option and fill in the options as they apply. In our case “Inline Content”, assign a trigger Id for the popup source, or in this case, #popup. I have used a button shortcode, and a Click Here statement, you can put whatever trigger object or text you like here, making sure that your trigger is placed in the lightbox content field. 

You should now have this:

1
2
3
[su_lightbox type="inline" src="#popup"]
[su_button] Click Here to open popup [/su_button]
[/su_lightbox]

Next select the Insert Shortcode button and select the Lightbox Content option. (image 2)

Fill in the fields with your id, which is the source option you chose above, in my case “popup”, in the content area, place your form shortcode, or whatever you would like to display in your popup.

You should now have this:

1
2
3
4
5
[su_lightbox type="inline" src="#popup"]
[su_button] Click Here to open popup [/su_button]
[/su_lightbox][su_lightbox_content id="popup"]
[contact-form-7 id="5356" title="Contact form 1"]
[/su_lightbox_content]

And that’s it, you should now have the popup and form working.

Hope this helps!




Pin It on Pinterest

Share This

Share this post with your friends!

%d bloggers like this: