Skip to main content
Glendon Campus Alumni Research Giving to York Media Careers International York U Lions Accessibility
Future Students Current Students Faculty and Staff
Faculties Libraries York U Organization Directory Site Index Campus Maps
Web > Create new web form in wordpress

Create new web form in wordpress

This is a tutorial for building a web form using Ninja Forms Plugin that lets the user create a basic web form with email functionality.

The plugin has already been setup by LCS for all library sites and is available for use.

Getting Started

1)   Login into library wordpress cms as you usually do.

2)   Check top menu bar to make sure you are in the correct site where you wish to create the form in. If not, please change it.

wordpress-site

 

 

Note: If you cannot switch to the site you require, its possible you may be lacking administrative / editor permissions. Contact your department wordpress administrator or lcs.

3)  Once in the dashboard of your site, click the “Forms” link from the left navigation menu (near the bottom).

wordpress-site-2

 

 

4)  On the Forms page, click “Add new form”.

wordpress-site-3

 

 

5) You will now see a page with three tabs, Form Settings, Field Settings and Form Preview respectively. Each is a step in the form building process.

6) Next section will take you through each tab to help you with the setup & creation of your form!

Form Settings

Contains general and email settings for the form. For example, form title, confirmation message, whom to email etc.

Basic Settings

Ninja Forms: Form Settings-1

 

Email Settings

Provide an email address from which user will receive the email. You may use yours or shared email and/or generic email.

Form_settings_email_1

 

User email is a confirmation to the user that their form was submitted and can also be used in explaining next steps or record copy of the submission.

Form_settings_email_2

 

Administrator email can be one or more personnel that should receive an email upon form submission.

Form_settings_email_3

 

Finally, it is important to save your form settings. Next task is to create the form fields.

Fields Settings

This is the where you will create your form by adding fields. Click the buttons on the left to add them to your form.

field_settings_1

 

Next, the field will be generated on your right with specific field options. Once you have filled in the options, either save or continue to add more by clicking on buttons on the left.

You may save field settings and continue later if you wish, but please save field settings or your new/updated fields will be lost.

field_settings_2

 

The example below is for adding radio buttons, for which you need to add a list. Click the list button on the left and give the list a Label.

To add items to your list, you need to click “Expand / Collapse Options“.

Next, click “Add New” to create a new item. Give the item a label and repeat “Add new” for other items.

After finishing with list items, select the list type you would like: drop-down, radio buttons, check-boxes or mult-select. In the image below, we selected radio & made the list required.

field_settings_3

 

Adding headings in your form can be done by “Text” button. Simply add the Text button, write your text and assign appropriate heading formatting style from the editor.

field_settings_4

 

In order to avoid internet robots filling your forms, we need to have a test to check if the person filling the form is human or not. This done by an anti-spam field. Click Anti-Spam button to add to the form and setup a question and an answer. It is best to use simple math arithmetic, i.e. Q: 2 + 2 / A: 4 or similar.

field_settings_6

 

Last but not least, the submit button. Nothing special here. Just simply add the button to form and make sure its the last item.

field_settings_5

 

If you wish, you may move the placement of your fields by dragging them up or down by clicking and holding on to them.

Finally, save your field settings. You may preview your form by clicking on the next tab.

Form Preview

Clicking this tab will result in a new page/tab to be opened with your form preview.

How to attach the form to a CMS page?

There are two ways:

  1. Under form settings -> ‘Append to a page‘ you may select a page from the drop-down list of your choice. OR
  2. From the left navigation, click on Forms. You will see a list of all the forms.
    Under the column Short Code, copy the line (including the square brackets) of your form. Example: <bracket> ninja_forms_display_form id=1 <bracket>. Then paste it in the page of your choice, within the same website.

 

Submissions

To view form submissions see screenshot below.

Viewing Submissions

Comments are closed.