How to create popup Contact Form in WordPress

How to create popup Contact Form in WordPress ? Is this a silly question. Answer is NO, there are so many ways you can achieve this. Here is the right place for the solution. Lets discuss most general and easy ways to do this.

01. How to create popup Contact Form in WordPress – Using a plugin

You can use a plugin to load your contact form up and running via a popup. Just install Easy FancyBox plugin. If you’re not familiar with installing a plugin take a look at how to install a plugin in WordPress. Hope you’re ready with the Contact Form, if you’re not familiar with creating Contact Forms in WordPress take a look at how to create a contact form with Contact Form 7. Once you’re are ready with both we can proceed.

Once you navigate to Contact menu in the Admin Panel you’ll see all forms available with the relevant Shortcode to each form. Among the all forms(if you have multiple)  you can find out the Short Code for the form. Once you copied the Short Code you just need to replace your Short Code with [your shortcode].

<a class="fancybox" href="#cf-popup">Contact Us</a>

<div class="fancybox-hidden" style="display: none;">

<div id="cf-popup">[your shortcode]</div>

</div>

Now save the page and once it saved you can view the page. You will realize amazing Popup Contact form is up and running. However you can use your own styles to make it look nicer.

02. How to create popup Contact Form in WordPress – Using Bootstrap

Condition: Bootstrap themes can use this method. Otherwise you need to enqueue Bootstrap CSS and JS files.

If you do not have any idea about enqueuing CSS and JS you can follow this tutorial on how to enqueue CSS and JS in WordPress. Once you’re ready you just need to use the built in Bootstrap Modal function. Here is the code and nothing to explain here. You can change Modal header and Footer as you want. If you don’t want them you can remove those. This is not WordPress and this is just HTML. You can change it your own. Even the styles.

<!— Contact Form 7 via Bootstrap Modal —>

<div class="modal fade" id="cf7Modal" tabindex="-1" role="dialog" aria–labelledby="cf7ModalLabel" aria–hidden="true">
  
<div class="modal-dialog" role="document">
    
<div class="modal-content">
      
<div class="modal-header">
        
<h5 class="modal-title" id="cf7ModalLabel">Modal title</h5>

        <button type="button" class="close" data–dismiss="modal" aria–label="Close">
          <span aria–hidden="true">&times;</span>
        </button>
      </div>

      
<div class="modal-body">
        <?php echo do_shortcode([your shortcode]); ?>
      </div>

      
<div class="modal-footer">
        <button type="button" class="btn btn-secondary" data–dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>

    </div>

  </div>

</div>

Here not like the 01st method you need to echo do_shortcode(). So, you’re done. You can change button, form and other all styling as you wish.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *