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

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 administration page

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.

Contact Form in Page

WordPress page edit screen

Wordpress Contact Form

WordPress email form

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" class="fancybox">Contact Us</a>

<div style="display:none" class="fancybox-hidden">
    <div id="contact_form_pop">
        [contact-form 1 "Contact form 1"]
    </div>
</div>
Contact Form Fancy Box HTML

Easy FancyBox HTML

Wordpress Contact Us Pop-up

WordPress 'Contact Us' email link

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 Form Pop-up

WordPress pop-up contact form

  15 Responses to “How to create a pop-up WordPress email contact form”

  1. This sounds very interesting. It would be better if you could place a demo together with this post so that we can see how it works. Many thanks for the tutorial anyway, it hs been very helpful.

  2. I cant read the code you put in your image, its the only image that is not included in the slideshow. Could you possible email me the code you used to have the fancy box plug in work?
    Thanks,

  3. Sorry about that.

    The image is now in the slideshow, and I added the HTML code to the article for easy cut and paste. Not sure why I didn’t do that to begin with.

  4. Thanks!

  5. I love the concept of the plugin however for some odd reason when it opens the pop-up….there are 2 pop up forms! Any suggestions? Here is the link to the pop-up form http://360realtyportal.com/tester/

  6. I figured it out…I just deactivated the easy fancybox plugin….they must have added some pop-up function to the core of wordpress or something?

  7. nope, that makes it so that when you click on the popup form it just dissapears….any suggestions? :)

    Thanks!

  8. I figured out that it was my theme :) Is there any way to replace the “Contact Me” text with an image? Thanks!!! LOve the plugin!

  9. Thank a lot for a wonderful tutorial. Its really helpful.

  10. Thank you very much for writing this up. Saved me several hours of work and it works great.

  11. Thank you very much! Great. How can I use a Navigation Link to open the popup directly?

  12. Hi, I have implemented the solution here. Works pretty good. The issue I have is I have two widgets that each have a different form popup. I have added the code to the widgets with the separate form shortcode, the problem is that the same form pops up for both widgets. Any ideas?

  13. Absolutely wonderful guidance from this article. Many many thanks as it saved me a lot of time and resources. I used that html code in my header.php somewhere above navigation, but the [contact form...] shortcode itself didn’t work out. So I used and it worked like a charm!

  14. Just a question.
    This works great when you have only one contact form on page but for example if you have two or more forms and you send inquiry from the first form at the bottom you’ll get a message “thanks, your message has been sent successfully” and now if you want to send another inquiry from the same page for something else you’ll get a popup with already shown screen “thanks, your message has been sent successfully”

  15. very nice tutorial ! thanks !

    is there a way to have multiple and different links to popup forms allowing to contact comment author on a same page ?

    Fred

 Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

   
© 2010 Geektastical Suffusion theme by Sayontan Sinha