Form Settings Field Settings Form Layout Form Examples


Form Settings:

From Email Settings

The info added here controls the name and e-mail address that form notifications are sent from. Add sender info for each form’s notifications.


Administrator Email Settings

This is the e-mail that is sent to the client when a user submits a form. Add admin notifications for each form.

Note: AOL and Yahoo have recently changed their mail policies and will not work as 'From Addresses'.


Administrator Email Addresses – Assign as many people as necessary to receive notification when a user successfully submits your form. Separate recipient email addresses with a comma.  


Admin Subject – This is the subject that email addresses assigned above will receive upon successful form submission. 


Admin Email Message – Create a message that will be emailed to the email addresses assigned above after a successfully completed form. Create a simple message or write a more personal message by using the user submitted data. To accomplish this, use shortcodes.

Shortcode Example: To include field data entered by the user, for instance a name, use the following shortcode: [ninja_forms_field id=23] where 23 is the ID of the field you want to insert. This will tell Ninja Forms to replace the bracketed text with whatever input the user placed in that field. Find the field ID by expanding the field for editing.


Include a list of fields – Check this box if you simply want to send a table of the users complete submission at the end of your crafted message.


User Email Settings

This is the e-mail that is sent to the site user when they submit a form. Add user notifications for each form. 


Subject for the user email – This is the subject users will receive. 


Email message sent to the user – Here you can craft a message that will be emailed to you users after the successfully complete the form. As with the admin e-mail, create a simple message or write a more personal message by using the user submitted data. To accomplish this, use shortcodes. 


Include a list of fields – Check this box if you simply want to send a table of the users complete submission at the end of your crafted message.


Basic Form Behavior Settings

These settings determine each form’s basic display and functionality. 


Display Form Title – Select this to display the form’s title on the page. 


Require user to be logged in to view form? – Select this to hide the form from site users who are not logged in.

Note: Hiding the form from non logged-in users will not hide the containing row or column.


Add form to this page – Do not add forms using this method. Instead, follow the steps to simply add a form widget to a page layout. 


Submit via AJAX (without page reload)? – Check this option to process the form without the page reloading. 


Success Page – Select a page that the form will redirect to after a user successfully submits the form. This will not include any form data or success message. Leaving it set to none means that the user will stay on the page where they filled out the form and will receive any success message that is set here in the Basic Settings.


Clear successfully completed form? – Select this if the data the user submitted in the form should be removed after the form has been successfully submitted. 


Hide successfully completed form? – Select this box to hide the form on the page after a form has been successfully submitted. 


Success Message – Create a message that will be presented to users after the successfully complete the form here. The success message can be a simple message or write a more personal message by using the users submitted data. To accomplish this you would use the ninja_forms_field shortcodes. 


Limit Submissions – Select the number of submissions that this form will accept. Leave empty for no limit. Limit Reached Message – Enter a message that will display when this form has reached its submission limit and will not accept new submissions.

Custom Notifications & Emails: For a more in-depth look at how to include form data in notification e-mails, success pages OR in custom e-mails, check out this help article on using form data in notifications and emails.

Field Settings:


Favorite Fields: displays fields marked as ‘favorites’ Mark a favorite field with the star icon.  For sites that have many forms, use this feature to make the most widely-used fields available in one quick and easy location. 


Template Fields: Add basic form fields. 


Layout Elements: Add layout elements that are helpful in designing forms. Add a manual divider with the HR or a basic text block with the Text option. 


User Information: Add input fields specifically built to enter user information. Use these whenever collecting a name, email address, physical address, phone number, etc. 


Payment Fields: Add fields specifically built for pricing info. These will be further developed in later versions of UXi®.


To add a field to the form, click it in the left column and it will display in the right column. Drag n’ drop the field in the correct order. Once the fields are in the correct order, give them labels and position the labels accordingly.

     
  • Left of Element – Displays the label to the left of the field. 
  • Above Element – Displays the label above the field.
  • Below Element – Displays the label below the field.
  • Right of Element – Displays the label to the right of the field.
  • Inside Element – Displays the label inside the field.
Note: Input masks should never be used with the 'Inside element' label position.

Form Layout

This page contains lots of useful information about the built-in css styles available for forms. Refer to this section when form fields need added styling or alignment. Below is a more detailed look at some form layout examples and the CSS classes used to create them.


Form Preview:

This feature not fully compatible with UXi®. . . YET.


Form Examples