How To Open Contact Form 7 in Pop Up in WordPress

Contact Form 7 in Pop Up

If you want to create a automatic pop up on your wordpress website’s home page load then there are just two simple steps to do this.

So to do this we need two plugins Contact Form 7 and Easy FancyBox.

After installing these two plugins we just need to add code in our home page in wordpress editor.

<a href="#form_pop" class="fancybox" id='fancybox-auto' style="position: absolute;top: 50%;visibility:hidden">Contact Us</a>

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

Below is the screenshot how to put the code.

If your home page changes time to time like blog page is your home page and after some time you make static page as your home page then you need to move your code so to come over this just add this code in your theme header.php any where below body tag.

<?php if(is_front_page()) { ?>	

<a href="#form_pop" class="fancybox" id='fancybox-auto' style="position: absolute;top: 50%;visibility:hidden">Contact Us</a>

<div style="display:none" class="fancybox-hidden">
    <div id="form_pop">
        <?php echo do_shortcode('[contact-form-7 404 "Not Found"]'); ?>
    </div>
</div>

<?php } ?>

Now when user open the website the pop up will appear with contact form.

Keep it simple 🙂