I'm gonna show you how to use Ninja Forms to create an update forms on your site. Your site might already have existing Ninja Forms, and if that's the case, you can also use these instructions to update existing forms as well
To get to Ninja Forms in your left hand sidebar, you'll go to Ninja Forms and dashboard where you can see all of your forms. For demonstration purposes, I'm going to edit the “send us a message” form that we have on this site, but you could also use this add new button to edit a totally new form to your site.
In the form settings, you have a couple of tabs. The first tab is your form fields tab, where you can edit the actual fields that make up the form. We've got a few examples here. If I click on “first name,” I can go in here and I can update the label to be something else. I can also decide if I want this to be a required field or not. If I toggle this off, you'll notice the red asterisk goes away. You can also do things like rearrange your fields. If I want the email field to be down below the “phone number,” I can simply drag this down.
We also have some examples here of additional fields that you might want to use, like radio lists and checkbox lists. Another common one is this dropdown select option where you can add a dropdown menu for users to select different options from. If you wanted to add a fourth option to this, you can click the as plus icon and add in our fourth option.
Lastly here you also have control over your submit button. In this case, our submit button text says “send my message,” but you could change this to be something more on brand or something more actionable, if you wanted to test different CTA text.
I'm going to save my changes by hitting this “publish” button at the top. And now that I've got all of my form fields, the way that I want them, I'm gonna go over to the emails and actions tab. This tab contains everything that happens when the user hits the submit button. The first thing that happens here is Ninja Forms will save this submission to a CSV. Then it will email the user using the email that they put in this field. You can also update the subject line and the email message that the user receives here. It will also email the admin. The two email address here would be whoever on the client side or your side wants to receive notification of the contact form submissions.
The other thing you wanna make sure to do for your email admin is to go under advanced and fill out the “from name” and “from address.” The from name will be your company's name. For demonstration purposes, this one will be “Melon Marketing.” And your from address will be
no-reply@marketing.com. You would replace this with your company's name.
And lastly, we will redirect our users to a thank you page. This thank you page is one that we have set up but removed from the sitemap, so we can use this for goal tracking in Google Analytics.
Once all of your form fields and email settings are the way you want them. You can publish the form up here using the same “publish” button. And then you'll click on this link icon, which will give you your embed form code. You can copy this shortcode and place it into any text editor on your site. But in this case we're using our contact page. You can copy this, this embed code, paste it onto your contact page and the form will load in that text editor.
If you have any additional questions out how Ninja Forms works, I recommend checking out Ninja Forms, website, or going to your how-to document for further instructions.
- Go to: Ninja Forms > Dashboard
- In the Ninja Forms dashboard, you should see all of the Ninja Forms on your site.
- Click the gear icon next to your form to edit, duplicate, preview, and delete your form. You can also view the submissions in this location.
- Click “Add New” or edit an existing form. Here you will see three tabs where you can control all of the content and form settings within the form.
- Find the form to edit/create
- Go to the “Form Fields” tab – In this tab, you can edit the forms and the submit button on the form.
- Add in the form fields you want with the + icon in the lower-right corner.
- The last field on the form should be the submit button and should contain actionable text, such as “Get in Touch” or “Send my Message.”
- Once desired form fields are added. Click “Publish.”
- NOTE: the button will always say "Publish" - even if the form has already been published.
How to Edit Notification Settings
- Find the form to edit/create
- Go to the “Email & Actions” tab – In this tab, you can edit the thank you page redirect, email admin, and email user settings for each form
- Thank You Page Redirect
- The page visitors will see after the form is submitted.
- The url should be unique for every form on the website so we recommend going with the name of the form + thank-you... like this "/contact-thank-you/" or /demo-thank-you/"
- NOTE: We always recommend using a thank you page redirect because it makes creating form goals in Google Analytics very easy to create and track.
- Admin/Email Admin Notifications
- Edit this to change/update the admin email notification
- SEND TO EMAIL: Should be the email on the admin side who should receive the email notification.
- FROM NAME: Should be the name the user entered in the form fields.
- REPLY TO: Should be the user’s email address that they enter in the email field. You can select this as a merge tag option.
- SUBJECT & MESSAGE: Should contain the information from the form that is relevant to the person receiving the notification. This is the content that will make up the notification email when it is sent to the admin.
How to add a ninja form to a page
- Gutenberg CMS: Once the form is complete, copy the short code and paste into a content editor on the page where you want the form to live.
- Elementor CMS: Load in the desired Form block from the page block library templates, in the form Ninja Form or Form widget, select the from you want to you include and save the page.