Almost every site needs a contact form and new WordPress users must each figure out which of the many options they should use. I call this a “WordPress fire drill” and it is repeated hundreds or thousands of times a day. I really think that a contact form should be built into WordPress core, but until then you might want to consider the Kadence Form block. Yes, for something as simple as a contact or email signup form, you can use Gutenberg along with Kadence Blocks and don’t need a dedicated forms plugin. In this article, I’m going to take a look at the Kadence Form block and walk-through the steps for creating a contact form. The good news, is that you can get a basic contact form up and running using the free version of Kadence Blocks, though the premium version adds more features.
Video Version
Using the Free Version of Kadence Blocks
There is a free version of Kadence Blocks available from the WordPress plugin directory. You install it just as you do any other plugin.
When you activate Kadence Blocks you get a new menu off of the Settings menu where you can disable or enable the blocks you want to use in the Gutenberg editor. The option to disable blocks you don’t want to use is a sign of better addons. There are currently 12 blocks in the free version.
Now, to add a contact form. I have a new page called “Contact Us’ on a demo site.
With Kadence Blocks activated we get a high level settings menu in the upper right corner, the “K.” Clicking on that allows you to set the default color palette and to hide blocks, by clicking on the eye icon, if desired.
If you click on one of the block, a popup appears where you can set the defaults for the block. Here is the Space / Divider, for example.
Back to creating the contact form, I click on the blue square with a plus sign to show the list of blocks available and find the form block in the list.
When I add the form block to the page, a basic contact form is added. The form has an optional Name field and email and message fields which are required.
With the form selected, we see that there are a number of options available in the right panel. Let’s take a look at the options.
At the top there is a setting for each field in the form and the option to add another field. There is a drop down for the field type.
The first setting is for the field type. In the drop down there is the option for Text, Email, Textarea, Accept, Select, Telephone, Checkboxes, and Radio buttons.
Below that is a toggle to make the field required or not. I turn this on so that the Name field is required.
There is the label (or field name) and a toggle to show the label. Then there are the options for a placeholder, a default value, help text, auto fill, and width. Auto fill gives you the option to pick a field from the user profile area which would be automatically filled in if the user is logged in.
After the button to add a new field, there are sections that apply to the form as a whole. First, there is a section to choose what happens after the form is submitted. The default is to send an email, but you can also select to redirect. When you check redirect then a section is added below for specifying the redirect options. There you can enter a URL to go to after the form is submitted.
The Auto Respond Email and Database Entry are pro features and we will look at those when taking a look at the pro version.
Next are the settings for the email itself. These fields are pretty self-explanatory. I’ve filled some of them in. Note that WordPress is notorious for not sending emails and to fix that it is recommended that you install an SMTP plugin that makes this more reliable.
There is a simple spam trap that adds a hidden field. Spam bots somethings fill these out and so can be identified as a bot.
Then there are settings to add Google recaptcha to the form. It is nice that you have the option to use either version 2 or version 3. There are links to the site where you can get your free keys.
I was a bit surprised to see fields for entering the recaptcha keys on the page itself. Often these are entered in a global settings area, so you only need to add them once.
There are a ton of styling options for all of the components of the form. Note that for most of these style options we have the ability to set them for different screen sizes. There are a large number of field style settings. (In my testing I tried to set different settings for the Normal and Focus states and there was a small bug where they stayed the same. I reported that and expect it will be fixed soon.)
There are basic and advanced label settings.
Lots of options for button styling. Note that I adjusted the button style.
There are message settings of what to show the user when the form is successfully submitted and when there is an issue.
There are also, under the advanced settings, the option to add an HTML anchor, if you want to have a link to jump to the form, and a CSS class.
Here is how the form looks on the front:
Kadence Blocks Pro Form Extras
The pro version of Kadence Blocks is available from the Kadence website. You can purchase Kadence Blocks Pro stand-alone or as part of the Kadence Membership. The membership includes a few themes and several plugins.
The Pro version of Kadence Blocks currently add 7 additional blocks as well as two “Extras,” or enhancements to blocks in the free version.
When you install and activate Kadence Blocks Pro, the menu item for Kadence Blocks that had been under the Settings menu, gets moved out to its own top level menu. The page lists all of the blocks (both free and pro) and you can enable or disable them.
One of the extras is an extension of the Galley block and the other one, which is relevant here, is the Form Extras. There are a few things that the Form Extras brings. First, there are more actions after submit options. You can send the user a copy of the email, save the submission in the database, and add the user to SendInBlue or MailChimp. Saving in the database is nice because then you have a record even if the email is lost or goes into spam. The option to add the user to a mailing list means that you can use the form for email signups. I checked the database entry option.
Another feature that Form Extras brings is on-scroll animations, so when you scroll the form into view there is some animation effect. These settings are found in the Animate on Scroll panel. As you can see, there are quite a few animate effects available.
There is a settings panel for the Auto Response email. Here you have pretty much the same set of options as for the email sending, but this time the settings apply to the email sent to the user after they fill out the form.
Finally, there are a couple of setting that apply to the form being saved in the database. You can give the form a name, save the user’s IP address and save information about the user’s device.
Testing the Contact Form
I saved the form and went to the Contact Us page and filled it out.
I got a success message after submitting it. Note that there are plenty of options to style the message as desired. This is the default styling.
Here is what the email looks like in Thunderbird.
Kadence Forms pro added a menu item for saved form submissions. Here is what that screen looks like.
Summary and Conclusions
If all you need on your site is a basic contact form, then the free version of Kadence Blocks might save you from needing to install a separate forms plugin. There are a ton of styling options, so you can get it looking the way you want. The pro version adds the additional options for after the form is submitted. Sending a copy to the visitor is a nice touch and I really like the ability to save the form submission in the database. Saving a copy is almost a necessity. The animations that come with the pro version are a nice extra.
I did run into one small bug with the field styling, but I imagine that is easily fixed. In general, I think there are two places where people might find a limitation. First, only Mailchimp and SendInBlue options are available for list signup and there are dozens of email list providers. For email signups the form block is only useful if you are using one of those two. Second, the Kadence Form Block is good for simple forms, but it is not a full fledged forms option. There are no conditional fields, multi-step forms, and other advanced features. That’s fine, there is no reason to try and stuff a full forms plugin into a Gutenberg block, but just be aware of what it provides.
Setting up a contact form was very easy, probably easier than it seems looking through all of the settings. I’ve been pleased using Kadence Blocks and have used the Form Block on one of my sites for its contact form. Until WordPress adds a contact form to core, this is a good option.
Thanks for this great post. Is there any way that we can create separate sections within the same form? For example, separating some fields with a line or a different title. This is for long forms as they don’t look nice when the fields are listed endlessly without any grouping or title separation.
Hi Karim,
Not easily. I did notice that each field is in its own DIV, so I guess you could manually add some CSS targeting a DIV to put a border-bottom or similar style to it.
Hi. Autofill don’t work in kadence block.
That is my understanding also. You would need to use some custom JavaScript to achieve that.
I thought javascript was outlawed years ago and most browsers do not support it anymore.
You must be thinking of something else. Browsers have excellent support for JavaScript and most sites use it.