WordPress Popup Contact Form
Recently one of the visitors asked a question, how to create a popup contact form? I suggest you create such a form using two plugins Contact Form 7 and Easy FancyBox.
The first thing you need, is to install both plugins. After you have installed and activated, you need to go to the menu in the administration panel Contacts (CF7) and customize the form. The setup process is quite simple, I will skip this part of the tutorial, if it is needed, write me in the comments and I will supplement this lesson. After creating the form, the plugin will offer you a shortcode to insert into the article. It will look like this:
After creating the form, you need to create a page and insert the form shortcode into it:
 |
|
So, form we have, it remains to make it appear in a pop-up window, To do this, replace the shortcode of the form with the following code.
|
1 2 3 4 5 6 7 |
<a href="#contact_form_pop" class="fancybox">Открыть контактную форму</a> <div style="display:none" class="fancybox-hidden"> <div id="contact_form_pop"> [contact-form 1 "Contact form 1"] </div> </div> |
Example of inserting form code:
After pasting the code and saving the page, you can click on the link, then a contact form will open in a pop-up window.
I checked the code on one of the sites I'm developing, everything is working. Good luck with website development.
- Basic web design course;
- Site layout;
- General course on CMS WordPress and continuation of the course on template development;
- Website development in PHP.
Hello!
And how to attach this updated form code to the button. Button in the form of an image or a cell in the navigation menu.
Tell me please!
In order for the link to call the contact form, you must enter the code in it as shown in the example “Example of inserting form code:”. You can style the link with CSS as you like for your design.
Sergey a little higher in the code there is an example, I think if you install both plugins and follow the example, everything will become clear. If you don’t understand, write on which site you need to do it and where, try to help.
Thanks! Happened
I am very glad that my work with the pop-up contact form is not in vain.
Perfect solution. Just to delve a little into the style of the contact form itself. Get her in order.
Here the main task was to show how to embed the form, and styling forms is the next step and is done in styles (css).
Hello, tell me where to change styles? how to make button not text?
Theme Styles in WordPress are here: /wp-content/themes/folder named theme/style.css.
Button and not text in which place? In our example, we have a submit button.
For some reason it doesn't work in opera. Nothing happens when clicked. In chrome, when you click again, it does not load forms, and the page itself in this pop-up window.
Reset the link in the comment if the site is available on the Internet, can help.
Good afternoon ! Liked the article. But the form pops up once. And then the whole page pops up!!!!!Help!!!
You have to look at the site, so hard to say.
There was a similar glitch – solved by installing Easy FancyBox
Thanks for the tip! I think this plugin works better, because I also had the problem described above on some sites. I'll add it to the lesson.
Good afternoon! Thanks for the great article. And how to do, so that the form pops up when you click on the shortcode button?
For a form to respond to a button, you can just style the link “Open contact form”, or alternatively, just add the class= class to the desired element”fancybox”.