How to make Popup Form with Contact Form 7.

What is Popup Form?

Popup Form is a well-operated service that makes Contact Form 7 experience easier and user-friendly to the users. One can easily create engaging Contact form 7 to connect with the author or admin by using the Popup Form. It’s quite easy to have a Contact Form 7 page by clicking once on a button rather than visit an extra page.

Pros and Cons of Popup Form at Contact Form 7: 

• Popup Form helps you to get a contact form 7 page by one click.
• Popup Forms help you connect with the people who visit your website.
• Users don’t have to move another page to have Contact Form 7 page.
• Popup Form at Contact Form 7 is compatible with all major browsers.
• You can Customize or modify it easily.
• Popup Form is fully responsive, it’s too user-friendly to work.

Live example: How to make Popup Form with Contact Form 7.

In this blog, I’m going to show you how to make Popup Form at Contact Form 7. Contact Form 7 is a well-known service for WordPress Websites and the Popup Form makes Contact Form 7 easier and user-friendly to the common peoples. One can easily get a Contact Form page by using One Click on a Button without going or visiting another page. So it saves time and is able to provide fast services. 

So, don’t waste time. Let’s see how to do it easily. I’m moving forward step by step as you can get a proper Idea to make the Popup Form at Contact Form 7.

Installing Popup Maker Plugin

Step 1: To make a proper Popup Form at Contact Form 7, First, you have to install a Plugin called POPUP MAKER- Popup Forms, opt-ins & More. To install the plugin go to your WordPress Dashboard, then click on the Plugins > Add New. Then search the name of the Plugin, and Install it. 

Step 2:  Secondly you have to make a page. To do that, again go to your WordPress Dashboard, then click on Page > Add new. Give the name of the newly created page, like Popup Form. Then create a Button by using your page builder. To create a specific ID of the Button click on the  More Option > Edit as HTML then Add an ID of the field. 

Step 3: Copy the ID name which you’ve given a moment earlier. Then update that and Convert to HTML. Then view the page. Now you have the preview of the created page and button. By right-clicking on the button go to the inspector. Now you have to copy the ID. 

Step 4: Now you have to go to the Popup Maker, click on Popup Maker > Add new. Give a name. Then we’re going to set a trigger. Click on Add New Trigger. Now you have a small preview of the trigger with two options, One is Click Open, and another one is Time Delay/ Auto Open.  You have to choose the Click Open option. Then ADD it. Then you have another field below under the name field. Now paste here the copied id with a # tag like #COPIED-ID, now ADD it. 

Applying CSS

Step 5: Now go to your Contact Form and copy the Contact Form ID. After coping with the Contact Form Id, Go back to the Popup Maker page. Now paste the copied Id on the writing area field. Then Publish it. Now go to the main Popup Page and refresh it. Then click on the button, and you will have the preview of the Contact Form view. Now we’re going to modify the close button. 

.page-id-2077 button.pum-close.popmake-close {
    position: absolute !important;
    right: -100px !important;
    top: 0 !important;
    border-radius: 50%;
    background: #cd2653 !important;
}

Step 6: To modify the close button just Right-clicking on the close button go to the inspect. To make it unique just copy the PAGE ID. Then go to the inspector stylesheet. Then paste the Id before the button id. Then we’re going to add extra CSS. We’re changing the default style. Here we’re going to change a few stuff, like Positioning the button, Changing color, etc. To do that you have to use Extra/Additional CSS codes. These are the CSS codes.

Step 7: Now copy these CSS codes from Inspector Stylesheet and go to your WordPress Dashboard. Then click APPEARANCE > CUSTOMIZE > ADDITIONAL CSS. Then paste the copied code at the field with the Page ID and Form ID also. Then click on Publish! Then go to the Popup Page and Refresh it! Congratulations! You’ve done amazing work! 

To know more about Popup Form at Contact Form 7 and It’s service and to have a live demo of this please view the video. 

Follow Us on youtube.

Let me know if you have any issues with Popup Form at Contact Form 7.

If you would like to know how to style contact form 7, then you can do that from here: How to style contact form 7

Regards.

Tags: Contact Form PopUp at Contact Form 7 Popup Form wordpress WordPress Contact Form WordPress hacks WordPress Helps