Creating Your First Form

Are you ready to get started with your first form from WPForms? By following the step by step instructions in this walkthrough, you can easily publish your first form on your site.

Note: The steps below are for WordPress version 5 or newer. If you are using an older version WordPress, please see our tutorial about working with forms in the WordPress Classic Editor.


Adding a New Form

Before getting started, make sure you’ve installed and activated WPForms on your site.

To begin, you’ll need to be logged into the WordPress admin area. Once there, click on WPForms in the admin sidebar to go the Forms Overview page.

Then, to create a new form, click on the Add New button to launch the WPForms form builder.

Add New Button

In the Setup page of the form builder, you can enter a name for your form (such as “Contact Us”) in the Form Name input field. If you’d rather not enter a name, then the form name will default to the name of the template you choose.

Form Name

Below the Form Name input, you’ll find form templates in the Select a Template section. These are pre-built templates of commonly used forms to help you quickly get started. Go ahead and click on the template you’d like to use.

Create a Simple Contact Form

Note: Looking for even more templates? For more information, please check out our Form Templates Pack addon guide.

Customizing Form Fields

Once you’ve selected a form template, the form builder will take you to the Fields screen.

The left panel will show you the fields available for you to use. The fields you have access to will depend on your license level.

Field Panel in Form Builder

Note: If you’d like more information on which field to choose for your form, be sure to check out our tutorial.

On the right panel, you will see an editable preview of your form.

Form Preview Panel

To add a field to your form, you can either click on the name of the field, or drag and drop it from the left panel directly into the form preview.

Click and Drag a field

To delete a field from your form, you can hover over the field and click the red trash can button.

Delete a field button

Accessing Field Options

Field options allow you to configure the details and settings of each field, such as field labels and description.

To view and edit the field options available for each field, click on the field in the preview screen. The field options will then appear in the left panel.

Field Options

Once you’re done editing the field options, click the Save button to save your changes.

Save Form Button

Editing Form Settings

To access your form’s settings, click on the Settings tab on the left side of the form builder.

Settings tab in form builder

For this tutorial, we will focus on the first 3 settings available: General, Notifications, and Confirmation.

General

General Settings in WPForms

In this section, you can change the form name and description. You can also customize the submit button and toggle spam protections for your form.

Notifications

Notification Settings in WPForms

Form notifications are automatic emails that are sent out when your users submit forms. In the Notifications section, you can configure these settings according to your preference.

Note: If you’d like more details on configuring notification emails, be sure to check out our guide on how to set up form notifications in WPForms.

Confirmations

Confirmation Settings in WPForms

Form confirmations are ways to inform users that they have successfully submitted a form. They can also be used to provide more information or options to users.

For more details on Confirmation settings page options, check out our tutorial on setting up form confirmations.

Once you’re done setting up your form, click on the Save button at the top to save the form. Then, click on the X button to exit the form builder.

Save Form

Displaying Forms on Your Site

There are several different ways to add your forms to a site. For this tutorial, we’ll focus on how to display forms on your site within a page or widget.

Embedding Your Form to a WordPress Page

There are two different ways to embed your forms to a WordPress page: by using the built-in embed wizard through WPForms, or manually, through the Block Editor.

Embedding Through the WPForms Embed Wizard

Once you’ve finished building your form, you can use the Embed Wizard right from your form builder by clicking the Embed button.

Embed Form Button

From there, you’ll have the option to either add your form to a new page, or to select an existing page to add your form to.

Embed Options

By selecting the Create New Page option, you’ll be asked to enter a name for the page. After adding a name, click the Let’s Go button to embed your form and publish your page.

Embed form in New Page

If you choose the Select Existing Page option, you’ll be asked to select a page to embed your form to.

Select Page to Embed Form

Go ahead and select the name of the page you’d like to embed your form on, and then click the Let’s Go button to be redirected to the block editor to embed your form.

Embedding with the Block Editor

Once you’ve opened the editor, you can add a new block by clicking the + (plus) icon in the upper left corner.

Add a block

Once you’ve clicked this icon, a menu of block options will display. To locate the WPForms block, you can search “WPForms” or open the Widgets category. Then click the block named WPForms.

Select WPForms Block

This will add the WPForms block to the editor screen. Next, go ahead and select the form you want from the Select a Form dropdown.

Choose a form to display in block editor

After selecting a form title, the full form will display within the WPForms block. You can optionally open up additional settings for the block by selecting the three dots option, then Show Block Settings.

Adjust settings for WPForms block

Within these block options, you can customize the following settings:

Block Settings for WPForms

  • Form: Allows you to choose a different form within the dropdown.
  • Show Title and Show Description: Allows you to make extra form details visible by toggling these options.
  • Advanced: (For Advanced Use Only) Allows you to add CSS classes to your form.

You can now publish the page and visit your website to see your form in action. Here’s a sample of what the form would look like on a live site:

Example form on front end

Embedding Your Form in a Widget

A WordPress Widget is a small block of content on your site that performs a specific function. For instance, you might add a form to the sidebar or footer of your site. To do so, you’ll need to use the WPForms widget.

To access your site’s widgets, navigate to Appearance » Widget in the WordPress admin area sidebar. Then, scroll down to find the WPForms widget.

WPForms Widget

Next, drag and drop the WPForms widget to a widget location of your choice. Then, click on the WPForms widget to select your form. Finally, click on Save.

Select Form in WPForms Widget

Here’s a sample of what the form would look like in the footer on a live site:

WPForms Footer example

That’s it, you’ve just created your first form in WPForms!

Next, please be sure to test out your form. We’ve created a detailed testing checklist to help ensure that your form looks and works just how you’d like.