Setting Up A Contact Page Using Gutenberg And Caldera Forms

Image of a mountain with the text "Setting Up A Contact Page Using Gutenberg - Caldera Forms"

By Anchaal Pathak

Posted On:

If you own a WordPress online business and want to reach your visitors in an easy, yet effective way, then adding a contact form to your website or store can be one of the best options for you.

Caldera Forms is one of the best and most popular WordPress form builders. It allows you to create various types of forms for your business with so much ease. Moreover, with the introduction of the new WordPress Editor Gutenberg in its 5.0 version, Caldera was the first plugin to be “Gutenberg-ready“. So, If you want to add a contact form on your website and try out the new Gutenberg experience with your forms, we will tell you how to set up a contact page using Gutenberg and Caldera Forms. Take a look:

Creating A Contact Form

Before adding your contact form to a page, you should have a form created beforehand. If you don’t have any form, firstly create one. Let us start by creating a simple contact form. If you are a first time user, follow these steps to create a simple contact form.

Creating A Simple Contact Form

We will now be creating a contact form using Caldera Forms. You will be required to have Caldera Forms installed and your WordPress should be updated to the latest 5.0 version. Then follow these steps:

1. Getting Started

screenshot of Caldera Forms menu in WordPress Dashboard

Firstly, visit your WordPress Dashboard and navigate to the Caldera Forms admin page. Hover over the Caldera Forms icon and click on Forms from the drop-down menu.

2. Create A New Form

screenshot of New Form button on Caldera Forms

You can now create a New Form by clicking on the New Form button at the top of the page. A new pop-up window called “Create New Form” will appear.

3. Selecting Form Template

selecting the 'Contact Form' template

Select your form template from the popup window. Since we are creating a simple contact form, we will select the first template which is a “Contact Form“.

We will now add the form name. Say, I will name my form “Contact Us!” And now click on the “Create Form” Option.

4. Build Your Own Form

screenshot of the Caldera Forms' Layout Builder

You will now be taken to your Contact Form.

If you want to add more fields to your form, you can check our Getting Started Guide here.

When you are done, you can now save the form. Your form will now be created.

Adding A Contact Form Block In WordPress 5.0

Our form is ready now. We will now be adding it to a page. We will tell you how to make a contact page with Gutenberg and Caldera Forms.

5. Using Gutenberg Editor To Add Form

adding new page in Gutenberg

Firstly, we will be adding a new page. Go to Dashboard > Pages > Add New Page.

Now, give your page a name. We will be naming it as “Contact Us“.

Once you have given the name, click the plus icon to add a new block. You will find a block named “Caldera Form” in the Common Block section. You can also select Caldera Form by searching for it in the block search bar.

6. Choosing A Form

screenshot of Choosing A Form menu in Gutenberg block
Once you choose a form, you will find a placeholder block with an option called Choose A Form. Now choose the Contact Us! form from the dropdown. Once you have selected the form from the drop-down shown in the placeholder, a preview of the form will appear like the one shown in the image.

7. Changing The Form In The Block

changing the form in the block

The Choose A Form setting will disappear once the form preview shows up on the page. This setting will be available in the block settings on the extreme right of the Gutenberg editor. This option will have the Block tab in the sidebar with the Caldera Forms Settings for the block.

Start Setting Up Your Own Contact Form Now!

Contact Forms are important if you want to bring more visitors to your website. They allow you to know the preferences of your customers in a much-simplified way. Therefore, if you are searching for a plugin that is compatible with this new Gutenberg block editor and allows you to create forms without any hassle, choosing Caldera Forms will be the best option for you.

Moreover, you can also add features like Form to PDF, Email Delivery Service, Message Layout options, Antispam and a lot more with Caldera Forms Pro and make your forms more versatile.

Want to translate your website (and forms) and reach more audience?

Subscribe to our mailing list!

* indicates required