Looking to make a lightbox popup in WordPress? This step-by-step guide will help you quickly make WordPress lightbox forms that really pop!
Approximate read time: 7 minutes
Lightboxes can be powerful tools on your website.
Like a spotlight on an actor ?, a lightbox draws attention to the main attraction of your site. Whether it’s an image gallery, chatbot, or contact form, the main goal is to get visitors' attention.
So, this post will show you how to make a WordPress lightbox form in two easy steps so you can put one on your site today!
Let’s get started ?
What is a lightbox popup and why use one?
A WordPress lightbox form is a small popup appearing over the page when a user clicks a call to action (usually either linked text or a button).
Instead of taking visitors to a new page or blocking the entire page, the lightbox pops up over the content and slightly dims the background, giving it the "lightbox" effect.
What's the difference between a lightbox and a popup?
A lightbox is a user-triggered overlay that appears on top of the page to showcase an image, video, or other content. A popup is a window that appears on page loading, exit intent, or scrolling, and can interrupt the user's experience if not designed carefully.
Still not clear? Bear with us for a moment while we use a silly analogy. Let's say we're at a party. ?
A Lightbox is like a guest that seems cool, so you approach them to strike up a conversation. They're interesting and then the rest of the party fades into the background. ?
On the other hand, a popup is like a party crasher who shows up uninvited.
Sometimes they're a breath of fresh air, bringing new energy and – if you're lucky – more food and drink (or in our case, a discount). ? Other times, they're annoying and you just want them to go away.
So, why use a lightbox popup form?
Using a lightbox popup form gives your site visitors a more seamless and unobtrusive experience. Say so long to page loads and weird redirects to get to your forms ?.
And that’s super important when every click and every second count.
Lightbox popups also limit distractions — users don’t have to go to a new page or search around for where to go. They’ll stay focused on your form and your conversion rates will soar! ?
Let's look at a few different reasons to create a lightbox popup:
- ? Lightbox popups for chatbots
- ? WordPress forms in a lightbox popup
- ?️ A video lightbox plays a YouTube/Vimeo video to get the visitor's attention
- ? Display lightbox images to highlight product photos
Does WordPress have a built-in lightbox popup?
WordPress does have a built-in lightbox popup, but it’s a bit limited compared to other options.
While it does the job, it lacks many features needed to make your website (and lightbox) stand out.
The good news is that a bootstrap lightbox plugin can fix that fast!
And we’ve got the best WordPress lightbox plugin for you here ?.
How to make a lightbox popup form in WordPress
The quickest and easiest way to make a simple lightbox in WordPress is with the Formidable Forms plugin.
Formidable is the most advanced form builder for WordPress. And when it’s not working hard building forms, it doubles as a lightbox popup plugin too!
You can try the free version to check out the plugin, but you'll need the premium form maker to get the lightbox popup form feature.
So, get Formidable installed and activated, then we’ll just need to activate the Bootstrap Modal add-on.
To do it, go to Formidable → Add-ons. Next, find the Bootstrap Modal add-on and click Install.
Once it’s activated, it’s two simple steps to make your lightbox form:
But wait a minute… what’s this “Bootstrap Modal” business?
I thought you said we were going to make a lightbox form. ? We are!
The terms lightbox and modal are somewhat interchangeable when making popup forms in WordPress. They’re both basically popup forms that are triggered on a click.
Here are some more Bootstrap modal popup examples so you can see exactly what we're talking about.
Whether you call it a lightbox popup form, a lightbox form, a modal form, or a WordPress Bootstrap modal form popup doesn't really matter.
Lightboxes tend to be used more frequently for enlarging images/videos on a page, but they work just as well for forms.
? Want to make a form that pops up based on extent intent, time on page, or scroll, without requiring the user to click? Try one of these WordPress popup plugins instead.
But enough semantics! Let’s get into action!
Step 1: Create your form and configure submission settings
First, we need a form to display in our lightbox popup.
So, we’ll head to the WordPress dashboard, then over to Formidable → Forms, and click Add New.
You can choose one of our pre-made templates to get started faster or pick Blank Template to build your own.
For our example, we’ll choose the Simple User Registration template, as it has all the fields
we need. Next, give the form a name and then click Create.
The plugin will take you to Formidable’s drag-and-drop form builder, where you can customize your form.
Add different fields, change the field labels, and customize the form to fit your website’s needs.
Once you’re finished, click Update to save your form ?.
Next, we need to customize the form’s settings. So, click on the Settings tab above the builder and then scroll down to the AJAX section under General.
Check the box Submit this form with AJAX ☑️. This setting will submit the form without refreshing the entire page, which we need for the lightbox to work properly.
Once you’ve activated this lightbox option, click Update to save your changes.
Still with us? Great! ?
One last thing, and we’ll be done!
Step 2: Display your Lightbox popup form
Now that we’ve got your form ready to show the world, let’s put it in the perfect place ?.
So, head to the post or page where you want to show your lightbox on your WordPress website.
First, we’ll add a new block in the WordPress editor. From the list of available elements, select the Formidable Modal.
Click on your newly created button to change the text to whatever you like.
Then, add your form to the lightbox by clicking on the lower section and hitting the + button to pull up the WordPress block options again.
Choose Formidable Forms, select your form from the dropdown, and you’re ready!
Then, Publish or Update your page/post, and your simple lightbox is live!
Now, when a user clicks your button, the lightbox form will pop up! ✨
All set to make some exciting lightbox forms?
And that’s it! You now have all you need to create a cool form that will seriously increase conversions!
Whether you need a WordPress gallery plugin to display images in a lightbox popup or want to show a simple newsletter signup form, you can do it with Formidable Forms and with any theme (including Elementor)!
If you want to learn more about creating other kinds of popup forms, check out this guide on how to make a popup form in WordPress!
Last, follow us on Twitter, Facebook, and YouTube for more incredible WordPress tips and tricks!
Read more about popups!
How To Make a Modal Survey in WordPress [Modals Made Easy!]
7 Bootstrap Modal Popup Examples Sure To Engage Your Users!
How To Add a WordPress Bootstrap Modal Popup (The Easy Way)Did you know that Formidable Forms is the best WordPress forms plugin available? Get started with our free plugin or try our full-featured form maker risk-free thanks to our 14-day money-back guarantee!