Skip to content

Using WordPress Forms – Step by Step

  • 13 min read
  • by

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.

"Add Plugins" page

Search for “WPForms” in the “Search plugins bar”.

Search WPForms

install “Contact Form by WPForms” by clicking on “install Now”.

Click Install Now

Once it finishes installing, click “Activate” to activate the plugin.

Activate Contact Form by WPForms

Once the plugin is activated, a new menu item – “WPForms” – will be added to the admin dashboard’s “Home” page.

new menu item

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.

Forms Overview

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.

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.

Choose Blank Form

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.

Form editing page

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.

Adding fields

For this tutorial, we will be adding more fields to our form.

Adding more fields

Reordering Fields

To reorder the fields, click on and drag them.

Reordering Fields

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.

Editing Fields

There are also more advanced options. Click on the arrow beside Options to see them.

more options

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.

deleting fields

Saving Forms

Once you’re done with your changes, save the form by clicking the “Save” button on the upper right of the page.

Click "save"

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.

General Settings

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).

Notifications 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.

Confirmations tab

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.

Adding form blocks


Let’s give the page a title – “Another WordPress Page”. Afterwards click on “Add block”

Give the page a title

Search for “WPForms” and then click on the “WPForms” icon.

Search for "WPForms"

Select the form you want to use. In this example, we will use the form we created – “Sample Form”.

Select a 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.

Publish

Here is what the form looks like on our page:

Form frontend

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.

Add a form with its shortcode

We will be using a new page. Paste the shortcode in the block editor. Publish it afterwards.

Page with shortcode

Here’s what that page looks like:

Frontend: form with shortcode

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.

Adding a form to a post

Here’s what the post looks like:

Look of the post

Adding a form through the WPForm shortcodes

Here, we’re pasting the form shortcode and embedding it in a post:

Adding forms to a post with shortcodes.

Here’s what the post looks like:

Look of the post

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”.

Click on "Widgets"

Scroll down and look for the “WPForms” widget on the left side of the page.

Look for the "WPForms" Widget

We will assign the form location on the “Blog Sidebar” widget area.

Choose "Blog Sidebar"

We can see that the WPForm widget has been added to the “Blog”

WPForms at the Blog Sidebar

In this example, we will name the form as “Widget Area Form” and the form we will use is “Sample Form”

name the form

Here is what the form looks like on the widget area we chose – the blog sidebar.

look of the form

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”

delete a form block

Click on “Remove Block”.

Click "Remove Block"

Click “Update” to apply the changes.

Click "Update"

Deleting the form shortcode

If you will be removing a form shortcode, just delete it and then click “Update” to apply the changes

deleting the form shortcode

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 block

Deleting the form shortcode

To delete a form shortcode, just delete it. Click “Update” to apply changes.

Deleting the form shortcode

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.

removing from a 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.

Managing WordPress Forms with WPForms

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.

Previewing forms

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.

duplicating forms

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.

deleting forms

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.

nv-author-image

Kristin Eitel

Leave a Reply

Your email address will not be published. Required fields are marked *