Step-by-Step Tutorial to Create a Contact Type 7 Popup


Do you need to create a popup with Contact Type 7 to make it simpler on your website’s guests to get in contact with you?

Having a contact type in your WordPress web site is an effective way to work together together with your guests instantly. Nevertheless, some website guests want an additional nudge to fill out a contact type to achieve out with questions, issues, or normal inquiries.

That’s why utilizing a WordPress popup plugin could be an effective way to spice up consumer expertise (UX) whereas rising your e mail checklist.

On this publish, I’m going to show you how one can create a popup with Contact Type 7 step-by-step, even when you’re a newbie.

Earlier than we begin the tutorial, let me briefly clarify why you want a contact type popup within the first place.

Create a Popup With Contact Type 7 Immediately

Why Create a Popup With Contact Type 7?

When your website guests have a query about your product, providers, or pricing, you need to be sure that they’ve a straightforward option to contact you.

One option to allow that is by including a reside chat widget to your web site so to reply to prospects immediately. However as a small enterprise, it’s possible you’ll not have the time and assets to rent a reside chat workforce.

An equally good answer is to create a contact type that enables prospects to ship you a message to your enterprise inbox. There’s only one small drawback:

How do you get individuals to fill out the shape embedded in your website?

Chances are high, guests both received’t discover the shape or will ignore the chance to kind their question since there’s nobody nudging them.

They’ll probably hit the again button and search for their queries on Google. Worst case state of affairs, they’ll land in your competitor’s web site and purchase from them.

This can be a state of affairs a focused contact type popup will help with.

A contact type popup is a small modal field that reveals in your website, nudging individuals to contact you with any questions or issues they could have.

This lets you work together together with your potential prospects wherever they’re of their buyer journey, information them by way of the gross sales funnel, and enhance your gross sales conversions.

The most effective half is that even when you don’t get an instantaneous sale, you’ll generate a brand new lead on your e mail checklist. This allows you to nurture your leads and prime them to do enterprise with you.

However how do you create a contact type popup?

There are various methods to do it. For at present’s tutorial, I’m going to show you create a WordPress Contact Type 7 popup with OptinMonster.

OptinMonster is the world’s #1 lead era software program in the marketplace. OptinMonster makes it simple so that you can construct gorgeous and extremely focused popups in a matter of minutes. You may as well use its popup maker to embed contact kinds from well-liked contact type plugins. 

Equally, Contact Type 7 is a WordPress plugin that allows you to add on-line kinds to your website. This well-liked plugin has 5 million+ installations.

contact form 7 popup

Right here’s the Contact Type 7 popup I created in OptinMonster for this tutorial:

create a contact form 7 popup

This popup took lower than 10 minutes to create and will likely be an important addition to your WordPress website. As soon as it’s printed in your web site, you’ll get notifications about each type submission that guests make in your website.

Able to get began? Let’s dive in.

Create a Popup With Contact Type 7 Immediately

The way to Create a Popup With Contact Type 7

After you join OptinMonster, you’ll need to obtain and set up the OptinMonster WordPress plugin. This fashion, you’ll be able to seamlessly join your OptinMonster account together with your web site.

If you happen to need assistance setting this up, take a look at our tutorial: The way to Join OptinMonster With WordPress.

Step 1: Select Your Marketing campaign Sort and Template

When you log into OptinMonster, head over to your account dashboard. Within the higher right-hand nook, click on Create New Marketing campaign:

contact form 7 popup tutorial

You then’ll want to pick your marketing campaign kind. Whereas we have now many choices to select from, I’ll use the Popup marketing campaign for at present’s tutorial:

contact form 7 tutorial

Subsequent, select your template.

how to create a popup with contact form 7

OptinMonster has 100+ pre-built templates you can select from. These make it simple so that you can create gorgeous campaigns in minutes.

And because of our drag-and-drop editor, there’s 0 coding or design abilities required.

Since we’re going to create a easy Contact Type 7 popup, our greatest possibility is to decide on the Canvas template:

Canvas is a clean template that additionally makes use of the drag-and-drop editor. The benefit of utilizing this template is that it enables you to design a marketing campaign from scratch and add as many customizations as you need.

Utilizing this template is simpler right here since we’ll must embed Contact Type 7’s shortcode in your popup design. We’ll get to that half within the subsequent step.

For now, identify your marketing campaign, assign it to your web site, and click on the Begin Constructing button:

how to make a popup in contact form 7

Step 2: Embed Contact Type 7 Shortcode into Your Popup

Right here’s how your popup designer appears at this level:

contact form 7 popup tutorial

You possibly can delete the default picture and textual content blocks from the editor because you don’t want them. Simply hover over every block to see a small toolbar, which features a trash can icon to delete the block.

contact form 7 easy guide

The design editor will then appear like this:

Subsequent, we’ll want so as to add Contact Type 7’s shortcode to the popup. It’s very easy to try this. You simply have to repeat and paste the code to OptinMonster.

Begin by scrolling down the Blocks menu within the left panel and discovering the HTML block from the choices:

how to use contact form 7 plugin

Drag it to the marketing campaign editor.

Then head over to your WordPress dashboard to seize your Contact Type 7’s embeddable shortcode.

To do that, click on on the Contact > Contact Kinds possibility within the WordPress menu to tug up your checklist of kinds.

contact form 7 popup complete guide

You’ll see the next in your dashboard:

contact form 7 popup tutorial

Click on on the shortcode subsequent to the contact type to repeat it.

contact form 7 easy popup tutorial

Head again to your OptinMonster editor and click on on the HTML block you simply added to your template.

how to create a popup in contact form 7 popup

This may carry up the HTML editor on the left-hand facet. Delete the default code and paste the Contact Type 7 shortcode within the HTML editor:

how to build a popup with contact form 7

Be aware that the editor doesn’t show the contact type but. As a substitute, it’ll look one thing like this:

That is regular, and the contact type will seem correctly as soon as the marketing campaign is reside in your website.

You may make different modifications to your marketing campaign, similar to including textual content and pictures or altering the background colours.

I’ll add background colour and picture to verify the popup message stands out:

If you happen to need assistance designing an ideal popup, take a look at our information on  create your first marketing campaign with OptinMonster.

To make the popup extra visually interesting, you’ll be able to add some CSS to your contact type within the popup.

If you happen to don’t know CSS, no worries.

You possibly can insert this with OptinMonster’s Customized CSS function. You could find the choice underneath the Settings menu on the left:

Copy the next code and paste it within the CSS editor:

That is easy CSS that can make a primary contact type look extra visually interesting. You possibly can add new customizations to the popup if you understand your manner round CSS or JavaScript.

When you’re happy with the design, you’ll be able to proceed with enhancing your show guidelines.

Step 3: Set Your Show Guidelines

By default, OptinMonster has 2 show guidelines for every marketing campaign:

  • Time on web page is 5 seconds
  • The popup will seem on any web page of your website

I like to recommend customizing these guidelines on your viewers, particularly as a result of it is a contact type popup. Meaning you need to goal people who find themselves contemplating your product or doubtless have questions on your providers.

When you can select from a number of targets and triggers in OptinMonster, I’ll cowl 2 completely different set off guidelines that match this state of affairs effectively.

  • Exit-Intent®
  • MonsterLinksTM


The Exit-Intent® rule is ideal for triggering a popup when a customer is about to exit your website. You possibly can configure this show rule when, for instance, guests attempt to depart your ‘Contact Us’ web page with out taking any motion.

Right here’s arrange the Exit-Intent® rule. Go to Show Guidelines on the prime of your OptinMonster editor:

contact form 7 guide

Click on on the ‘time on web page’ situation. From the dropdown menu, click on on When and choose Exit-Intent® on the correct.

how to make contact form 7 popup

Select if you wish to allow this rule solely on desktop, cell, or each. I selected ‘on all units.’ You may as well select the Exit-Intent® sensitivity as low, medium, or excessive.

create popup in contact form 7

Subsequent, let’s cowl the second show setting.


Utilizing MonsterLinks™ is an effective possibility for triggering contact type popup when guests click on on a picture or a hyperlink.

MonsterLinks™ makes your contact type popup seem when customers click on a button or a hyperlink in your web page. Meaning if they’ve a query or drawback, your guests can see the contact type seem on the display with a single button click on.

That is nice for providing a greater UX since you aren’t redirecting individuals to a different web page. As a substitute, you’re nudging guests to get in contact with you and construct a deeper engagement.

Right here’s arrange MonsterLinks™. First, go to Show Guidelines on the prime of your OptinMonster editor:

contact form 7 guide

Click on on the primary default rule that claims ‘time on web page.’ Click on on When (Triggers) within the dropdown to seek out the MonsterLinkTM (On Click on) possibility on the correct. You may as well seek for it within the ‘search circumstances’ field.

Click on on the MonsterLinksTM possibility to substantiate your selection:

how to create contact form 7 popup

Subsequent, click on on Copy MonsterLink™ Code:

how to create contact form 7 popup

You now have an embeddable hyperlink to your contact type popup. It comes within the HTML format:

<a href=”” goal=”_blank” rel=”noopener noreferrer”>Subscribe Now!</a>

You possibly can embed this hyperlink on any button or textual content in your website identical to you’ll with another URL.

To do that, go to your WordPress editor. Spotlight the copy or CTA button textual content you need to embed the MonsterLinksTM with.

Click on on the Insert/edit hyperlink icon and paste the MonsterLinksTM code.

how to create a popup in contact form 7

With this, you’ve configured your WordPress Contact Type 7 popup to indicate each time a website customer clicks the hyperlink in your web page.

By the way in which, you’ll be able to delete the 2nd situation within the show guidelines web page because you received’t want it.

how to create contact form popup

Now all that’s left is to publish your marketing campaign.

Step 4: Publish Your Contact Type Popup

The final step is to publish your marketing campaign. To take action, click on on the Publish tab on the prime of your editor menu:

how to create a contact form popup

Within the Web sites part of the web page, you’ll see the web site you had chosen if you named the marketing campaign (Step #1).

Right here, you may as well preview the popup design earlier than you publish the marketing campaign:

how to create a contact form

Subsequent, change the marketing campaign’s standing from Draft to Publish:

how to add a contact form on website

Right here’s how the popup message takes care of I printed it:

create a contact form 7 popup

Your Contact Type 7 Popup is Now Dwell!

Congratulations! If you happen to adopted the steps I outlined on this tutorial, you now have your WordPress Contact Type 7 popup reside in your web site.

If you happen to like this publish, take a look at these WordPress tutorials on create comparable popups:

If you wish to create a Contact Type 7 popup for one more website, observe the steps on this tutorial to get began!

Create a Popup With Contact Type 7 Immediately

Contact Type 7 FAQs

1) Is Contact Type 7 appropriate with Elementor Professional?

Sure, you’ll be able to create Contact Type 7 popups on any touchdown web page constructed with Elementor Professional plans.

2) Are you able to create a Contact Type 7 popup on WooCommerce websites?

Sure, you should use Third-party addons like WooCommerce Quote or Enquiry Contact Type 7 to arrange a product inquiry popup in your WooCommerce website.

3) Will constructing a contact type with Contact Type 7 have an effect on my web site’s search engine rankings?

In keeping with Josh Blackburn, many web sites have raised issues about shedding web page loading pace after embedding Contact Type 7 popups. Web page loading pace is a vital issue for SEO (search engine marketing) in addition to consumer expertise. Just a few WordPress customers have additionally reported about Contact Type 7’s incompatibility with Yoast search engine marketing.

To keep away from such dangers, take a look at WP Kinds. It’s been examined rigorously to make sure kinds don’t have an effect on your website pace and search engine marketing.

‌4) Does Contact Type 7 assist AJAX submissions?

AJAX (Asynchronous JavaScript and XML) is an utility improvement expertise that makes internet apps extra responsive. As such, Contact Type 7 helps AJAX submissions. In case your AJAX contact type isn’t working accurately, you’ll be able to write to the Contact Type 7 workforce or publish a question of their assist discussion board.

5) Do I want a unique WordPress addon to indicate a hit message after a consumer submits a type?

Contact Type 7 reveals a default success message as soon as customers click on the submit button. Nevertheless, you may as well select from a number of different addons to show and customise your success message with Contact Type 7.

Hello, I am a author and content material marketer with 10+ years of expertise. Through the years, I’ve helped a number of B2B SaaS manufacturers develop their on-line presence and get extra prospects. At OptinMonster, I write about all issues advertising and marketing — starting from how-to guides to the best-of instruments that will help you enhance your e mail advertising and marketing, lead era, and web site conversion campaigns.

Disclosure: Our content material is reader-supported. This implies when you click on on a few of our hyperlinks, then we could earn a fee. We solely advocate merchandise that we consider will add worth to our readers.


Please enter your comment!
Please enter your name here