How to create a pop-up WordPress Email Contact Form

The are many WordPress form plugins for creating email contact forms for your blog or website. Contact Form 7 is my favorite form plugin, allowing you to embed email contact forms directly in your WordPress pages or posts.

An embedded form is usually sufficient, but what if you want your email form to appear in a pop-up when your visitor clicks a Contact Us link? In order to create a pop-up you must use two WordPress plugins together: Easy FancyBox and Contact Form 7.

1. First, install the Contact Form 7 and the Easy FancyBox plugins.

WordPress plugin install screen

2. For simplicity, we’ll use the example email form already created in Contact Form 7. The Contact Form administration page  displays the code you must cut and paste into your WordPress editor to generate the form.

Contact Form 7

3. Create a new page in WordPress. To include the email form, you have to paste the code contained in brackets from the Contact Form 7 administration page into your page. Ensure you paste the code exactly as it appears.

WordPress page edit screen

4. You now have your WordPress form appearing on a page in your site. Now, instead of being embedded in the page, you want it to pop-up and overlay the page when a visitor clicks a link. That’s where the Easy FancyBox plugin comes in. With Easy FancyBox, you can make any page element appear in a pop-up window. Edit your new page, click the HTML tab, and add the following HTML.

<a href="#contact_form_pop">Contact Us</a>

<div style="display:none">
    <div id="contact_form_pop">
[contact-form-7 404 "Not Found"] </div> </div>

Easy FancyBox HTML

5. You now have a link that launches your WordPress form in a pop-up window. Congratulations. You’ll probably want to do some CSS styling of the email form to ensure that the height and width are correct and that error messages are contain within the pop-up, but this should be enough to get you started.

WordPress pop-up contact form

By |2016-11-02T17:15:16+00:00November 19th, 2012|Our 2 Cents, Our Blog, SmackTalk|0 Comments

About the Author:

Leave A Comment

Did You Know….

GWEN-GARCIA-LEETS-IMAGEN-OFICIAL-SWN..Gwen Is the official spokeswoman of Smackwagon Design! GWEN Garcia Leets, is also sponsored by other internationally renowned companies. GWEN Currently is a host on an entertaining television program in Mexico called Marathon TeleHit

Interested in learning more about this beauty ? Click here to view GWEN's website to & keep you always informed of her most recent projects and events


Sharing is Awesome, Do It!

Share Smackwagon's web design company with your friends