Creating Your First Form

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

This tutorial will show you how to create and publish your first form.

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


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

Adding a New Form

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

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

Adding a new form

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.

Naming a new form

If you’d rather not enter a name, then the form name will default to the name of the template you choose.

Below the Form Name field, you’ll find many form templates in the Select a Template section. These are pre-built templates of commonly used forms to help you get started quickly.

The WPForms Template Library

You can use the categories in the menu on the left or the search bar in the top left corner of the template library to search through the available options.

The WPForms template search features

Once you find a template that suits your needs, hover over it and click the Use Template button.

Choosing a form template

If you would prefer to build your form entirely from scratch, select the Blank Form template.

Creating a blank form

Note: Looking for even more templates? You can create your own or suggest a new one. We’d love to hear your ideas!

Customizing Your Form

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

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

Available fields in the WPForms form builder

You can also use the search bar above the available fields to look for a specific field. Simply enter the field name or a related word, and the matching fields will show up.

Search bar in WPForms form builder

Note: If you’d like more information on all the WPForms fields, be sure to check out our tutorial on how to choose the right form field.

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

The Preview panel in the WPForms form builder

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

Dragging and dropping a field into the form builder

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

Deleting a field from a form

Accessing Field Options

Field options enable you to configure the details and settings of each field, such as its label and description.

To view and edit the options available for a field, click on it in the preview panel. The field options will then appear in the left panel of the form builder.

Accessing the field options in the form builder

Note: Want to learn more about customizing your forms’ fields? Check out our guide to WPForms’ field options.

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

Saving a form

Getting Help While Creating Your Form

If at any point you feel the need for guidance during form creation, click on the option labeled Help at the top of the screen.

Help button in WPForms form builder

This opens up an overlay with contextualized documentation, providing information directly related to the field you’re working with or the section of the form builder you’re in.

Editing Form Settings

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

Accessing the form builder settings

For this tutorial, we’ll focus on the first 3 settings available: General, Notifications, and Confirmations.

General

In this section, you can change the form name and description.

The General form settings

You can also add form tags and customize the submit button for your form.

Adding Form Tags and Submit button customization settings

By expanding the Advanced section, you can also add custom CSS to your forms. We only recommend these settings for more experienced users.

The Advanced General settings

Note: Want to learn more about incorporating custom CSS into your forms? See our developer documentation for advanced tutorials and snippets.

Spam Protection and Security

This section helps keep your forms safe. It can quietly filter out spam and set limits on who can fill out forms. You can also add CAPTCHAs to make sure only real people fill out your form.

Spam protection and Security settings

Note: If you’d like more details on spam prevention and security settings, check out our guide on how to prevent spam in WPForms.

Notifications

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

The Send To Email Address field is where you’ll enter the email address(es) you want to receive the notifications. By default, it is set to your site’s admin email address. But you can update it to any address you want.

Note: You can add multiple email addresses to the Send To Email Address field. Just be sure to separate each email with a comma.

The form notifications settings

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

Form confirmations are ways to inform users that they have successfully submitted a form. You can also use them to provide more information or options to your users.

The form confirmations settings

Note: If you’d like more details on WPForms’ Confirmations settings, check out our tutorial on setting up form confirmations.

Once you’re done configuring your form’s settings, click on the Save button at the top of the screen to save your changes. You can click on the X button to exit the form builder.

Exiting the form builder

Displaying Forms on Your Site

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

Embedding Your Form on a WordPress Page

There are two different ways to embed your forms on a WordPress page. You can use the built-in embed wizard in the form builder or add your form to a page manually with the block editor.

Embedding a Form with the WPForms Embed Wizard

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

Accessing the WPForms embed wizard in the form builder

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

Choosing whether to create a new page to embed a form on, or to select an existing page

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

The Create New Page option in the form embed wizard

If you choose the Select Existing Page option, you’ll be asked to pick which page to embed your form on from the dropdown.

The Select Existing page option in the form embed wizard

Then click the Let’s Go button to be redirected to the block editor to embed your form.

Embedding a Form with the Block Editor

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

Adding a new block to a page

This will open a menu of block options. To locate the WPForms block, you can search for “WPForms” or scroll to the Widgets category. Then click the WPForms block.

Adding the WPForms block to a page

This will add the WPForms block to the page editor. Next, select the form you want to embed from the Select a Form dropdown.

Selecting a form from the WPForms block

After you select a form title, the full form will display within the WPForms block. You can open up additional settings for the block by clicking the three-dot icon, then Show more settings.

The Show More Settings option in the WPForms block

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

The WPForms block settings

  • Form: This setting allows you to choose a different form to display.
  • Show Title and Show Description: With these options, you can hide or show additional form details.
  • Advanced: Here you can add CSS classes to your form. This option is recommended for advanced users only.

Once you’re happy with your form and its settings, you can publish the page and visit your website to see your form in action. Here’s what our example would look like on a live site:

An example of a contact form embedded on a live site

Embedding Your Form in a Widget

Note: These instructions are for the Block Widgets editor that shipped with WordPress 5.8. If you’re still using the Classic Widgets editor, please see our tutorial on using forms with the Classic Editor for steps to embed a form in a widget.

A WordPress widget is a small block of content on your site that performs a specific function. For instance, you can add the WPForms block to a widget area to embed a form in the sidebar or footer of your site.

Note: Want to learn more about WordPress widgets? Check out WPBeginner’s guide to using widgets.

To access your site’s widgets, navigate to Appearance » Widgets in the WordPress admin area sidebar. This will open the Widget editing screen.

Accessing the Widgets editor screen

From here the process is very similar to embedding a form in a post or page. First, find the widget area you want to add your form to. Click on it to be sure you’re editing the right area.

Selecting a widget area to add a form to

Then click on the blue plus (+) button in the top left corner of the editor.

Opening the widgets block library

In the block library, search for “WPForms” or scroll to the Widgets section and click on the WPForms block.

Adding the WPFroms block to a widget

This will add the WPForms block to your selected widget area. You can drag and drop blocks to rearrange them as needed. Then choose the form you wish to display from the Select a Form dropdown.

Selecting a form to display in a widget

Be sure to click on the Update button in the top right corner of the Widgets editing screen to save your changes.

Updating widgets to save changes

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

An example of a form displayed in a footer widget

Frequently Asked Questions

Below, we’ve answered some top questions about creating your first form.

Can I embed the form to an Elementor page?

Yes, you can use the WPForms Elementor widget to easily add a form to your Elementor page. Once you’re in the Elementor builder, simply drag and drop the WPForms widget to your page.

Adding WPForms to an Elementor page

For a complete walkthrough, be sure to check our guide on adding WPForms to an Elementor page.

That’s it! You now know how to create forms with 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.