Wordpress Tutorial: How to Add a Form Inside of a Lightbox / Greybox
On a recent web design project, it became necessary to drop a newsletter sign-up area in a rather space-restricted footer. Instead of try to cram the form fields into the footer itself, or redirect the user to a sign-up form page, I opted to drop the form into a lightbox – or to be specific – a greybox.
This is not a tutorial for beginners – if you’re building your first site, or don’t know much about HTML, I’m sorry to say I didn’t get into too much hand-holding here. This tutorial was created with Wordpress 2.8.5, and I used the Greybox Integrator Plugin.
You might want to start off by installing the plugin through your Wordpress control panel, or through the plugin site.
For an example of what we’ll be doing, check out the site I was working on. Bottom left-hand corner of the page, there’s a “Click here to subscribe” button. Click it. You’ll see what I mean. The newsletter subscription box is not a normal pop-up. I didn’t have to plunder anything from HotScripts, or fumble around with javascript. Instead, the form pops up in a Lightbox (Greybox, specifically). This was done almost completely with available plug-ins and some easy HTML & PHP.
Step 1: Build the form
This bit might seem fairly simple. There’s a billion Wordpress plug-ins that will let you easily create forms, then drop a special tag that references that form onto a Wordpress page, and wallah.
Problem: You tell Greybox to reference the page which houses your form. Greybox loads that page – the ENTIRE page, meaning your site template will load into the Greybox window as well, and your users will be seeing double copies of your site. Not very slick. You just want Greybox to load the form, and only the form – no extras.
You’ve got two major solutions here:
The coder way: If you’re functional with PHP, you can get around this by dropping some easy if statements into your index.php page, ie, if the website is on the form page, don’t load the theme or any other graphics. Or, tell it to load a totally different template to do some hot-shot form styling. I’d throw in an example, but everyone’s page is a different story. This is probably the best method, as it allows you to still use Wordpress plugins and pages to create the sign-up form.
The HTML-er way: Not good at coding, but good with design? Open up your hosting account file manager or jump on FTP, and upload a few form pages that reside outside of the Wordpress directory structure, with a pre-made script that handles the form. You should already know how to create a functioning form, and there’s a hundred billion ways to do it. One way is to create four pages: yourform.html, yourformhandler.php, sent.html and error.html (it doesn’t matter what you name them).
Yourform.html will hold the form fields of your contact form (the main form). This is the page that greybox will reference. Error.html will hold nothing but an error message in case the form doesn’t process. Literally, something like:
<html>
<head>
<title>Form</title> <strong>(greybox handles the title)</strong>
</head>
<body>
<p>We're sorry, your form didn't go through. Want to <a href="yourform.htm">try again</a>? If not, please email us directly at <a href="yournormalcontactpage.htm">email@emailaddress.com</a></p>
</body>
</html>
Your sent.html should be similar, just a “Your form was sent successfully!”
yourformhandler.php will take care of form routing, redirecting the user to error.html if the mail didn’t go through, and redirecting to sent.html if it did. Etc.
Or you can skip all that, and use a form generator like Wufoo.
However you go about this, the end result should be a functioning form that resides outside of your Wordpress hierarchy.
About Greybox Integrator
Like many things in Wordpress, the Greybox functionality works with tags. When you install Greybox Integrator, a new tag button, similar to the wordress “link”, “more” and “lookup” tags, will appear in your page editing window. It’s called the GBI button. You can (and should) read more on exactly how to use Greybox by reading this.
Before moving forward, you should have Greybox integrator installed.
Step 2: In the appropriate page, add with a link to your form
In your Wordpress dashboard, navigate to the page where you want to add the form, or create a new page. Make sure you’re in HTML view, not “visual” view.
Type “Click here to subscribe!”, or any other text you’d like to use. Highlight the text you just typed, and with the text still highlighted, click the GBI button.
Enter “3″, and click OK.
Enter the path to your form. If you used the PHP method, and your form is a Wordpress page, enter the permalink to your form.
Enter a title.
Enter the width of your form – this is how wide your greybox window will be. Because my form only has two fields, I want to keep it small. If your form is larger, go ahead change the size to suit. Size should be entered in pixels.
Enter the height.
And there you go, a link is generated:
Now, when you go to your page or post on the front-end of your site, you’ll see the link to your form. Huzzah.
But what if you want to put the form outside of page content? Like in a sidebar, or a footer? Since greybox relies on tags to generate its links, you’ll still need to do step one and two above, creating a page, and then creating a greybox link in that, but then you’ll also need to pull the contents of your page into a div.
I found a great snippet of code for this, written by WordPress user stvwlf. Read more about it here on the Wordpress forums: http://wordpress.org/support/topic/266861
So, implementing a greybox on the sidebar or other non-content area requires a couple of extra steps, which are:
1. Create your form, as in step 1 above.
2. Create a new Wordpress page, and then follow the steps in step 2 above, to add a greybox link inside of that page.
3. Open up your index.php file, navigate to the place where you want to place your code, and inside of the <div> tags, drop this:
global $more;
$about = new WP_Query();
$about->query('pagename=newsletter-sign-up');
while ($about->have_posts()) : $about->the_post();
$more = false; // set $more to false to only get the first part of the post ?>
<?php the_content('Read the rest...'); ?>
<?php endwhile;
$more = true; // restore default $more behavior
?>
So, for example, if you want this in your footer, drop it between <div id=”footer”> and </div> (or whatever the div is called).
In the above code, you’ll need to change “newsletter-sign-up” in $about->query('pagename=newsletter-sign-up'); to the name of your own page. If you’re not using permalinks, you may need to change the query arguments to make sure your code can find, and is pointing to, the right page.
And that’s it!
