Contact Us Popup with Ninja Forms: Creation Guide
Contact Us Popup Synopsis
In this guide, we explore how easy it is to create a robust Contact Us popup using Popup Maker and Ninja Forms. We’re also going to implement a “Thank You” popup once the user has completed the form.
Why Inside of a Popup?
In reality, putting any part of your site inside of a popup has a few powerful advantages to building the most optimized site that will get you the most conversions. The tricky part is doing it gracefully.
First, we should think of space on your website as money. With a high performing website, we want to impress with our outstanding conversion rates.
For this reason, we definitely want a huge Contact Us popup button everywhere on our site, but why waste valuable space on the embedding the form there as well? That just means we have to make the contact button even smaller!
Plus, studies prove: keeping users engaged with specific, meaningful click actions will net us better results.
Speaking of studies, now that we’ve created more room for a bigger contact button, we can replace the words “Submit” or “Contact Us” with something more influential like “15% Off Your Price for a Limited Time!”
Studies have proven: Power Words do exists, and they get results.
Plugins and Extensions
- Popup Maker v. 1.4.20+ (Free)
- Ninja Forms v. 3.0+ (Free)
- Popup Maker Advanced Theme Builder Extension
- Popup Maker Forced Interaction Extension
- Ninja Forms Layout and Styles Extension (optional)
Final Results
Live Example
See this popup in action here!
Videos
Screenshots
by Ahoy
looks good how does this work on mobile devices and can it be optimised for mobile and or suppressed.
It works great on mobile devices, I included a couple of mobile styles in the CSS from the guide, but you could take a little farther to optimize it even more. The only way to entirely disable popups on mobile devices, at this moment, is with our Advanced Targeting Conditions Extension. However, we’ll be releasing an update that will give users this singular ability for free in light of Google’s new policy on popups starting in 2017.
What happens when you set a field on your form as required and click the submit form button without filling in a value? I tested this quickly using Formidable Forms. In my case some of the fields are required. When the form popups with the required fields (and without inputting anything) and I click the submit button the popup simply closes. If you open the popup form again (after it has closed), it shows all the form validation (ie which fields are required for submission). Is there a way to have fields (in the form) as required and the popup stay up until all required fields are inputted (unless of course they click the ‘close’ button)?
@Jeff – Sorry for the confusion. The popup is working fine as expected though. The issue is that the form isn’t submitting using AJAX but rather by refreshing the page. Since the popup isn’t open when the page load by default after the refresh you have to open it again.
Our latest version coming into public testing tomorrow hopefully will solve that once and for all, give it a try.
the pop up layout has some issues. I used elementor to edit the contents of the popup and whenever it pops up, the numbers in the ipad and iphone platform are gone but on the desktop version, it’s apparent..I tried to contact the Elementor vendor plugin and they told me that its more of a third party plug in..but im not sure because when i change themes, I am currently using the Ocean WP Theme and this is the theme that I’m having issues with..
Like I said, when i used the older themes like 2016, 2017 and 2019 theme, the numbers are there and apparent even for the ipad and mobile versions but on the Ocean WP, it’s not there. So I’m not sure if its a theme related issue or a third party plug in issue so might as well ask in advance…Thanks
Hey John, this should at least point you in the right direction: https://docs.wppopupmaker.com/article/167-my-popup-is-not-using-my-theme-styles
Hi,
Does regenerating the CSS help? I mean clearing out the caches, web caches, etc..to solve the issue? I just didnt clear it because I dont know if there are any major drawbacks to my page builder designs..what do you think of this? would love to hear your thoughts
Hi, Is there a step by step video for the link that you gave me?
I’m just unsure how or where to go so that i can change that code.
I contacted my host for my site and they dont handle such matters.
Now, I’m stuck and I don’t know what to do on the link that you gave me.
John