Popup is an effect on a website that allows a table to appear when you click on a button or link. Table content can be a banner, image, promotion, or quick contact form.
In this article, I will guide you , supported with Easy FancyBox plugin .
Easy FancyBox is a plugin that allows you to display images, videos, forms, text, etc. as popups.
Install Easy Fancy Box
You search and install the Easy FancyBox plugin in the plugin management page. Then enable it.
Then go to the menu Plugins > Installed Plugins . Then, find the Easy FancyBox plugin you just installed and click the View details link .
In the plugin details panel that appears, switch to the Answers tab . Here are instructions on how to use this plugin for cases, including inserting and creating popups for Contact Form 7. It provides me with a sample code, which this code can not be used as it is. I need to edit it a bit, so feel free to use my code.
Create popup effect for Contact Form 7
Now you create a new page or post, give it a name. Then, switch to the Text tab , copy and paste the code I edited a little bit into it.
<a class="fancybox" href="#contact_form_pop">Contact Us</a> <div class="fancybox-hidden" style="display: none;"> <div id="contact_form_pop" class="hentry" style="width: 460px; max-width: 100%;">[contact-form-7 404 "Not Found"]</div> </div> <div> <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span> </div>
Remember to replace your Contact form 7 shortcode in this paragraph: [contact-form-7 404 "Not Found"] . Then you post this page/article.
Now viewing this article off the homepage, we have seen a Contact Us link like I just created.
Clicking this link, a popup contact form will pop up, quite nice and professional right?
To display Contact Us as a button instead of a link, I declare an additional class button for the <a> tag in the code above. Replace the <a… tag line with the following:
<a class="fancybox button primary is-primary is-medium" href="#contact_form_pop">Contact Us</a> <div><span>1</span></div>
Save and review we will see it displayed as a button like this, looking better.
Besides, if you want to insert it into the web source code, to make a button fixed in a certain position, then you use the following code to insert it into the php file:
<a class="fancybox" href="#contact_form_pop">Contact Us</a> <div class="fancybox-hidden" style="display: none;"> <div id="contact_form_pop" class="hentry" style="width: 460px; max-width: 100%;"> <code class="php spaces"> </code><code class="php plain"><?php </code><code class="php functions">echo</code> <code class="php plain">do_shortcode(</code><code class="php string">'</code>[contact-form-7 404 "Not Found"]<code class="php string">'</code><code class="php plain">) ?></code> </code> </div> </div><div> <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span> </div>
Conclusion
Above is how to create a quick and easy contact form with the help of Easy FancyBox plugin . You can also insert it in the header of the Flatsome theme to create a permanent quick contact button with a professional popup display form.
