5. Creating Your First Form

Created by Danny Wong, Modified on Sun, 09 Aug 2020 at 04:06 PM by Danny Wong

Want to get started creating 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.

  • Add a New Form
  • Customize Form Fields
  • Display Forms 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.



Add a New Form

To create your first form, you’ll need to have already installed WPForms.

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.

To create a new form, click on the Add New button, and this will launch the WPForms Form Builder.

add-new-button

In the Setup page of the Form Builder, you may choose to enter the form name such as “Contact Us” in the Form Name input field. If you prefer not to enter a name, the form will take on the default name of the form template chosen.

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.

select form template

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

Customize 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. On the right panel, you will see an editable preview of your form.

available-fields

To add a field to your form, you can drag and drop the field from the left panel directly into the form preview.

Add field to form

Access 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 keep the changes.

save form

Edit Form Settings

To configure form settings, you can click on the Settings tab on the left side of the Form Builder. This tutorial will focus on the top 3 tabs on the settings page: General, Notifications, and Confirmation.

In the General section, you can change the form name and description. You can also customize the submit button and turn on/off honeypot spam protection.

settings-general

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

settings-notifications

Form confirmations are ways to inform users that they have successfully submitted a form and to provide more information and options to users.

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

settings-confirmation

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.

settings-save-button

Display Forms on Your Site

There are different ways to add forms to your site. Here we’ll look at how to display forms on your site within a page or widget.

Add Your Form to a WordPress Page

To begin, you’ll need to create a new WordPress page or edit an existing one.

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 in Gutenberg editor

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 in Gutenberg

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 the WPForms Gutenberg block

After selecting a form title, the full form will display within the WPForms block. On the right side of the screen, you’ll see some additional options for the block.

Adjust settings for WPForms block

Within these block options, you can:

  • Choose a different form within the Form dropdown.
  • Make extra form details visible with the Show Title and Show Description toggles.
  • (For Advanced Use Only) Under the Advanced section, 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:

An example of an embedded form

Add Your Form to a Widget on Your Site

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 get started, in the WordPress admin area navigate to the Widgets page by selecting Appearance » Widget in the left sidebar. Then in the Widgets page, scroll down to find the WPForms widget.

WPforms widgets

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 widget

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

WPForms in the widget

Congratulations, you’ve just created your first form in WPForms!

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article