Add A Contact Form In The New WordPress Post Editor

Preparing to add a Caldera Forms to a WordPress Gutenberg contact page

WordPress 5.0 introduces a new, block-based post editor, nicknamed “Gutenberg”. Caldera Forms 1.5.8 or later is “Gutenberg-ready” and provides a Caldera Forms “Block”.

This documentation has been revised to reflect improvements made to the block in Caldera Forms 1.6.2.

About The New Post Editor

WordPress 5.0 will be released in 2018 and move WordPress post editing to be based on a new concept of blocks. Blocks are defined units of content. You can even design layouts of blocks and reuse them. We’re super excited about the future of WordPress thanks to Gutenberg, learn more here.

Caldera Forms is the first WordPress form builder, and one of the first WordPress plugins period to be “Gutenberg-ready”. If you want to try out the new editing experience with Caldera Forms, you just need to install the Gutenberg plugin. Make sure you have Caldera Forms 1.5.8 beta 2 or later installed.

Using The Caldera Forms Block

Preparing to add a Caldera Forms to a WordPress Gutenberg contact pageIf you don’t have a form yet, make sure to create one before starting. Once you have a form, create a new WordPress page. I’ll show how to make a contact page.

 

Adding a contact form to a WordPress contact page using Caldera Forms and Gutenberg
Note: In CF 1.6.1 and earlier, the form chooser floats above the block.

Start by entering the title block and giving your page a name, such as “Content”. Then click the plus icon to add a new block. Search for “Caldera Forms” and choose that block. Now you will see a placeholder block with one setting. This setting is called Choose A Form and lets you choose which form to show. Select the form you want to show.

Once you select the form, a preview of the form will load. The form isn’t functional, but will look like it should and provide a preview of how this form looks on the page.

How To Change The Form In The Block

Once you have a form on the page, the Choose A Form control that was in the placeholder will not show. The same control is available in the block settings. When you select the form block, you will see the Block tab in the sidebar has Caldera Forms settings for the block.

A WordPress Contact Us Page Built With Caldera Forms and Gutenberg