Use Form Patterns to Create and Customize Your Web Forms

Published in WordPress.

Forms are essential elements for any website. From login and registration pages to contact pages, websites need a way for users to submit their information, and forms are the best way to do it.

As you know, WordPress does not include a default block for you to create forms that integrate with the look and feel of your website. You need a plugin to add forms.

You will find form plugins that provide you with the necessary functionalities, such as:

  • Define or configure any form you want a visitor to your website to see
  • Specify where you want that form to appear: page, post, widget, or popup
  • Specify confirmation or error messages that should appear to the user after filling out the form
  • Specify where you want the information of the correctly filled form.

In addition, some plugins also include predefined form templates to make form creation easier. This is the case of Nelio Forms, a plugin developed by us that is fully integrated with the WordPress block editor and that now comes with form patterns, which are pretty similar to WordPress block patterns.

The Nelio Forms plugin on WordPress.org
The Nelio Forms plugin on WordPress.org.

Let’s see how it works and the advantages of creating forms using patterns.

Create Forms with Nelio Forms

To create a contact form with the Nelio Forms plugin, just click on the New Form menu option and the form editor opens, which is practically identical to the block editor you already know.

Editing a contact form with the Nelio Forms plugin
Editing a contact form with the Nelio Forms plugin.

You only have to add the blocks of the fields contained in the form and specify their properties for each field.

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

Additionally, you can specify where and how you want the completed form to be sent.

Form submission actions in Nelio Forms
Form submission actions in Nelio Forms.

Once any form has been created and published, you just have to integrate it into any page or post by adding a form-type block and selecting the created form.

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

And voilà!

Example page with embedded form
Example page with integrated form.

Also, as I mentioned before, Nelio Forms has a set of predefined form patterns, available in the sidebar, that further simplify the work of creating new forms.

Form templates available in Nelio Forms
Form patterns available in Nelio Forms.

Just by clicking on the pattern of the form you want, you’ll get the form you want:

Create a contact form from a template
Create a contact form from a pattern.

Form patterns work just like any block pattern: once added, you can delete, add, or modify its blocks in the editor. The great advantage of using Nelio Forms is that all the fields and buttons shown in the form will inherit your theme’s style, providing a perfect integration with your site. If you change the style or theme, all the properties of the form (except those that you have modified directly by editing the form), will automatically adapt to the new style.

For example, just by changing the text and background color of the buttons in my theme:

Changing the background color of theme buttons
Changing the background color of the theme buttons.

The new forms that you are going to create or those that you have already created will have been adapted to the new changes.

The form editor shows the appearance of the form with the style of the web theme
The form editor displays the look of the form in the web theme style.

This allows you to make your form styles work exactly the same as those of your pages and posts offering a much cleaner and more consistent look throughout your website.

In the same way, if I change the web theme, also the form editor and the patterns you have available will be displayed with the style of the theme you have installed.

Creating a form with the Twenty Twenty theme
Creating a form with the Twenty Twenty theme.

And all the forms that you had previously created following the style of the theme will be adapted to the new theme installed.

Contact form with Twenty Twenty theme
Contact form with Twenty Twenty theme.

This way, you have the freedom to make the theme and style changes you need on your website without having to worry about how the forms will be displayed after the change.

Below is the list of form patterns available to you to quickly create forms for your website.

Form Patterns

Currently, Nelio Forms includes 10 form patterns that can help you as a starting point to create any form. From the simplest so that your visitors can contact you, to others that include columns, dropdowns, and other types of selectors.

All of them with very simple designs so you can adapt and customize them as you wish.

Conclusion

Creating forms with the Nelio Forms plugin is as easy as creating any WordPress page. Now, form patterns make creating new forms even simpler.

Once you have selected a pattern, the blocks of the pattern will be copied and you can add, modify, and delete all the fields as you want to make the form fits your needs. With the peace of mind that with any change you make to your website, the form will adapt to your new style. What are you waiting for to check it out?

Featured image by Christina @ wocintechchat.com 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.