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.
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.
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.
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.
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.
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.
To delete a field from your form, you can hover over the field and click the red trash can 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.
Once you’re done editing the field options, click the Save button to save your changes.
Editing Form Settings
To access your form’s settings, click on the Settings tab on the left side of the form builder.
For this tutorial, we will focus on the first 3 settings available: General, Notifications, and Confirmation.
General
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
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
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.
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.
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.
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.
If you choose the Select Existing Page option, you’ll be asked to select a page to embed your form to.
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.
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.
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.
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.
Within these block options, you can customize the following settings:
- 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:
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.
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.
Here’s a sample of what the form would look like in the footer on a live site:
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.