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.
Table of Contents
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.
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.
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.
Create Your First Form
Once installed and activated, in the menu sidebar, you will find the Nelio Forms options. Click on “Add New:”
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.
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).
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.
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
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.
And in the case of a checkbox, you can indicate if it is checked or unchecked by default:
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.
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.
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.
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.
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.
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.
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”.
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.
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.
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.
You will soon receive notifications with the information filled in by your visitors in the way you have indicated in the form.
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.
Nelio Forms
A fantastic contact plugin using the block editor. In its simplicity lies the true power of this plugin. I love it, very versatile and it worked perfectly for me.
Wajari Velasquez
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