Create Our Form
The Form Fields Tab
After creating our first Ninja Forms form or editing an existing one, we’ll see three tabs in the upper-left corner. If you’re not using Ninja Forms Layout and Styles Extension, then you’ll want to use this to get the columns set up like we have below:
There’s a few important aspects to this form that could improve your performance.
First, we made sure to hide all of our labels, and used placeholders instead. As you can see, it’s a decent sized form, so the less scrolling, the better, especially for this Contact Us popup.
Next, we made sure to add a little enthusiasm to our “Submit” button – we refuse to take any chances of the user abandoning at the last moment. Check out our article on tips for creating powerful submit buttons.
The Emails & Actions Tab
This is how we setup our Emails and Actions:
This form does some pretty awesome things once a user clicks the “submit” button. First, the information gets saved to our database.
Next, two emails are generated and sent upon their way: the Admin Email and the User Email.
Finally, we open a “Thank You” popup once the form in submitted.
Admin Email Notification
Below is our Admin Email Notification settings – we think it’s nice sending these emails to special folder in our inbox, especially for contact requests.
User Email Notification
Since we’re constructing a contact form, we definitely want to give our users a copy of that contact request for their records:
Open Popup
We want a sweet “Thank You” popup to open, so we’re going to do an “Open Popup” action and choose our Thank You popup:
Display Settings
We use these display settings for our form. Notice we disabled the Form Title – we are going to use the Popup Title attribute to customize this part of our popup later in the guide.
Now Let’s Make Our Popups
Click page three below to see how we built our popups.
8 comments
john rayl
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
Daniel Iser
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
john rayl
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
john rayl
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
Jeff Hoffman
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)?
Daniel Iser
@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.
A Oxford
looks good how does this work on mobile devices and can it be optimised for mobile and or suppressed.
Walter Messer III
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.