Gutenberg is not just an editor to create blog posts on your WordPress site. Instead, you can also use it to create the core pages of your website (homepage, about page, contact page, and so on) in case you are not interested to use a page builder plugin like Elementor and Divi Builder. While the default blocks of Gutenberg are limited, you can install a plugin to add blocks for certain functionalities. We have curated the best WordPress plugins that offer a Gutenberg block to create a form.
There are actually lots of options for form builder plugins in WordPress, but they mostly come with their own form builder, instead of Gutenberg. To make it easier for users to add a form to Gutenberg, plugins like WPForms and Contact Form 7 has offered a dedicated block. But again, the form is still created via their own builder instead of Gutenberg. The block is only used to select a form to be added. The plugins below allow you to create the form using Gutenberg.
Form Builder Plugins for Gutenberg
1. Kadence Blocks
If you are not interested to use a page builder plugin to create your WordPress site and prefer to use Gutenberg instead, Kadence Blocks is a perfect plugin for you. The plugin offers 12 blocks to enrich the collection of your Gutenberg blocks, allowing you to add more elements. One of the blocks offered by Kadence Blocks is Form. As the name suggests, you can use the Form block to create a form to your Gutenberg-powered page. You can use it to create a wide range of form types. From a contact form, job application form, and so on. You can even use it to create an email opt-in form and integrate it with MailerLite, SendInBlue, and Mailchimp. The block Form block of Kadence Blocks also has its own submission manager to allow you to manage the form submissions via your WordPress dashboard. The Form block of Kadence Blocks supports the following fields:
- Text Area
The Form block of Kadence Block also allows you to customize every single element of your form. From the field labels, container, submit button, messages, and so on. You can set things like color and typography from the settings panel of Gutenberg. Furthermore, you protect your form using reCAPTCHA. Be it version 2 or version 3.
Being a well-known name in the web development industry, you might have known about GoDaddy. CoBlocks is a WordPress plugin from GoDaddy. It offers a set of Gutenberg blocks just like Kadence Blocks above. One of blocks offered by CoBlocks is called Form, which is designed to create a form in Gutenberg. The Form block of CoBlocks offers the following field types:
- Text Area
With the field types above, you can use the Form block of CoBlocks to create form types like contact form, job application, and even survey. Unfortunately, there is no option to connect your form with email marketing tool. You can also customize your form the Gutenberg settings panel. Unlike Kadence Blocks, the Form block of CoBlocks offers no option to control the typography (font family, font size, and so on). It only supports one form action: send to email. CoBlocks supports reCAPTCHA protection (version 3).
3. Ultimate Addons for Gutenberg
Ultimate Addons for Gutenberg is a plugin from Brainstorm Force, the company behind Astra theme. Same as the two first plugins above, Ultimate Addons for Gutenberg also offers a set of blocks to Gutenberg, allowing you to add elements to your page using blocks other than the default blocks. One of the elements you can add is form thanks to the Form block. The experience of creating a form using the Form block of Ultimate Addons for Gutenberg is same as the two previous plugins above whereby you can create the form right from Gutenberg. You can add the following fields when creating a form using Ultimate Addons for Gutenberg:
- Text Area
- Date Picker
Although you can use the Form block of Ultimate Addons for Gutenberg to create some form types, you can only send the form submissions to your email. There are no other form actions supported by the plugin at the time of writing. When it comes to styling options, Ultimate Addons for Gutenberg allows you to set the typography and color of your form elements. Be it the form labels, submit button, or messages (error and success messages). reCAPTCHA protection is supported.
JetFormBuilder is a WordPress plugin from Crocoblock. The plugin is designed specifically to create a form with Gutenberg. Even so, the experience of creating a form using JetFormBuilder is a bit different to the first three plugins above. You can’t add the from directly to a page. Instead, you need to create the form first. The workflow is not different to plugins like WPForms and Contact Form 7 whereby you need to create a form first before you can add it to a page. The different is that the form is created using Gutenberg. If you have no problem with the workflow, then JetFormBuilder is a great option as it supports field types and form actions at most than other plugins above. JetFormBuilder allows you to add the following form fields:
- Text Area
- Color Picker
- Date Picker
- Date Time
- Media/File Upload
While for the form action, JetFormBuilder offers the following options:
- Send to email
- Insert/update post
- Register user
- Update user
- Call hook
- Redirect to a page
In addition, JetFormBuilder also support PayPal payment gateway to allow you to accept payment via PayPal. All of these features are free. JetFormBuilder supports add-ons (paid) to connect your form with more services.
Otter is another WordPress plugin that comes with Gutenberg blocks to create a form. There are two blocks that you can use to create the form: Contact Form and Subscribe Form. The Subscribe Form block allows you to create an email opt-in form for Mailchimp and Sendinblue, while the Contact Form block allows you to create a contact form whereby the form submissions are sent to the specified email. You can add the following fields when creating a form using the Otter plugin:
Unfortunately, Otter offers no setting options to customize the typography and the colors of the form elements. It uses the default settings of your theme.
The Bottom Line
As we mentioned in the opening section, you can use Gutenberg to create the core pages of your website other than blog posts. However, you need to a proper plugin to add elements that are not possible to add with the default blocks of Gutenberg. If you need to add a form, you can consider one of the plugins above. Depending on what type of form you want to add. For a simple contact form, Kadence Blocks, CoBlocks, and Ultimate Addons form Gutenberg are good. If you want to create a more advanced form, you should go for JetFormBuilder as it offers more form fields support, as well as more form action options.