Contact Form 7 block for Gutenberg Editor introduced

Contact Form 7 v5.3 introduces the Contact Form 7 Block (CF7 Block) for the WordPress Gutenberg/Block editor. You can now easily add a form into a Page or Post directly while writing it, instead of manually copying a shortcode from the Contact Forms page.

This article will show you how to add a form using the CF7 Block in the WordPress Gutenberg editor.

Advantages of the Contact Form 7 Block

Using the CF7 Block provides the following advantages:

You don’t have to manually copy the shortcode for a form to add it to a page.
You can easily choose from a dropdown list of the forms on your website.

Tip: Make sure that you are using the Gutenberg editor and not the Classic editor. The CF7 Block is only available in the new WordPress Gutenberg/Block editor

Using the Contact Form 7 Block

1. Create the form that you want to add to the post.

Tip: You can easily and efficiently create a Contact Form 7 form using the CF7 Skins Visual Editor.

2. Add a new post or edit a previously added post where you want to add the form.

3. Click the Add Block button.

4. Select Contact Form 7.

5. Choose the required contact form from the list. The dropdown list shows all the Contact Form 7 forms present in your WordPress website.

6. Save the post.

The selected contact form is now added to the article.

Tip: You can use the Contact Form 7 Block to select Contact Form 7 Skins forms when using the CF7 Skins Visual Editor.

Tip: With the CF7 Skins Visual Editor you don’t need to work directly with CF7 Tags. Our drag & drop Visual Editor includes support for all Contact Form 7 tags & options.