Introduction
Most sites require data from users – names, addresses, etc. Users provide the data mostly through forms. There are many types of forms – Contact Forms, Payment Forms, Login Forms, even Feedback Forms. These forms store the data on a database. When needed the information may be retrieved, edited or deleted. Without forms, users would not be able to provide the easily. They may have to directly contact a site’s owners/admins. This is inefficient, unorganized and haphazard. Forms make it easy to provide data in an efficient, organized and safe manner. Forms are an essential part of a website.
You may find that you need to install and use a form in your WordPress site. This tutorial will show you how.
We will be using a free version of a very popular plugin – Contact Form by WP Forms (also known as WPForms Lite [Note: We will use the name “WPForms Lite” to refer to the plugin]). Though free, this version is limited in its features. If you happen to need more features than the free version offers, purchase WPForms Pro. WP Forms is very popular primarily because it is easy to use – It allows you to create forms by dragging and dropping fields in a very intuitive interface.. There are many other plugins we can use to build forms. Some of these plugins may offer more extensible features Some with more functionality. None, however, are as easy to use as WP Forms.
We’ve chosen our plugin. We can now learn how to install, setup and use it.
In this tutorial, we will be learning how to install, setup, and use WPForms Lite.
Installing WPForms Lite
We need to do download and install the WPForms Lite Plugin. We will do this through WordPress admin dashboard. From the WordPress admin, hover over “Plugins ” and then click “Add New”. We will be taken to the “Add Plugins” page.
Search for “WPForms” in the “Search plugins bar”.
install “Contact Form by WPForms” by clicking on “install Now”.
Once it finishes installing, click “Activate” to activate the plugin.
Once the plugin is activated, a new menu item – “WPForms” – will be added to the admin dashboard’s “Home” page.
Click on “WPForms” to access the WPForms’s “Form Overview” page.
We can add and manage our Forms here. We can now create forms for our site.
Creating a WordPress Form
Creating a Form
From the admin dashboard, hover over “WPForms”, and click “Add New”. We will be redirected to the form setup page.
Type a form name inside the “Form Name” field. For this tutorial, we will name the form “Sample Form”. Next, we will choose a template. We will choose the “Blank Form” template since we will be creating our own form. If you need a pre-made form choose another template.
Upon choosing a form template, we will be redirected to the form editing page. Here, we can edit the current form. On the left are the fields we can add to the form while on the right we can see the form’s layout.
Adding Fields
To add a field to a form, hover over the field you want to add and then click on it. The field will be added onto the form.
For this tutorial, we will be adding more fields to our form.
Reordering Fields
To reorder the fields, click on and drag them.
Editing Fields
To edit a field, click on the field. This will open the “Field Options” tab. We can edit a field’s property once it the tab is open. For this tutorial, we will edit the “Single Line Text” field. In the image below, We changed the field’s label, added a field description, and toggled the field’s “Required” property.
There are also more advanced options. Click on the arrow beside Options to see them.
Deleting Fields
To delete a field, hover over the “Delete Field” icon and then click it. You will be prompted to continue deleting. Click “OK” to delete the field.
Saving Forms
Once you’re done with your changes, save the form by clicking the “Save” button on the upper right of the page.
Configuring a Form
General Settings
We can configure a form’s settings by clicking on the “Settings” tab on the left menu. By clicking on it, we will be redirected to the current form’s “General” settings tab. In this tab, we can change a form’s name, give a form a description and modify a form’s submit buttons. There are also other settings here. For this tutorial, we will not modify anything. If you need to change something you can do so.
Notifications
The next thing we will look at is the “Notifications” tab. Click on “Settings” and then click on “Notifications” We will see the “Notifications” tab. This is where we configure email notifications when a form on our WordPress site is submitted. We can set who is notified and the message they receive as well as other notification specific settings here.
(Note: For the notifications to work, your host provider (including the localhost) has to be configured to be able to send mail. Another option is to install a mailing plugin. It is recommended that you do the second option. A good mailing plugin is WP Mail SMTP Plugin which also integrates seamlessly with WPForms Lite. Here’s how to set it up. Once set up. notifications will be sent to the address we configured in the “Notification Settings” tab).
Confirmations
We will next check the “Confirmations” tab. This is where we configure what happens whenever a form is successfully submitted. We can choose to show a message, show a confirmation page, or redirect to a link. Choose how form submission is confirmed on the “Confirmation Type” dropdown.
Adding Forms to a WordPress Site.
We’ve created a form and configured it. We can now use the form on our site.
Adding Forms to a WordPress Page
Adding form blocks with the WPForms Widget
We will now add the form using the WPForms widget. We will add the form to a new WordPress page (although forms can be added to an existing page as well) From the admin dashboard, hover over “Pages” and then click “Add New”. We will be taken to the page editor.
Let’s give the page a title – “Another WordPress Page”. Afterwards click on “Add block”
Search for “WPForms” and then click on the “WPForms” icon.
Select the form you want to use. In this example, we will use the form we created – “Sample Form”.
We can now see that the form has been added to the page’s block editor. Click “Publish”. You will be prompted again. Click “Publish” to confirm.
Here is what the form looks like on our page:
Adding a form through the WPForm shortcodes
Another way to add a form is to embed its shortcode on a WordPress page. From the form’s editing page, click on the “Embed” button. It will show the form’s shortcode (think of this as an ID). Click and copy the shortcode.
We will be using a new page. Paste the shortcode in the block editor. Publish it afterwards.
Here’s what that page looks like:
Adding forms to a WordPress Post
Adding forms to post is similar to adding forms to a post. You can add a block to a post or you can use the form’s shortcode.
Adding form blocks with the WPForms Widget
in the image below, we are adding the form to a post using the WPForms block.
Here’s what the post looks like:
Adding a form through the WPForm shortcodes
Here, we’re pasting the form shortcode and embedding it in a post:
Here’s what the post looks like:
Adding Forms to a Widget Area
We can also add a form to a Widget Area.
From the admin dashboard, hover over “Appearance” and click on “Widgets”.
Scroll down and look for the “WPForms” widget on the left side of the page.
We will assign the form location on the “Blog Sidebar” widget area.
We can see that the WPForm widget has been added to the “Blog”
In this example, we will name the form as “Widget Area Form” and the form we will use is “Sample Form”
Here is what the form looks like on the widget area we chose – the blog sidebar.
Removing Forms from a WordPress site
In this section, we will now learn how to remove forms on a WordPress site.
Removing WordPress Forms from a Page
Deleting the form block
From the admin dashboard, navigate to the page you want to edit.
To delete a form block, hover on and click on the form. Click on the “More options button”
Click on “Remove Block”.
Click “Update” to apply the changes.
Deleting the form shortcode
If you will be removing a form shortcode, just delete it and then click “Update” to apply the changes
Removing Forms from a Post
Removing forms from a post is similar to removing them from a page.
Deleting the form block
Hover over the form and click on it. Click on the “More Options” button. Click “Remove Block” and then click on “Update” to apply the changes.
Deleting the form shortcode
To delete a form shortcode, just delete it. Click “Update” to apply changes.
Removing Forms from a Widget Area
We can also delete forms from a widget area.
From the admin dashboard, navigate to the “Widgets” page.
Focus on the widget area you will be removing a form from. Click on the arrow of form widget to be deleted. Once the tab expands, click “Delete”
In this tutorial, we will be removing the “Widget Area Form” from the “Blog Sidebar” widget area.
Managing WordPress Forms with WPForms
We will now be looking at common WPForms form management tasks. These can be done from the “WPForms Forms Overview” page.
Edit Forms
To edit a form, hover on its name and click on it. Alternatively, you can click the “edit” link. This will take you to the form’s editing page. You can start editing the form once you’re here.
Previewing Forms
To preview a form, hover over it and click the “Preview” link. This will redirect to a page where we can preview what the form looks like.
Duplicating Forms
You may need to duplicate a form. To do that hover over the form you need and then click on the “Duplicate” link. You will be prompted next to confirm. Click “OK” to duplicate. You will see the form duplicated.
Deleting Forms
To delete a form, hover over it and then click on the “Delete” link. You will be prompted if you need to delete it. Click “OK” to delete.
Conclusion
We’ve now finished our tutorial.
To recap, we learned how to add, modify remove forms from pages, posts, and widget areas. We’ve also learned common form management actions.
We’ve learned a lot, now we’re ready to apply it.
