How to Easily Create Contact Forms in WordPress

Published in WordPress.

When you browse any website looking for information or a product, more than once you have been left wanting to know more or ask for additional information. If you want to prevent this from happening on your website, make sure you offer all the facilities so that any visitor can contact you on your website.

Why do I Need a Contact Form on my Website?

Whether you have a small business, an online store, or an information blog, sooner or later you will want your visitors to be able to contact you. The quickest and easiest solution might be to include an email address on your web so they can contact you, but I’m afraid this might not be a good idea: you’ll receive a lot of spam, you won’t know where they found you (if they came because they have seen the address on the web or anywhere else), and surely in the email you receive you will be missing some information you would like to know.

Example of a contact form
Example of a contact form created with Nelio Forms.

Contact forms allow you to receive information in a structured way and to store it correctly in the way that suits you best. In addition, they have many other advantages, since you can, for example:

  • Define different forms on pages, posts, widgets.
  • Indicate what required information you want them to fill in.
  • Show confirmation or error messages when the form is filled.
  • Indicate where you want to receive the information of the from the completed form.
  • Store contact data in compliance with the RGPD.
  • Know the origin of the information received.
  • Control spam.
  • Send the information to multiple users.
  • Integrate them with other platforms, etc.

Let’s see how we can create free contact forms on our website quickly and easily. As you know, freshly installed WordPress does not give you the option to create custom contact forms. If you want to create custom forms, you will need to either install a theme that includes contact forms or use a plugin.

There are plenty of plugins to choose from. One of the most popular contact form plugins, Contact Form 7, is easy to use, but it does not have a visual editor to create the forms and you must learn its syntax. The alternative offered by most plugins, such as WPForms, Fomidable Form Builder, HubSpot or Ninja Forms, among others, is to add a WordPress framework with a control panel from which to design contact forms.

In this post we want to talk about a contact form plugin different from the previous ones: Nelio Forms.

Nelio Forms

Nelio Forms is a plugin we just released. You have its free version available in the WordPress Plugin Directory.

Nelio Forms plugin in WordPress.org
Nelio Forms plugin in WordPress.org.

Why have we released a new contact form plugin, if there are already others available? Because we have been using other plugins to create forms for some time and our experience has not been what we would have liked. Nelio Forms is a plugin that integrates into the WordPress block editor and, therefore, doesn’t implement a custom form builder framework.

Let’s see what steps you need to follow to easily create contact forms with Nelio Forms.

Install the Nelio Forms Plugin

Nelio Forms is installed like any other plugin. From the WordPress dashboard, click on “Add New” and in the search engine, type “Nelio Forms” and then install and activate the plugin.

Install and activate the Nelio Forms plugin
Install and activate the Nelio Forms plugin.

Create Your First Form

Once installed and activated, in the menu sidebar, you will find the Nelio Forms options. Click on “Add New:”

Add a new contact form with Nelio Forms
Add a new contact form with Nelio Forms.

The block editor will open and you’ll quickly notice it looks very similar to the post and page editor, but in this case it shows you the minimum information you must include in any form: the form name to to identify it, a field (by default it shows you a text field) to fill in, and the “Submit” button.

Create a new contact form with Nelio Forms
Creating a new contact form with Nelio Forms.

Edit the Contact Form

After naming your form, you should add a descriptive label to each field if you want it to be accessible (you have the option of whether or not this label is displayed on the form).

Each field must include a descriptive label
Each field must include a descriptive label.

In the sidebar, you can see the properties of the block you are editing. Thus, for example, when you edit the text input field, apart from the descriptive label and the ability to add a placeholder, you will see that you can also indicate if that field is required for the form to be submitted and whether or not to display the descriptive label.

In the same way that you add any new block in the WordPress block editor, you can edit the form by modifying its layout and adding different blocks.

Blocks available to add to a form
Blocks available to add to a form.

As you can see in the image above, apart from the paragraph type block you already know, the forms can be designed in columns and you have a set of blocks specific to contact forms:

  • A text input field,
  • A text area field,
  • A mail field,
  • A phone field,
  • A password field,
  • A checkbox field,
  • A checkbox group field,
  • A Date/Time, a Date or, a Time field
  • A number field,
  • A number slider field,
  • A URL field,
  • A radio group field, and
  • A select field
Fields of a contact form in Nelio Forms
Fields of a contact form in Nelio Forms.

Each field may have its own settings. For instance, in the case of a number field, not only can you require it and/or hide its label, but also indicate the minimum and maximum range values and the number of each step.

Properties of a number field in Nelio Forms
Properties of a number field in Nelio Forms.

And in the case of a checkbox, you can indicate if it is checked or unchecked by default:

Properties of a checkbox in Nelio Forms
Properties of a checkbox in Nelio Forms.

Finally, you can edit the submit button like any other button. That is, you can change its style, color, border, width, font, or dimensions, as well as define a URL or anchor to go to after submitting the form. You can even add additional CSS classes to it.

Contact form submit button properties
Properties of the submit button of a contact form.

As you can see, creating a form like the one you see in the first image of this post is just as easy as writing a post in the block editor.

Editing the Nelio Forms contact form
Editing the Nelio Forms contact form.

Submitting a Completed Form

After creating the form, you must indicate where you want the form to be sent once it is submitted. To do so, you can add a new “Submission Action” or edit the existing one.

Add a submit action in a contact form
Add a submission action in a contact form.

In the free version of the plugin you can only add email notifications. Given any notification you’ll have to define a few settings like the email address of the recipient, who sent the email, or the message itself. For each email field, you can either type in a valid email address, select an email field from your form, or use the site administrator’s email.

Editing the send email action in Nelio Forms
Editing the send email action in Nelio Forms.

In the message itself you can write whatever you want, but you can also use all or some of the fields submitted by the user, the URL of the form, or the email address of the site administrator.

Fields that you can add in the email message sent from a contact form
Fields that you can add in the email message sent from a contact form

Once you have added the information, your contact form is complete. Similarly, you can create as many different contact forms as you want and all of them will be available for editing from the “All Forms” option in the Nelio Forms menu.

List of forms created with Nelio Forms
List of contact forms created with Nelio Forms.

Add the Form to Your Pages and Posts

Once your form has been created, all that remains is to add it where you want it to be displayed on your website. To do this, from the editor of any page, you must add a block of type “Form”.

Add a contact form type block
Add a contact form block.

From the page itself, when adding a form block, you have the option of directly creating a new form in exactly the same way as mentioned above or, on the contrary, adding one of the forms you have previously created.

Options to add a new Nelio Forms form
Options to add a new Nelio Forms form.

Once inserted, one of the great advantages of Nelio Forms is that you can modify the form directly while editing the page like any other block. When modifying it, you will see that in the “Update” button a white dot appears to the left of the word (similar to updating templates) indicating whether you want the changes you are making in the form itself to be saved.

In this way, you can add, edit, and display the forms on your pages in the same way as you do with any other block that you have available.

Editing the Nelio Forms page
Editing of the Nelio Forms page.

Receive Contact Requests from Your Visitors

That’s it! We only have to publish the page or post that contains the created form. If any visitor fills in the form incorrectly, they will be warned to check the information filled in.

Error notices in the filled form
Error notices in the filled form.

You will soon receive notifications with the information filled in by your visitors in the way you have indicated in the form.

Example of an email received from the contact form on the Nelio Popups website
Example of an email received from the contact form on the Nelio Popups website.

In this way, when you receive a contact email, you will know where it comes from, you will have all the information you have indicated as required, and you will be able to avoid spam.

Conclusion

We have already seen that creating contact forms with Nelio Forms, thanks to its integration with the WordPress editor, is as easy as creating any page or post.

For now, the free version is very simple but includes everything you need to create the contact forms your website needs. All the contact forms you’ll find on this website, for example, have been created with Nelio Forms.

For the premium version we hope to have many more features that you will find described on the Nelio Forms page. Of course, if you think you need any additional functionality and/or are interested in the premium version, we invite you to fill out the form on that page and we will contact you.

Don’t hesitate to install and test the Nelio Forms plugin (remember, it’s free!) and share your impressions here.

Featured image by Brooke Cagle on Unsplash.

Leave a Reply

Your email address will not be published. Required fields are marked: •

I have read and agree to the Nelio Software Privacy Policy

Your personal data will be located on SiteGround and will be treated by Nelio Software with the sole purpose of publishing this comment here. The legitimation is carried out through your express consent. Contact us to access, rectify, limit, or delete your data.