Responsive image

Call Us Today! 305 434 4698

Email : info@bestwebsitesdesigner.com

Banner Image2
Recent Articles
Search Article
Article Category
How to Open contact form 7 in pop up window WordPress Tutorial
Monday, May 6, 2013    9:20 am

While developing the WordPress Website, many times we have to include the contact form.
There are many types of form plug-ins like Contact Form 7, iphorm-form-builder and many more for creating email contact forms. But, Contact Form 7 is the most preferred one, as it allows inserting email contact form, directly in WordPress pages or posts.

If you have any difficulty in creating this contact form, then go through the tutorial provided by bestwebsitesdesigner. This article will guide you on how to make pop-up contact form in WordPress Website.

Generally, Contact Form 7 appears on the page statically, but for making website more attractive and user-friendly we can open contact form in pop-up.

Follow following steps listed below.

1. Go to WordPress admin panel by using back end url like http://bestwebsitesdesigner.com/wp-admin

2. Go to plug-in which is on the left side of Dashboard Window.

3. After this, click on “add new option” and search for required plug-ins which are
A. Contact Form 7 (To create contact form)
B. Easy Fancy box (To make contact form appear in pop-up)

4. Install the Contact Form 7 and Easy Fancy Box plug-ins.

5. Create a new page in WordPress. For including the form, paste the code mentioned in brackets from the Contact Form 7 administration page into your page.

6. Now, the WordPress form will appear on your website. After creating contact form, add below code in the page where you want to show pop-up contact form. As you want it to pop-up when a visitors clicks on link, Easy FancyBox, can make it appear in a pop-up window.

CODE IS:

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

<div style=”display:none”>

<div id=”contact_form_pop”>

[contact-form-7 id="14" title="Contact form 1"] //To include contact form using shortcode//

</div>

</div>

7. Now, save it and reload the page. You will have the link that takes your WordPress form in a pop-up window. Ensure that height and width of form are correct, for doing this; you may have to do CSS styling of form.


To understand this process more properly you can watch the video here.

By: admin

[Go Back]