Have Form Open in Lightbox

7/20/16 Update: After finding out about the comment below, I now recommend you use https://wordpress.org/plugins/popups/ instead.

Having a form open up in a lightbox is a common request. There are many plugins that do this for images, videos, etc, but why not forms? It took me a while, but I finally came across this plugin that does just that: Form Lightbox.

It works great with Gravity Forms, which I highly recommend. Read more about Gravity Forms here. But it also works with Contact Form 7, or really any other form that generates a shortcode for you.

Once you install the plugin, when you go into your page or post editor, you will see a new icon next to the Add Media button.

But before you click on that icon, you will need to get your Gravity Forms shortcode for the form you want to insert. I get that by using the Add Form button right next to that icon. I use that to insert the shortcode and then I copy and cut the code out of the page or post. Then click on the new little icon and it will give you a popup box that looks like this:

You will see I have already pasted my Gravity Forms shortcode. Be sure to include ajax="true" in your shortcode.

Once I filled in the title and text link as Request Consultation, it gave me this shortcode:

click image to view larger

What you fill into the link title box will appear at the bottom of the popup. Here’s a sample of what it can look like:

Or see it in action by clicking on “Sign up for E-Newsletter” at the very top left of the page here.

One downside note. As of the latest use of this plugin with WordPress 4.0, when I tried to insert it into a page, nothing showed in the popup box on the backend so I had to go to a new post to actually generate the shortcode.

Also, if you are already using a theme or another plugin that is using shortcodes, the nested shortcodes can cause problems. For example, I know the Avada theme is very popular now and is based on shortcodes. If you want one of the Avada buttons to open in a lightbox, I found it best to recreate the button shortcode CSS like this:

.cboxElement {
   color: #ffffff;
   background-color: #46a9dd;
   padding: 12px 29px;
   text-transform:uppercase;
   font-size: 14px;
   font-weight:bold;
}
.cboxElement:hover {
   color: #ffffff; 
   background-color: #000000;
}

That way I didn’t use any of the Avada shortcode, but adding the button simply by using the above CSS with the default shortcode generated by the Lightbox plugin. And you can see it’s out put here: