How to Create a Powerful WordPress Lightbox Contact Form

When it comes to interaction on the many WordPress blogs around the world, most website administrators simply assume that the comments section appended to each of their posts will be "good enough" for their users. While those comment forms are actually quite useful, and they encourage the kind of user engagement that can really help boost a site's search engine optimization, they are really not meant to replace direct user-to-author comment through WordPress.

How to Create a Powerful WordPress Lightbox Contact Form

Indeed, even in a world where comments seem to function as the primary source of interaction, a contact form is often needed for more personal or private concerns, or those that are simply not relevant to any entry currently posted to the website's homepage.

How to Create a Powerful WordPress Lightbox Contact Form

These comment forms come in a number of varieties, but most of them are pretty inconvenient to use. That inconvenience can cause their use to be limited, and most users won't bother to load a separate page just to contact the site's author or administrator users. Instead, they'll fill up the comments with attempts at contacting someone, only to be overlooked.

In a world that is increasingly transitioning to AJAX designs, however, this usability headache can be solved by placing the contact form into a lightbox. Also known as a modal box, this placement allows the contact form to be kept as a mere link in the sidebar.

When clicked, a box will load on top of the current page - no matter where a user is located within the website - and contact will be enabled. This is best done with a combination of useful WordPress plug-ins.

Typically, it involves one plugin for the contact form and another for the modal box. Here's how it's done.

Step 1: Obtain the Best Plug-in for Generating a Contact Form

As far as WordPress is concerned, one of the best contact form plug-ins to use for this task is Contact Form 7. The plug-in has been around for quite some time, and its developers have worked on making it the right combination of powerful and usable.

Administrators who create a contact form with this plug-in can do the vast majority of the work within the WordPress Dashboard, using the plug-in's customized control panel.

Contact Form 7

The plug-in can be obtained on the WordPress.org website, within the Extend section of the site. It can also be installed by visiting the Add Plugin link within the WordPress Dashboard's sidebar. There, administrators can use the search box to conduct a search for Contact Form 7.

When the plug-in appears, it will have an Install button next to it. Clicking this button will begin the process, automating everything from the file upload process to the activation of the plug-in itself.

Step 2: Create a Contact Form with the Contact Form 7 Plug-in for WordPress

With the plug-in installed and activated, it's time to create a great contact form for the website. Thanks to the custom control panel page installed to the Dashboard by the Contact Form 7 plug-in, this is actually exceedingly easy. To get to the custom control panel page, expand the "Settings" area of the Dashboard's sidebar.

There, a new Contact link will appear. Click this link, and the options for the plug-in will appear.

This custom control panel page will be split into four quadrants. The top of the page is labeled Form, and is responsible for creating the contact form itself. The second half of the page is dedicated to the email settings, including what each email will look like when it is generated by the form.

Creating the form involves the use of plug-in-specific shortcodes that will generate HTML form elements on the website. There are a few shortcodes available for use here:

  • email produces a one-line text field that takes the visitor's email address and requires a proper email address to be entered into the box before submission can take place.
  • text will create a one-line text field most suitable for things like the visitor's name or the subject of their message.
  • textarea will generate a multi-line text box that can be used to write the body of the message to the site's author or administrator.
  • submit creates the submission button needed in order for the message to be sent after all of the available fields have been produced.

To customize the content of any shortcode, administrators can add a few elements to it. Adding an asterisk (*) to the shortcode means that it will be required before the visitor can submit their message to the site's administrator.

If any text is written after the shortcode label, it will appear as default text in the produced HTML form element. For example, a name field that was required and contained the default text, Your Name, would look like this:

[ text 1= "Your" 2="Name" language="*" ][ /text ]

The submission button's text can also be customized by following submit with some generic text, like so:

[submit Contact Us!]

When the form has been successfully created, click the "Generate" button on the right hand side of the control panel page. This will produce a shortcode at the top of the page that will be placed into a large, brown box. Copy this shortcode into a text document, as it will be needed in a later step of this process when creating the lightbox element of the form.

The plug-in will automatically fill in relevant email settings that are taken from the WordPress Dashboard's own settings. If these default settings are not correct, be sure to update them and then save the new settings before moving on to the next part of this tutorial.

The control panel page will also allow for semantic customization of the email that gets sent to administrators when they've been contacted. If customizations are desired here, make them before moving on.

Step 3: Bringing a Lightbox Into the Equation

The contact form produced by Contact Form 7 is generated as a shortcode, and that shortcode can be placed in any post or page body that is stored within the WordPress database. It can be placed outside of those areas, and inserted directly into a template file, using WordPress' do_shortcode function. For the purposes of this tutorial, we're going to use the shortcode in its most basic form. It will be added to the second plug-in that makes a modal contact form possible.

Form Lightbox

That plugin is known as Form Lightbox. It's easily one of the simplest plug-ins available when turning basic XHTML form elements into a pop-up window when using WordPress. Just like Contact Form 7, it can be found at WordPress.org and uploaded to the server via an FTP client. It can also be automatically downloaded, installed, and activated within the WordPress Dashboard.

Once it has been activated, it will install its own custom control panel page in the Settings area of the WordPress Dashboard. Expand that section and look for the new Form Lightbox page. Here, settings related to the actual lightbox itself can be customized, including the appearance of the lightbox that gets produced when clicking on the contact form's link.

Next, navigate to the Add Post page in the Dashboard. There, a new box will appear in the right hand sidebar, labeled Add Form Lightbox. Click this link in order to reveal a window that will ask for basic settings relating to the lightbox and its content.

The first required information is the link text. This might be something like Contact Me or Get in Touch with Us. Whatever it is, make sure this box is filled in before proceeding. Next, the link title will need to be determined. Generally, this can be set as contact or contactform. Use something that's easy to remember and identify in the future.

The next box is probably the most important. Labeled Form Code, this is the area where the actual form will be placed so that it can appear within the modal window that pops up when the link is clicked. The code that goes into this box should be the shortcode generated by the Contact Form 7 plug-in earlier in the tutorial. That code was set aside specifically so it could be copied and pasted here. The shortcode will look like a modified version of this:

[contact-form-7 id="123456789" title="My Contact Form"]

After this has been pasted into the Form Code section, the entire thing can be saved. A new shortcode will now be inserted into the entry's body, or the page's content. That shortcode will be the one produced by the Form Lightbox plug-in, not the Contact Form 7 plug-in. It will look something like this:

[formlightbox_call title="contactform" class="132935472"]

If the form is supposed to appear within an entry or on a page, then the job is basically done. The shortcode will create a link that reads Contact Us. Upon being clicked, that link will produce a lightbox that displays the contact form over top of the page's existing content. After submission, the lightbox will close and the user will be returned to the page.

Step 4: Placing the Contact Form in the Sidebar or Other Templates

Finally, it's worth noting that the shortcode produced in the step above can be used in templates by taking advantage of a simple WordPress function. That function actually takes shortcodes and turns them into a PHP variable that can be inserted into template files. It looks like the following example:

<?php echo do_shortcode ('[formlightbox_call title="contactform" class="132935472"]'); ?>

Step 5: Bug Test and Enjoy

After the shortcode has been generated, and placed within a post, page, or template file where the administrator desires, it's time to test the shortcode and ensure that it functions according to plan.

If the lightbox and contact form work, and if the generated email contains the right information, then the process is complete and an all-new way of reader-writer interaction has been enabled with relatively minimal work!

Conclusion

How do you customize your contact form? Do you use a lightbox for your contact form? Share your comments with us.

Opinions expressed in this article are those of the author and not necessarily those of Onextrapixel.