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.
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.
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).
4) On the Forms page, click “Add new form”.
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!
Contains general and email settings for the form. For example, form title, confirmation message, whom to email etc.
Provide an email address from which user will receive the email. You may use yours or shared email and/or generic email.
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.
Administrator email can be one or more personnel that should receive an email upon form submission.
Finally, it is important to save your form settings. Next task is to create the form fields.
This is the where you will create your form by adding fields. Click the buttons on the left to add them to your form.
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.
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.
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.
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.
Last but not least, the submit button. Nothing special here. Just simply add the button to form and make sure its the last item.
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.
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:
- Under form settings -> ‘Append to a page‘ you may select a page from the drop-down list of your choice. OR
- 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.
To view form submissions see screenshot below.