How to Add a Contact Form Popup in WordPress

Have you ever wondered how to add a contact form inside a popup in WordPress? Then this video will answer that question for you. In this video I go through the step by step process of creating a contact form, creating a popup, and then adding the form inside the popup.

The video is beginner friendly, so you can watch it even if you’re an absolute beginner in WordPress.


00:00 – Different ways to trigger the popup
00:39 – What plugins/products you’ll need
01:49 – Installing the plugins on our website
03:14 – Creating the Form
07:50 – Getting the Form Shortcode
08:40 – Creating the Popup
11:50 – Adding the form to the Popup
12:45 – Configuring Popup Conditions
17:31 – Adding popup link to a post
19:18 – Testing the Popup

Top Resources

⚡Use Promo Code WPBVIP⚡

►Best WordPress Contact Form Plugin
►Best WordPress Analytics Plugin
►Best Lead Generation Plugin
►Best WordPress SEO Plugin
►Best Theme Builder for WordPress

Related Videos
►WordPress Tutorial – How to Make a WordPress Website for Beginners
►WordPress Gutenberg Tutorial: How to Easily Work With the Block Editor
►What is SEO and How Does it Work?
►How to Install a WordPress Theme

If you liked this video, then please Like and consider subscribing to our channel for more WordPress videos.

Follow us on Twitter:

Check out our website for more WordPress Tutorials

#WPBeginner #WordPress #WordPressTutorial

Hey folks uh in this video I'm going to Show you how to add a contact form popup In WordPress which just means having a Popup on the site which has a contact Form embedded right there in the popup I'm going to show you a variety of ways To trigger the popup for example you Might want the popup to be triggered When the user spends x amount of time on The site you might want to trigger it When the user is viewing a certain page Or scrolling past a particular area on The page or you just might want that you Want to trigger the popup when user Clicks on a specific link on the site so I'm going to show you all these Different functionality on how to create This very simply even if you're beginner You can follow along and to achieve this We going use a combination of two Products on a WordPress website so Switch to my screen here and the first Product that I'll be using is WP forms And it's world the world's most popular Form builder for WordPress and it has Tons of options I'll be using the free Version of WP forms to create the Contact form which will be embedding in The popup so that's the first Plugin or The first uh product we'll be using the Second product we'll be using is called Optin monster an optin monster is a Monster of a plugin right it's it's a Completely Powerhouse plugin which when

It comes to capturing leads on your site So if you are interested in capturing Let's say having a contact form that Means you're trying to collect leads so Optin monster is one of the best when it Comes to capturing leads and if I just Give you a tip of the iceberg of the Functionality of the plugin you have Light box pop-ups floating bars scroll Boxes gamified Wheels pag targeting and Tons of amazing stuff and it's a premium Plugin but it's very affordable you can You can go on the website I'll place the Link in the description of this video on The screen and also in the pin comment So you can go check out and make a Decision for yourself after watching This video if uh optin monster is few And by the way this functionality when We'll actually create the stuff that the Pop up you'll see some behind the scenes On how powerful the functionality or Targeting level options are so stay Tuned for that part of the video so now We know what plugins we going to use Let's install the plugins on our site so I'll go to my website here I'll go to The plugin section and I'll click add New plugin which will bring us to the WordPress repository and we'll search For WP forms the first plugin and as I Mentioned WP forms we're using the free Version so we don't need to pay anything We'll just click this is the wp forms

We'll click on it and install the plugin On our Site and it's done let's also activate It and it should be done in a couple of Seconds so WP forms is now active now Let's install the plugin for optin Monster optin monster and just to Clarify optin monster the plugin is Completely free but what it does is it Connects to optin monster service in the Background so you still need an optin Monster account uh to actually set up And work or use the exact functionality That I'm going to show you so you can Actually install the plugin like this But you still need to have a account on Optin Monster website to make sure the Functionality works so now let's this Plugin is also installed and activated So now we have the plugin setup and Sometimes you need to might need to Refresh your page to see the plugins Menu come up here so so you might see This popup don't worry about this you Can go back to the dashboard by clicking This link here we'll set up the campaign Once we are done with the form first Because that's what want to do first so Now you see we have an opin monster menu And we have a WP forms menu indicating That the plugins are now installed so Let's create a form now so if I go to WP Forms here I can see the add new Functionality here so I'll click add new

And this will give us the option of hey Create a new form on our site so we'll Click this I'll disable this because I'm Going to show you how to create the uh Form right now so what the first thing We'll do is just name the form here so We'll say uh customer info just name it Something you can name it anything you Like and just to clarify you see some of These uh pre-built forms or templates Are available to you right here but if You upgrade to the pro version of WP Firms which you can do by clicking this Link here you will have approximately 1,7 and9 different forms predesigned View if you scroll down you'll see there T T of different functionality or tons Of different forms already created for You all you have to do is use it so it's Up to you if you if you regularly create Different kinds of forms then this is Something you might find useful right Now we'll stick to the simple contact Form so I'll click use template and this Will bring us to the contact form I say Or the form maker or the form Builder And the form Builder is pretty easy to Use right you can you can see all these Fields you can drag and Dr drop them Right here in the form build area so if I use this let's say multiple choice I'll drag it and I'll just let go Somewhere where I want it and now that Particular piece of block or field is

Now added to the the the form I can also Duplicate it by clicking this button and I can also delete it if I don't want to So I'll delete it and if I want to Customize the look feel appearance or Say the functionality of a particular Field all I have to do is just click on It so let's say for example I click on The name field you can change the na uh The label so you say uh full name then You can change this here and then you Have the format first name last name you Can have first middle last name simple And then you can also make it required Or not required so let's say for example If I don't want the full name to be Required for some reason I can just Click on this and this will be disabled From the site so this is the kind of Functionality you can customize so Anytime you click a field you have Relevant options appear here and you can Customize most of the things once you're Happy with the contact form so for Customer information we just need the Full name uh email and maybe this if you Want add the phone number and numbers That's completely up to you I'll click The save button here to save the form First now before we proceed to do the Next step just want to clarify a couple Of things if you go into settings here You'll see notifications and Confirmations these are important to

Know if you want to customize this now What are what's the difference between Notifications and confirmations Confirmations is what the end user sees Once they submit a form so for some Reason or not for some reason but you Might want to do something different for Different I say forms on your side for Example if I go in confirmations here The default confirmation is a message Message which just shows the users hey Thanks for contacting us we will be in Touch with you shortly but you have Different types of confirmations too so If you go here on the drop down you can Actually show page or go to a URL so you Can redirect users to a different page As well this is very useful if you are Spending money on media so if you want To track the effectiveness of your Campaigns then you want to add a pixel To a specific let's say thank you page And then redirect users to those pages And then then you'll be able to track What's the conversion rate like so That's the functionality that you can Customize I'm going to keep this simp For now keep it to message but what I'll Do is uh I'll just say thanks for Submitting your Information your Registration will be Confirmed shortly so I've just Customized the message that users will

See after they submit the form this is Useful right so this is for the users But what is notifications so Notifications is for the site Administrators what happens how do you Get notified when somebody actually Fills out a form so the default Notification is an email that goes out To the admin and you can see all these Uh say confirmation or say all the Details that you can customize here so You can see it's the admin email what's The subject line like where it's coming From uh who is sending the email and all The email fields and what the data is so You can customize all of this right so If you have correctly configured emails To be going off from your site you Should be receiving these confirmation Emails whenever somebody submits it so You can add more notifications in the Pro version you can have more than one Notification you can enable and disable If you don't want any notifications Coming up to you you can disable this as Well that's completely up to you right So once you have done this once you have Understood the notifications and Confirmations and have customized the The form just click the save button once Again to make sure everything is saved Now what we'll do is we'll go to the Embed option here because we want to Embed this somewhere which is a popup

But not a page so if I click embed it Gives me an option to either select the Existing page or create a new page but We don't want to add it to a page now we Want to add it to a popup so what we'll Do is we'll just use a short code here So there's a link here which if you Click it'll say hey this is a short code So I'll copy this short code and just to Keep it safe I'll just open notepad and I just paste it here right so this is The short code so once this is done this Is short Cod is copied we are done with WP forms for now we'll click the uh Cross icon to exit this will bring us Back to WP forms and by the way you can See the short code here as well you can Copy this but the C short code we copied Also has this titles equals false it Doesn't display the title of the form There so it's much more useful to use This one rather than use that one all Right so now that we have created the Form it's time to create the popup so We'll going to optin monster here and I'll just go to the dashboard because Since I've just installed the plugin It's not connected to the service in the Back end so I'll still see this warning You haven't finished setting up your Site so what I'll do is I'll click this Button connect your site and this will Just start the process now if you have Have a new uh new account or you haven't

Created an account you can click the Claim your free account and since I Already have an account I just click Disc connect your existing account by The way I'm already logged into the site So it'll be easier for me or otherwise I Might have to enter my credentials so I Click this connect to existing account It'll actually open up a popup like this And I'll say hey you you connecting to Zaj badwani which is my name so it's Connect to WordPress just a confirmation And once I've done this will be Connected to my site now by the way in The back end what's happening is WP Forms or say op monster is doing a lot Of things in the back end adding the Relevant i' say pieces of code to your Site so that all the tracking and all The campaigns all the testing data Whatever is required to make sure the Functionality works is being added to Your site automatically so this is how It keeps it simple by using this Functionality all right so once this is Done we have connected our site Successfully now time to create a new Campaign and if you go to the campaign Section in the left hand menu you can See here I'm inside optin monster just Go to campaigns and yeah here we'll Click the green button to create our First Campaign so these are all the templates

Or I say campaign types we have access To we have popups floating bars full Screen popups inline popups or inline Say campaigns Slidin and gamified so Since we are working with popups so this Is what we trying to understand how to Embed the contact form in a popup we'll Stick with popup and if you keep Scrolling you'll see there's so many Different kinds of popups already Created for us so it's easy for us to Just get started with a goodlook popup Already just customize few of the things Just to keep it simple I'll just stick With this one let's say we are getting Users to register for a webinar right so I'll click this template here and this Will be uh or we'll name the campaign First so I'll name it uh Webinar Registration and let's start building Oops let me just spell check that all Right let's start Building so now by the way you won't Notice this but once we create the Campaign it actually redirects us to Optin monster website so this is Happening on the optin monster website And it's completely seamless you want to Notice and we'll create the entire Campaign here so this is the campaign uh Builder or I say the the visual campaign Builder where you customize the look and Feel of the specific popup because we've

Chosen a popup campaign here and the the Process of customizing this is very Simple just click on it on the left hand Side you see the functionality so if you Click the icon you can change the icon Change the alignment change the width What's the all text like and Link and All this functionality and you can go in Advance to change shadows and borders And all that but let's keep simple and Just add the contact form here so since We are getting users to register for a Webinar you see this is the button Reserve your seat the contact form will Already have a submit button there and We don't want double buttons here so What I'll do is hover over this and Delete this and I'll just delete so now We have just a timer learn from the pros Again we can customize any of this text Completely but let's keep it simple and I'll just add the contact form here so I'll go here on the home and inside the Standard I say Fields here standard uh Widgets here you'll see WP forms here as Well so just click and drag it here and As soon as you see the Drop Zone appear Just let go and WP forms the block will Show up here and then on the left hand Side you'll see that there's a form Selection menu so if I you click the Drop down you'll see the form we just Created but we will add the short code Manually because it includes the note

Title so I'll click this and once again If I show you the notepad this is the uh Complete short code we copied I'll just Copyed once again I'll paste the short Code here now you won't see the live Preview here but you will see that the W Forms ID and the title the short code is Actually added here so this part of the Equation is now done again you can Customize the visual elements however You like and the functionality part is Done once this is done we can head over On the top side and you have see Multiple tabs here so we'll go to the Display rules option now the display Rules option is very important to Understand because this is where you'll Customize when the popup appears and if I have to go a little technical you can Customize tons of it so the default uh Display rule is something you can see Here and what it does is what is saying Is that on any page that on any page on The website if a user spends 5 seconds Or more then show the popup so right now The popup is supposed to appear any time Or in any page when a user spends more Than 5 Seconds now if I show you this You can have current Path complete completely customized to Your heart's content so what kind of URL Pass do you want this popup to appear Only on the homepage or not exactly or Anything else except the homepage

Exactly matching this particular URL or If you go does not match X so include List exclude list if it contains so if It's a let's say category page then you Can have a category page does not Contain start with does not start with So essentially if you have a page on Your website you can essentially Target That page and only that page will have The popup appear after 5 seconds then if You go here then you can trigger the Change the conditions on when the popup Appears as well so you see you have page Level targeting which I just showed you You have exit intent so once somebody's Trying to exit the page the popup Appears if it's a new visitor then the Popup appears returning visitors device Targeting and you can go to all these Areas if I go to who you'll see physical Location referral targeting so people From let's say Facebook or people from a Special soci social media again get it Device targeting cookie targeting local Source targeting tons of options when Triggers time on page so many different Options so if you imagine the Possibilities every minute scenario you Can imagine on your side that hey only On this particular page if a returning Visitor comes from Facebook then show Them this particular popup and then Register them for the website all of This is possible with optin monster and

This is what I'm talking about this is a You literally a superp power when it Comes to targeting but just to keep it Simple simple what I'm going to do is I'll just use a click as a trigger for a Popup so I'll use or I'll add a button On my site and whenever somebody clicks That button the pop-up form will appear So instead of time on page I'll click The personalization or I'll just search For Click so once I search for click you'll See monster link on click event is Something we can actually use so once I Click on this you'll see visitor clicks A link then the popup will trigger and The current URL path can be any page on The site so what I can do is on any page On my site if a user clicks this link Then the popup will appear that's what We're saying with this functionality and Which is the link that they'll click We'll just copy this monster link code And paste it again in notepad so I'll Copy this I'll go here and I'll just Paste it in a new line just to keep it Simple and don't worry you do not have To copy all this I'll just explain Everything so make sure to copy this Monster link code so that we can just Add it somewhere on the site once we Want to uh use this as a trigger so now We have done the targeting part and then We can go into the Integrations part I'm

Just going to show you the Integrations And Integrations mean that hey you want To have this particular data go to a Specific CRM have this particular Connect to an email service of your Choice all these confirmations or lead Verification service email validator all These servic everything can be done here So it's very powerful plugin and this is Not the topic of the video so I'm going To skip the Integrations part and the Analytics part which is where we'll see Data once we actually connect Google Analytics and see how users are Performing we'll just go to the publish Section and what we'll do is now we Since our website is already connected All we have to do is Click from the Publish status to draft or Chang it from Draft to publish you see this also Changing here the green tick and Save all right so just to double check Everything that we done in the design Part we changed the design we added WP Forms block here which added the short Code in the display rules we change the Display rules to whenever someone uses Clicks a particular link We copied the Link L here and that happens on any page On our site and inside the publish Section we just published and saved our Campaign once all this is done when Everything is set up just go and click This cross icon here this will bring you

Back to the website and now our campaign Should be live sometimes what happens is You might go into optin monster and go To campaigns you will see that the Campaign status is not refreshed quickly So what you can do is just double Checking here startus spending I'll Click on it and I'll publish it here and The campaign will be published so just To make sure that the campaign is live So now what I'll do is now actually I'll Go to my website or I'm already on my Website I'll create that a new a post on The site and add that functionality uh Add the button and add that particular Link that I created uh with optin Monster to add the popup there so I'll Go to the Post section and I'll just add A new post I'll just open up a new tab And I'll just say webinar registration Just to keep it simple and I just add a New button to site by using the shortcut And add a button block to the site all Right so now I'll just say click to Register for the webinar I can say Anything here like I like and I'll click On it and now you'll see there's a link Field in the button which is where we'll Paste the link by the way if you go to Notepad here you don't actually need This entire link you just need this Portion of the link so if I just copy This Separately and I paste it here

This is the thing that you have to add Inside the button as a link so I go here I'll go to the link option and I'll Paste it once again and I'll link just Once again confirming you don't need the Entire link just what is inside the hre Area so if I just hover over it just Inside whatever is inside the double Quotes that's all you need to add to the Site all right so once this is done we Can double check we click the button you See the uh link appear here let's Publish the post here and since the post Is published we'll open it up in a new Tab just to test the campaign out so now Imagine this being on your site and you Added this functionality now just to Clarify you can add this button to your Um I say the the header of your site or Footer of the site the sidebar any Particular post link and this is this When the link is clicked the popup will Appear so let's test it out I'll click The link here and in a couple of seconds Depends on the time and now you see the Popup appear on the screen so that's how To do it right it's very simple and Again just to clarify you can create or You have tons of functionality or Choice When it comes to how this is triggered We just showed the button click as a Demonstration but you can have this uh Scrolling past an event you can do this Based on a time that user spends on the

Page and it's completely up to you how You decide to do it so this Functionality completely exists so That's how you do it that's how you Embed a contact form in a popup and also Variety of face how you can trigger it On your WordPress website hope Everything is clear to you now if you Still have any questions comment Box is Open and if you have followed everything And you'll say hey this was a great Video then just hit that like button and Smash it so that I understand that this Was a great video for you guys and if You want to continue your WordPress Education then just subscribe to the Channel because it helps out us and also Helps out you because we can notify you Of new channel or no videos coming out To the channel you're watching IJ from Dou beginner and I hope to catch you in The next video very very soon take care

You might like