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.