Looking to make a lightbox form in WordPress? This step-by-step guide will help you make a WordPress form lightbox in a few easy steps!
Approximate read time: 4 minutes
Lightboxes can be powerful tools on your website.
Like a spotlight on an actor, it 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 the visitor's attention.
And that’s where the lightbox comes in.
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 WordPress lightbox in WordPress, and why use one?
A WordPress lightbox form is a small popup that appears over the page when a user clicks some 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 (similar to Easy Fancybox).
But why use a lightbox form?
Simple. It provides a more seamless experience for your website visitor.
They don’t have to go to a new page or look around for where to go. The form pops up, and the background dims to highlight your form. Instead of waiting for page loads, your visitor fills out your form or views images/videos.
And that means a lot when every second moves your visitor closer to leaving your site.
So, here are some different uses for a lightbox form:
- Lightbox popups for chatbots
- Contact forms appear in the corner of the screen
- A video lightbox allows a YouTube/Vimeo video to get the visitor's attention
- Display lightbox images to highlight product display images
Does WordPress have a built-in lightbox?
WordPress does have a built-in lightbox, but it’s a bit limited compared to other options.
While it does the job, it lacks many features that make your website and lightbox stand out.
The good news is that you only need a form lightbox WordPress plugin to fix that issue.
And we’ve got the best WordPress lightbox plugin for you here ?.
How to make a lightbox form in WordPress
First things first, you’ll need Formidable Forms.
Formidable Forms is the most advanced form builder for WordPress, and it doubles as a form lightbox plugin for WordPress when it’s not working hard building forms.
You can try the free version, but you need to purchase a premium plan to get the lightbox form ability.
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:
- Create your form and configure submission settings
- Display your form
Let’s get into it.
Step 1: Create your form and configure submission settings
First, we need a form to display in the lightbox.
So, we’ll head to your WordPress dashboard, go to Formidable → Forms, and click Add New.
You can choose one of our premade templates to get you started faster or choose a Blank Template to customize it yourself.
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 it to fit your website’s needs.
Once you’re finished, click Update to save your changes.
Next, we need to customize the form’s settings. So, click Settings and 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.
Once this lightbox option is activated, click Update to save your changes.
Last, click the Embed button and choose Insert manually. Then, copy the code under WordPress shortcode.
You will need this in the next step.
Step 2: Display your form
Now that we’ve got your form ready to show the world, we need to find the place for it.
So, head to the post or page where you want to show your lightbox on your WordPress website.
On this page, we want to add a shortcode that looks like this:
[frmmodal-content label=”Click here”][formidable id=x][/frmmodal-content]Replace the x with your form ID/Key from the previous step. So, for example, it would look like this:
[frmmodal-content label=”Click here to login”][formidable id=1][/frmmodal-content]Then, publish or update your page/post, and your simple lightbox is live!
Now, users will click a simple Click here button to see your lightbox form.
Ready to make your lightbox form in WordPress?
And that’s it!
Whether you need a WordPress gallery plugin to display images in a 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 a popup with a WordPress plugin, check out this guide on making a popup 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 WordPress Popup Survey (The Easy Way)
How to Add a Mailchimp Popup to WordPress [Two Easy Ways!]
How To Make a Mailchimp Popup in WordPress (An Easy Guide)Did you know that Formidable Forms is one of the fastest WordPress form builder plugins available today? If you're not already using it, get started with our free plugin or the full-featured pro version!
Leave a Reply