Are you ready to create your first form with Nelio Forms? By following the step-by-step instructions in this walkthrough, you can easily publish your first form on your site.
Before getting started, make sure you’ve installed and activated Nelio Forms on your site.
Table of Contents
Adding a New Form
To begin, you’ll need to be logged into your WordPress admin area. Once there, click on Nelio Forms in the admin sidebar to go to the list of all forms.
Then, to create a new form, click on the Add New button to launch the form builder. Since Nelio Forms is completely integrated with modern WordPress technologies, the form builder equals the WordPress block editor.
In the block editor, you can enter a title for your form (such as “Contact Us”).
If you’d rather not enter a title, then the form name will default to “(non title)”. Also, note that the title is not visible in the popup content.
Below the title field, you’ll find the block editor that includes a default form. This form has a text field to fill in, and the submit button. Additionally, in the right sidebar there are the properties of the form including its general settings, submission actions and status and visibility, among others.
Creating the Form Content
You can create a form from scratch by adding the fields you need or from a pre-build pattern.
Adding Fields to Your Form
You can add additional fields, similarly as you add any block in the editor, and select from the set of input fields available in Nelio Forms. In addition, you can add text blocks, additional buttons and lay out the form in columns if you like.
For any field included in a form you should add a descriptive label (the text field in the default form has an empty label) if you want it to be accessible. You have the option of whether or not this label is displayed in the form.
In the sidebar, you can see the properties of the field 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 the minimum and maximum length of the field, if that field is required for the form to be submitted and whether or not to display the descriptive label. Note also that you can transform the input text field to a different input field: email, password, phone or URL.
Add, modify and delete the fields as you wish, modify the field layout and button style to create the form you need.
Using Patterns
Alternatively, you can select a predefined pattern for your form. Nelio Forms comes with a set of predefined patterns to create forms in a matter of seconds. You will find these in the right sidebar, under the “Patterns” section. Just click on any pattern and the set of blocks that make it up will be copied and adapted to the style of your theme.
Once you’ve edited the form content, it’s time for defining its additional settings.
Editing General Form Settings
Form settings enable you to configure the details of your form, such as the text you would like to display while the form submit is processing, the message to show and what to do after the form submission.
After a valid submission, you can choose between do nothing, hide the form or redirect the user to another URL.
Submission Actions and Akismet Integration
Once a form has been submitted, you can specify where and how you want the completed form to be sent. With the free version of the plugin you can send an email notification to the e-mail address specified. With the premium version, additional actions can be added such as recording the entry in your database, create additional content with the information submitted, register a user, add the information in Mailchimp or Zapier.
Finally, in order to avoid spam, Nelio Forms integrates with Akismet, a powerful anti-spam service provided by Automattic. Akismet protects the comments that are written on any post on your website and, by integrating it with Nelio Forms, it also protects any form that is fill out.
For its integration with Nelio Forms, you’ll first have to activate Akismet (this plugin is already installed by default in any WordPress installation) and then use an Akismet API key to register it on your site. If you have a personal blog, you can get a free API key, but you also have different plans for any commercial website.
Once you’re done configuring your form’s settings, click on Save draft at the top of the screen to save your changes and click on Preview to see a preview of the form. If everything is right then, click on the Publish button to create a new form block available to include in your pages and posts.
Displaying Forms in Your Website
Now, 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.
There are multiple conditions available in Nelio Forms. Note that some of them require the purchase of Nelio Forms Premium and the activation of a license.
That’s it! You now know how to create forms with Nelio Forms. At the end of this entry you have a sample of a form created with Nelio Forms. Feel free to fill it to request additional information.