Build Forms via the Block Editor With Gutenberg Forms

The quest for the perfect form plugin is nearly as old as WordPress. Projects have come and gone. There are some great form plugins out there, but far too often the choices are between massive builders that do things their own way and solutions so simple that they do not quite live up to expectations. Munir Kamal has put his hat into the ring with his take on this saturated market with Gutenberg Forms, a plugin designed for exclusively building forms within the block editor.

The plugin is by no means perfect. It has numerous quirks. It does a lot of things right. It fails at times with features that could be game-changing. It has the potential to be one of the best form-building plugins for WordPress.

As of version 1.4.0, the latest update, Gutenberg Forms is a mixed bag of success and frustration. I am excited about it.

I am excited because we are still in the early part of this plugin’s lifespan. I am excited because Kamal has built some successful Gutenberg-related projects in a short amount of time, including Gutenberg Hub and ACF Blocks. I am excited because I believe it will improve over time.

Form plugins are not easy. Despite its current issues, which we’ll get to, Gutenberg Forms is a useful plugin that ticks many of the boxes that I want to see in a form builder going forward. The ideas needed for block-based forms are in place. The execution just needs some refinement.

Gutenberg Forms was recreated in February this year. Kamal originally released the plugin in 2018, but it sat in limbo for a year and a half before he updated it with the latest APIs. Since then, he has been on a tear, releasing frequent updates and improving how the plugin works. I first tested it months ago and was not happy with the result. However, the latest iteration shows much more promise.

With only 200+ current users, the biggest thing the plugin needs is more feedback from more users.

Building Forms

Creating a standard form with the Gutenberg Forms plugin.
Creating a standard form.

Gutenberg Forms makes form building simple. There are two ways to build forms in the plugin. The first method is a custom “Forms” screen in the admin. It is a custom post type that works just like a post or page. The difference is that users are limited to adding form fields provided by the plugin. Using this method of building forms is ideal because the form is saved in a single place and can be used anywhere on the site.

The second method is building a form directly from the post or page editor. All of the plugin’s custom blocks are available for creating a custom form. For one-off forms, this may be the method to use, but I recommend building from the Forms screen instead.

After building a form via the Forms screen, users can later use the Gutenberg Forms block to insert a saved form. What actually happens when inserting this block is that, when choosing a saved form, the plugin inserts a shortcode into the editor. This is one of those quirks with the plugin. One of the ideas of building blocks is for developers to move away from utilizing the shortcode system. There is no need to mix in a shortcode here from a technical perspective. It should simply be a server-side block. I do not imagine this matters much to end-users. It works. It is simply an oddity that I hope evolves in the long run.

Inserting a saved form into a page with the Gutenberg Forms plugin.
Inserting a saved form into a page.

The plugin provides most of the common form fields that end-users would expect to see in a form plugin. The following are the form-field blocks currently available:

  • Calculation
  • Checkbox
  • Date Picker
  • Email
  • File
  • Form Button
  • Message
  • Name
  • Number
  • Phone
  • Radio
  • Select
  • Text
  • Website
  • Yes / No

Gutenberg Forms also includes other blocks that are not for outputting fields. The Form Columns block allows end-users to create columnized fields. This works great for fields that need to be lined up horizontally, such as city, state, and ZIP code fields. The Form Group block allows users to group multiple blocks. It also has several design options, including custom colors and padding. The Form Step block is useful for adding steps in multi-step forms.

The biggest but least polished feature is the pre-designed templates library that Gutenberg Forms makes available. Currently, the plugin has around three dozen custom templates. Given Kamal’s work with templates at Gutenberg Hub, I am guessing that we will see even more templates in the future.

Inserting a form template into a page with the Gutenberg Forms WordPress plugin.
Inserting a form template into a page.

The problem? The form template inserter does not always work.

Testing the plugin against both the latest WordPress and Gutenberg plugin, I was not able to insert any form template via the new form screen. There were JavaScript errors that prevented it from being inserted. One of the most exciting features of the plugin failing to work, at least in my test environment, was a bit of a letdown.

While inserting a template did not work on the form-building screen, it did work when building one-off forms on the page-editing screen. However, I did receive the dreaded “this block contains unexpected or invalid content” message for some of the blocks after insertion.

This issue is not insurmountable. The Gutenberg project is in a constant state of flux. I am forgiving of these types of issues right now because things are so unsettled, and I also know they can be addressed in an update. However, I do want to point them out for users who may need something a bit more polished in their production environments. You can build forms easily without the template feature.

Final Thoughts

Yes, Gutenberg Forms is a bit rough around the edges. It is not at the point where it can be competitive with some of the other major players in the forms marketplace. However, six months or a year from now, assuming continued improvement, it should be in a position to start slicing its own piece of the pie.

There are some other nitpicks with the plugin. For example, the “Inline” block style available with some blocks cannot be reset to the default. The “C” in the Checkbox block name is lowercase while all other block names begin with an uppercase letter. These minor things make the plugin seem less polished than it is.

Even with the issues I have outlined, I would recommend people in the market for a block-based form builder to give this plugin a test run. Its simplicity will make it an easy choice for many. For the most part, it works well. At the end of the day, it lets you build forms and stores the submissions for those forms directly in the database, and that is what truly matters.

I am a firm believer that we are at the beginning of something special. It will just take a bit of time before we get there. Even if Gutenberg Forms does not take over the form-builder market, other plugin developers should start taking cues from what this plugin is doing.

9

9 responses to “Build Forms via the Block Editor With Gutenberg Forms”

  1. Neha says:

    I use gutenberg forms for my blog. I liked it. Creating forms is so much easier with this. Thanks for sharing this article.

    Report

  2. Munir Kamal says:

    Hi Justin,

    First of all, thank you so much for giving this plugin a try and covering it at Wp Tavern.

    https://github.com/munirkamal/gutenberg-forms
    Btw, this is an opensource project so if anyone is willing to contribute that would be much appreciated. 😇

    You put it very fairly that this is a new plugin and requires feedback to improve step-by-step. I have been gathering feedback lately from a very short number of users via the GitHub and WP plugin support forum and have been refining the plugin accordingly. Now as you cover it at the mighty Wp Tavern, I expect to get more feedback to proceed in the right direction to shape this plugin further.

    Addressing your highlighted problems/issues:

    Forms CPT is limited to only form fields?
    Well, this might be a little confusion I understand. I am using a template lock on this CPT to make sure it remains a form block mainly. But, you can insert other Gutenberg blocks inside the form blocks here as well.
    https://share.getcloudapp.com/NQugDmjB
    Shortcode Approach.
    I mainly added a shortcode approach to extend the form usage outside the Gutenberg editor. So users can actually create forms using Gutenberg editor via the Forms screen and then use it anywhere using the shortcode. This is why I mainly added the shortcode functionality. And, for the time being I’ve utilized the same approach to insert saved forms in Gutenberg as well. But, you are right in saying this should not be this way for Gutenberg and I am going to improve it for sure.
    Broken Form Templates
    Yeah, I am aware of this as well. Basically most templates were created with an earlier version of the plugin and thus I need to update those using the latest version. This is a quick fix and I will do it asap. And yes I plan to keep adding more ready to use form templates.

    Overall you are correct about the quirks and nitpicks that are currently there, and I am definitely going to improve it in the next updates.

    Features Highlights of Gutenberg Form:

    I would like to highlight the features here for your readers and those who wish to try the plugin. I know the documentation is missing and I am working on it. But here are a few things you need to try.

    Multi-Step Forms:
    This is super easier to create a multi-step / multi-page form using Gutenberg Forms plugin. You are flexible to create any number of steps and also with the next/previous and submit button placement.
    https://share.getcloudapp.com/4gujyEA4
    Conditional Logic:
    This a nifty feature to show/hide fields based on the value of another field. You can also apply it on the Form Group block and this way you can toggle a group of fields easily.
    https://share.getcloudapp.com/2Nu5XDk4
    Email Editor:
    You can define your desired fields to send out to the email notification. Further, you can also provide “To”, “From”, “CC”, “BCC”. Or you can completely disable the email notification via the “Form Actions” settings for any specific form you are working on.
    https://share.getcloudapp.com/ApuAjd8e
    Field Transform
    As all the form fields are actually Gutenberg Blocks, I have implemented Blocks Transform API in use here to transform field types to another with a click. So you can transform the checkboxes to the radio, select and retain the options. Similarly, you can transform other field types.
    https://share.getcloudapp.com/4gujyE75
    Add-ons
    I have already released first add-on/integration that os for MailPoet. More to follow along. You can get this add-on from here.
    https://wordpress.org/plugins/guten-forms-mailpoet/
    Flexibility for Devs & Theme Authors

    Although I haven’t put in efforts to create hooks and filters in this plugin yet to make it much extendible,, as this is based on Gutenberg Blocks developers can already extend it by modifying blocks the way you can filter any Gutenberg blocks. But I plan to make it more extendible in the near future. Theme authors can already recommend this and include/register their custom styles for the form using the Block Styles API. And thus they may have a branded form for their theme users.

    Having said that, as you mentioned, there are still rough edges and a lot more to be added. I am requesting feedback from the readers of WP Tavern. Kindly try this out and provide your feedback to improve this plugin. 🙏

    Regards,
    Munir

    Report

  3. Gary Taylor says:

    You sum up the problem for most people in your opening paragraph. I want a simple “get in touch” form, but I want to filter out spam with Akismet or similar. I went with Ninja Forms, which is overkill and adds an extra panel on the right-hand setting screen on every post (hate that). So I’ll be giving this a run-out on my test site… I’ve tried pretty much all the others!

    Report

  4. Kim says:

    All I can say is: well done Munir! You’ve been quite fast at improving it. Continue making your dent!

    Report

  5. Titus says:

    Hi Munir,
    Thanks for this. I currently use the previous form code for widgets which I had to create using the classic editor, as the jetpack form does not function with current block code on widgets.
    Will the form function with block code function on site wide widgets?
    Thanks

    Report

  6. Jacob Jack says:

    Sounds like its worth a try! I’ll be sure to check it out!

    Report

  7. Munir Kamal says:

    Just a little update.

    Based on Justin’s feedback. I have already worked out on a server-side block to insert forms in Gutenberg post/page that are created via the custom “Forms” screen.
    https://share.getcloudapp.com/p9uPwgEx

    So now it won’t be a shortcode approach anymore for Gutenberg users. You can still use the shortcode to place the form anywhere outside Gutenberg.

    This will be available in the next update soon. Following up on other feedback as well. 😇

    Report

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: