WPForms Guide: How Beginners Can Easily Create Contact Forms

ーArticle Levelー

Beginner　　
Importance　
Difficulty

Hey everyone, are you enjoying WordPress?

You want to add a contact form to your WordPress site but are worried because you don’t have programming knowledge…

WPForms is a handy plugin that allows you to create contact forms easily on WordPress.

This guide thoroughly explains everything from the basics of WPForms to practical techniques for creating forms. Even beginners can create forms easily, so be sure to check it out.

ryo

Hello! I’m ryo.

助手君

I’m your assistant!

What is WPForms?

WPForms is a contact form plugin specifically designed for WordPress.

Even without programming knowledge, you can create forms easily with its intuitive drag-and-drop interface, making it beginner-friendly.

It allows you to create various types of forms such as contact forms, booking forms, survey forms, and payment forms.

WPForms offers both a free and a paid version. The free version is sufficient for creating simple contact forms, but if you want to use more advanced features, the paid version is recommended.

The paid version adds features like conditional logic, payment capabilities, and survey tools, allowing you to create any form your business may need.

Completed Contact Page Using WPForms

After creating the contact page with WPForms, it turned out like the one below.

Note: I am using the free version.

ryo

I’m relieved that there are no issues with the page layout!

I also checked if the emails are being received, and everything is working fine without any issues.⇩

助手君

Now there’s no problem even if there are inquiries!

Key Features of WPForms

Drag-and-Drop Form Builder

You can create forms with intuitive操作, so no technical knowledge is required.

A wide variety of templates

There are many ready-to-use templates available, including contact forms, registration forms, survey forms, and more.

Mobile-Friendly

The forms you create are responsive and designed to be easily viewed on smartphones and tablets.

Spam Protection

Features like Google reCAPTCHA and Honeypot are included to reduce the risk of spam and unwanted emails.

Notification Feature

When a submission is made through the contact form, a notification is sent to the specified email address.

File Upload Feature (Paid)

You can add a file upload field to the contact form.

This allows you to create forms that accept file submissions, such as resumes or image files.

By utilizing these features, you can easily and efficiently create all types of forms needed for your WordPress site.

Setting up a contact form creates a gateway for communication with users, contributing to the growth of your business.

Installing and Activating WPForms

STEP

Click “Plugins” → “Add New”

STEP

Enter “WPForms” in the search bar, and click “Install Now” on the displayed plugin.

⇩

STEP

Click the “Activate” button to activate the plugin.

STEP

Check if it is activated.

How to Create a Contact Form

Create a New Form

From the dashboard’s left menu, click “WPForms” → “Add New”

フォームビルダーが開き、テンプレート選択画面を表示

⇩

Since we will use the “Simple Contact Form,” click “Use Template.”

Go to the edit screen

Click “Save.”

The contact form is now complete with the steps above.

Next, let’s move on to customizing the form!

Practical Form Customization

The contact page I want to add using WPForms includes the following fields

NameEmail
Address
Checkbox

Let’s put it into practice!

Add a Checkbox from the Standard Fields.

⇩

Checkbox Settings

※I added the required feature and changed the options.

Edit from “Settings” → “General”

You can change the submit button and form name.

Save and check in the preview.

If you set it as required, it will appear like the above if there is no input.

Check if the created form has been added

With the steps above, you have successfully created a contact form (temporary).

助手君

… (temporary)?

ryo

Just keep in mind that it won’t function yet with just this.

Form Settings

Simply creating a contact form won’t make it functional.

Next, let’s configure the notification settings so that the email functionality works!

Recipient Email Address
Email SubjectFrom
Email Address

Select “Notifications” from “Settings.”

Configure the various fields

① Specify the email address to which the form content will be sent.

② Specify what will be displayed in the email subject.

③ This is the name given to the form, mainly used for internal management or identification in email notifications.

④ The address that will be set as the “From” address in the email sent from the form.

⑤ Specify the address that will be automatically set as the reply-to address when the email recipient replies.

⑥ Specify which information should be included in the body of the email sent.

助手君

This setting can be surprisingly tricky, so be careful!

ryo

In my case, the main change I made was only to item ①, the recipient email address.

Now the WPForms contact form is complete!

I moved quickly through the steps, so let’s take a break and take a look at the WPForms field settings screen!

Overview of the WPForms Field Settings Screen

Standard Field List

The various fields are categorized and displayed in a list format as shown below.

Single Line Text

A field to collect simple responses from users, such as names or titles.

Paragraph Text

Used when a longer response is required, such as for comments or messages.

Dropdown

Provides an option to select only one item from a list.

Multiple Choice

Allows multiple answers in a checkbox format.

Checkbox

Displays options that can be selected singly or multiple.

Number

A field for numerical input (e.g., quantity or price).

Name

A dedicated field to collect the user’s name.

Email

A field to collect the user’s accurate email address.

Number Slider

A slider format to specify a number (e.g., from 1 to 100).

CAPTCHA

An authentication feature for spam prevention (e.g., Google reCAPTCHA).

助手君

In addition to the above, there are features available only in the premium version, including functionalities that can be used for e-commerce sites!

WPForms Field Operation Tips

・Steps to Add Fields

Click and drag the required items from the “Standard Fields” section on the screen to the form preview area on the right.
To change the order, drag the fields to move them.

*Note: Clicking on an item will also place it in the form.

ryo

You can do most of it with just mouse operations, making it very easy.

・Field Settings Details

In the “Field Settings” displayed on the right side, you can customize the field label, description, required field settings, and more.

How to Install a Contact Form

Install on Posts or Pages

STEP

Click on “Pages” → “Add New” in the WordPress dashboard.

STEP

Click the “+ (Add Block)” in the post editor and select the “WPForms” block.

STEP

Select the form you created and click “Save Draft.”

⇩

STEP

Check the contact page

The contact form creation is complete! Great job!

ryo

It’s a good idea to test it before implementing it on your website.

Advantages and Disadvantages of WPForms

Advantages

User-friendly Operation

The drag-and-drop form builder allows anyone to easily create forms.

Wide Variety of Templates

Templates for contact forms, reservation forms, application forms, and more are readily available.

Spam Protection Features

With built-in spam protection features like Google reCAPTCHA, you can effectively prevent spam emails.

Mobile Compatibility

The created forms are responsive, ensuring they display beautifully on smartphones and tablets.

助手君

I didn’t expect it to be so easy to create a contact form!

Disadvantages

Limitations of the free version

The free version has limited features, and to access professional features, a paid version is required.

Limitations in customization

Without knowledge of CSS or HTML, it can be difficult to make detailed customizations to the design.

Complex forms require a paid plan

Features like conditional logic and advanced autoresponder functions are only available in the paid plan.

Increased server load

If many forms are submitted, there may be an increased load on the server.

ryo

From my actual experience, the disadvantages are not something to worry about too much.

Common WPForms Questions and Solutions

Why is the form not being submitted?

It is possible that the email notification settings are incorrect.

Solution: First, check the “Notifications” settings in WPForms.

Make sure the recipient’s email address is correct, and verify that the “From” address is accurate.

If there are server limitations, using an external SMTP service (e.g., Gmail, SendGrid) may resolve the issue.

I’m receiving a lot of spam emails, and it’s becoming a problem…

It is possible that spam protection is not enabled on the form.

Solution: Enable Google reCAPTCHA.

Go to WPForms’ “Settings” → “CAPTCHA” and enable Google reCAPTCHA v2. Obtain the Google API key and set it up to significantly reduce spam emails.

Additionally, using a hidden field called Honeypot can also help prevent spam.

I want to change the design of the form.

The design might be different from your theme’s standard design.

Solution: WPForms, by default, follows the design of your WordPress theme.

If you want to change the appearance of the form, you’ll need to customize the CSS.

You can either add code under “Appearance” → “Customize” → “Additional CSS” or adjust the style options from WPForms’ “Advanced Settings.”

Summary: Let’s easily create a contact page with WPForms!

WPForms is a convenient plugin that allows beginners to easily create contact forms. By simply adding fields through drag-and-drop, you can quickly build a form.

You’ll be more than satisfied with the free version!

Refer to the steps in this guide and try adding a contact form to your own website.

助手君

For the premium version of WPForms, it’s recommended to try the free version first and then consider upgrading.

If you have any questions, feel free to reach out via the contact form! I hope I could be of help!