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:

Contact Us Popup Form Fields

 

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:

Contact Us Popup 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.

Contact Us Popup User Email Notification

 

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:

Contact Us Popup User Email Notification

 

 

 

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:

Contact Us Popup Open Popup On Form Submit

 

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.

Contact Us Form Display Settings

Now Let’s Make Our Popups

Click page three below to see how we built our popups.