If you have a WordPress website, be it a blog which you update periodically or a static website, a contact form is a valuable addition to the site.
Instead of asking your readers to contact you via mail and allowing spammers access to your mail, you can provide a contact form page and ask your users to give feedback or send queries via the form.
You may want to create a form for other purposes as well where you want your readers to interact with you.Ninja Forms, a popular free form creation plugin can be used for creating forms on your site.
Login to your WordPress site as admin. Click on Plugins->Add New from the left side bar. Type in Ninja Forms in the Search box on the top right corner and press enter.
From the results, click on the Install Now button next to the Ninja Forms plugin to install it.
After installation is completed, click on the Activate link below the Ninja Forms in the plugins list to activate it.
On activation, you will find the item Forms on the left sidebar.
##Creating a Simple Contact Page with a Ninja Form.
To create a simple contact form for your readers to contact you, click on Forms->Add New from the left sidebar. You get a screen as below. The first tab that is open is Build Your Form. This tab contains the building blocks which can be used to construct our form.
Before diving into the form creation, it is important understand the building blocks of a form.
The Form elements are displayed on the left side. They are grouped under 5 headings.
- Favourite Fields
- Template Fields
- Textbox - for single line text input
- Checkbox - for setting a toggle feature, either on or off
- List - Four types of lists possible - dropdown, radio buttons, checkboxes and multi-select list
- Hidden Field - hidden fields whose values are not entered by user.
- Submit - the submit/send button
- Anti-Spam - A field to keep spammers away by asking a human-answerable question
- Timed Submit - a submit button that waits for a certain (can be set) time before the user can submit, to prevent users from doing several immediate consecutive submits.
- Textarea - for multiline text input
- Star Rating - a rating field with a certain number of stars (can be set) being displayed
- Calculation - a numeric/float field for specifying amounts that can be totalled up in the form
- Number - numeric field
- Layout Elements
- hr - horizontal line.
- Text - some text to be displayed, without any input from reader
- User Information
- First Name
- Last Name
- Address 1
- Address 2
- Zip/Post Code
- Payment Fields
- Tax - numeric/float field for specifying tax amount or percentage to be added to an amount field
- Sub Total - numeric/float field for holding the total of other calculation fields
- Total - numeric/float field for holding the total of all calculation fields in the form
Each element comes with different attributes/settings specific to that type of element. Using each element, you can customize your fields by changing the settings.
The first attribute of any of the fields is the Field ID, which is a number. This cannot be set and it is auto-assigned when you click on any element to add it to the form.
The next attribute of all fields is the Label: This is the text that is displayed before asking for input.
Another attribute which most elements (except the Submit elements and the Hidden field element) have is the Label Position. This refers to the positioning of the label with respect to the input element. The options available are listed in a dropdown box - Left of Element, Above Element, Below Element, Right of Element and Inside Element.
Use the red Remove link at the bottom to remove the element from the form.
All the elements have a star on the top right corner. Clicking on this will show a popup box asking you to name this favorite field.
Name it and it will appear in the Favorite Fields section on the left side. When you repetitively use a particular element with certain options, you can custom save such an element as a favorite.
Apart from the above, there are some basic settings unique to each element and three groups of settings -- Restriction settings, Calculation settings and Advanced settings.
A brief note on the other basic settings for each element:Textbox - Placeholder attribute is used to specify some text that already appears in the input box which can be used as a prompt/an example to the user.Checkbox - Default value attribute to set whether the checkbox is checked or unchecked by default.List - List Type attribute which can be chosen from one of the four types - dropdown, radio buttons, checkboxes and multi-select list. A dropdown list and radio buttons are used to select one item of the options. The primary differences between the two are that radio buttons are used for lesser number of items and radio buttons, once selected, cannot be cancelled to return an empty value.
Checkboxes and multi-select dropdown list are used when the user can choose multiple items.
By default, there are three list items displayed. Each list item has a Label which can be changed, a Calc field, which can be used to specify some amount to perform calculations later, a Selected checkbox to indicate whether the item will be selected by default and a three parallel lines icon used to reorder the items.
If you check the checkbox Show list item values, then another field Value is shown against each list item. This is a programmatic value which may be different from the label and this gets stored in the database.
If you choose Muli-select box, you can specify the size of the box as another attribute.
An Add New button and an Import List Items are also present to add more items to the list. An item can be removed by clicking on the x on the extreme left of each item.Hidden Field - Default value attribute which can take one of several possible values which can be chosen from the dropdown box -- None (or) User's ID/First Name/Last Name/Display Name/Email, if the user is logged in (or) Post or Page ID/Title/URL, if available (or) Today's Date (or) Custom value (or) Querystring Variable. For the last two choices of Custom and Querystring Variable, you get an extra input box to specify the same.
Another attribute is a checkbox specifying if this hidden field is an email address. If this is checked, the input will be validated during form submission.
The last basic attribute of this element is another checkbox asking if a copy of the form should be sent to this email address.Submit - This element does not have any extra basic setting. But there is an inherent restriction that you can add only one Submit field to the form. After one is added, the element is disabled on the left side panel.Anti-Spam - Spam Question and Spam Answer are the extra text input fields for this element. The user is expected to give the answer that proves that he/she is human.Timed Submit - Timed Submit has two labels, one of which is used when the timer is on. This label can also use %n as a placeholder for the number of seconds remaining for the timer to expire. Once the timer expires, the other label is use.
In addition, there is a Number of seconds for countdown attribute as well that one can use to choose the waiting time.
Like the Submit element, this element also has is an inherent restriction that you can add only one Timed Submit field to the form. After one is added, the element is disabled on the left side panel.Textarea - The Default value attribute of the Textarea element can be filled with some value that appears in the form by default.
There are three checkboxes apart from this. Show Rich Text Editor, when checked, shows the textarea with the rich text editor as below.Show Media Upload Button, when checked provides the extra functionality of adding a media (image/video/audio) to the textarea.Disable Rich Text Editor on Mobile is used in conjunction with the Show Rich Text Editor option, so that the rich text editor is not displayed when browsing the form's page through mobile.Password - There is a checkbox for specifying if this element should be used as a registration password field. If this is checked, another label attribute appears where you have to specify the label for the re-enter password text box.
In the form, this translates to two password input boxes.Show Password Strength Indicator checkbox can be checked to show password strength in the form.Star rating - Number of stars can be specified.Calculation - Output Calculation as is a setting for which you can choose None, Textbox or HTML. If you choose HTML, a rich text editor appears for you to edit how you want the value to appear.
You can also choose to Disable input by checking the checkbox so that users cannot change this value.Calculations Value can be automatically totaled or there are advanced options like specifying operations and fields or using an equation.
If you choose specify operations and fields, you can custom calculate the value with a combination of fields from the form and operations.
If you choose to use an equation, you can enter an equation using the field IDs.
Finally, Number of decimal places can be specified.Number - Default Value attribute that takes None, User ID if logged in (or) Post/Page ID if available (or) Custom value. You can also specify Minimum Value, Maximum value and Step (amount to increment by)Text - Some text that you may want to appear on the form without any user input. A rich text editor appears for your to type and format it. Apart from the editor, there is a Text Element dropdown with values div or span or p or any of the HTML heading sizes.
The User Information elements are ready-made elements constructed from the basic Template Fields elements above. The First Name, Last Name, Address1, Address2, City, Zip/Post Code, Email and Phone elements are actually textbox elements with labels changed.
In addition, Phone element has an Input mask of - (555) 555-5555 so that the user cannot enter anything other than a phone number in this input field.
The Email element has a restriction setting to validate input as an email address.
The State element is a list with the US states already entered as options and abbreviations entered as values. If you want to use this element for other countries, you will have to choose a List element and enter your country's states and values as options.
The Country element has a default country attribute given as a dropdown list, where all the countries are listed as options. On choosing this element, the form will show a dropdown list of all countries already loaded.
There are three payment fields. Tax can be specified as a percentage in the Tax Percentage attribute.Sub-total and Total are special cases of the Calculation element and so share the same attributes.
Restriction Settings is a group of settings which restrict the input in any way. For example, validating a textbox as email address or setting a field as a required field or applying an Input Mask or limiting the number of characters of input.
Calculation Settings is used to indicate whether a field should be included in the auto-totaling of a Calculation field later in the form.
Advanced Settings are also different depending upon the element. You can sort a field as numeric, you can use Custom CSS Classes to display the field, you can show help text or add a description to the field using this section.
###Building the form
Having understood the building blocks, you can use a combination of them in your form depending on your requirements. The first name of the user, the user's email and the message would be necessary for a bare minimum contact form. So, add them to your form.
From the User Information Fields, click on First Name. The First Name field appears on the form on the right.
The label is "First Name". Note that if you had chosen to use a Textbox element, you would have had to change the label. Leave the placeholder blank.
From the User Information Fields, click on Email. The Email field after the First Name on the right. Check on Required under Restriction Settings.
From the template fields, click on Textarea for the message field. Change the label to Message. Check on Required under Restriction Settings.
From the template fields, click on Submit to add a submit field. Change the label to Send.
One of the tabs on the screen is the Preview tab. Click on this to preview your form on a new window. You will see something like this.
If you are happy with what you see, click on the blue save button to save the form. If you haven't already named your Contact form a popup appears asking you to give a name.
You have successfully created the contact form.
Alternately, there is a Contact Form that comes with the installation of the plugin. You can use this as is, or customize this to your needs.
Click on Forms->All Forms on the left sidebar. you can see a form with the title Contact Form. This is the default form. You can also see the Admin Contact Form that you just created. From this screen, you can choose to Edit, Delete, Duplicate, Preview or View Submissions for each form.
Click on Edit to edit the form.
###Emails & Actions
The second tab on the form editing screen is Emails & Actions. Once the form is built, click on this tab to enable actions to be taken based on certain events.
Click on the Add New button to add a new action.
Firstly. Specify an Action Name. For instance, once a user submits some details in a form, you may want to notify the admin of the site of this event. So, type Email to admin.
The next item is Type. Choose Email. The other options are to Redirect (redirect to a particular page) or Success Message (display a message indicating successful submission of form).
Click on the input box against From Name. From the list of fields and their IDs available, click on the First Name field.From Address is similar; click on the input box and choose the email field.To can be filled with the Site Admin's email address.
Fill in a Subject and a Message in the next two input fields. You can use the form fields in the Email message. To insert a field, use the search box at the top of the rich text editor.
Check on the Submission CSV for the submission field values to be attached to the mail.
Under Advanced Settings, you can optionally specify the format of the email as HTML or Plain Text and also give the Reply To, Cc and Bcc fields.
Click on Save. Click on Back to List to go to the Emails and Actions list.
You can add another action to show a message after successful submission by clicking on Add New.
Give Action Name as Submission Message. Choose the Type as Success Message. Type in an appropriate message and Save.
The third tab is Settings. Settings are grouped under two heads.Display Settings
Here, you can specify if the Form Title should be displayed. You can add this form to any already existing page of your site by choosing a page from the dropdown box. You can choose to submit via AJAX, i.e., there will be no page refresh. Then you can choose to clear the fields after submission or even hide the form after a submission.Restrictions
Under this, you can restrict that users should be logged in to view this form. If a user is not logged in, you can display a custom message. You can also limit the number of submissions that you want the form to accept. When the limit is reached, you can display a custom message.
###Contact Page Creation
To create a Contact Page with your contact form, click on Forms->All Forms from left side bar. Copy the Shortcode against your form.
Click on Pages->Add New on the left side bar to create a new page. Paste the copied shortcode into the body of this page.
Now, type a title for this page - Contact us
Click on Publish to publish the page.
Click on the View Page link to see the page. You can see that your contact page is ready.
###Verifying the Contact Form
To verify if it works, type out an imaginary name, email id and message and click on the Send button below.
If you give an invalid email address, you will get an error message.
If all fields are valid, your submission will be accepted.
Now, go back to the dashboard, Click on Forms->All Forms, and Edit Admin Contact Form. Click on Submissions, the last tab of the screen. You will see the message that was submitted.
All messages that are submitted for each form will be collected here. You can Edit, Export, Trash or Duplicate the messages.
You can also download these submissions, search through them, perform bulk actions like export or filter them based on date.
By clicking on Forms->Import/Export on the left side bar, you can import or export forms or your favourite fields.
You can also change some of the settings that are set across forms, like date format and Currency symbol, by clicking on Forms->Settings.
Creating a contact form for your site is very simple. However, I have explained all the building blocks available so that you can create other types of forms.
For instance, you can build an order form, by providing a list of items to buy, and using calculation fields to total them up and add tax or other extra charges and deduct discounts. With the many add-ons that Ninja Forms has, there are many powerful possibilities.
Do explore the options and build great forms for your site.
(This tutorial was created using WordPress version 4.3 and Ninja Forms version 2.9.27)