How to Add a Contact Form in the WordPress Block Editor (No Shortcodes)

How to Add a Contact Form in the WordPress Block Editor

Adding a contact form to WordPress usually means installing a heavy form plugin, learning its separate builder screen, configuring your form there, and then pasting a shortcode into your page to make it show up. If you build your site in the block editor, that whole flow feels backwards. You’re leaving the editor to build something that’s supposed to live inside it.

There’s a more natural way. What if a form were just a block? You add a Form block to your page, drop in the fields you need, and publish, all without leaving the editor or touching a shortcode.

That’s exactly how BeautyForms Form Builder works. In this guide, we’ll show you how to build a contact form the block-native way, and why it’s a cleaner fit for modern WordPress.

The Problem With Traditional Form Plugins

Most popular form plugins were built before the block editor existed, and it shows. They tend to come with a few frustrations:

  • A separate builder screen. You configure your form in the plugin’s own interface, away from the page it lives on.
  • Shortcodes and embeds. You build the form in one place, then paste a shortcode somewhere else to display it, and hope the styling matches.
  • Heavy footprints. Many load their own scripts and styles on every page, whether you’re using a form there or not.
  • A styling system to relearn. You adjust spacing, colors, and fonts using the plugin’s controls instead of the ones you already know from the block editor.

None of that is terrible on its own, but together it’s a lot of friction for something as common as a contact form. The block-native approach removes it.

A Form Is Just a Block

BeautyForms takes a different starting point: every part of a form is a real block. A form is a Form block, and each field is its own block nested inside it. Because of that, your forms live directly inside normal posts and pages, with no separate screen, no shortcodes, and no embeds.

Better still, the fields use the block editor’s own controls for spacing, typography, color, and borders, so there’s nothing new to learn. If you can style a paragraph or a button, you can style a form. Here’s how to build one.

Step 1: Install BeautyForms Form Builder

In your WordPress dashboard, go to Plugins → Add New Plugin, search for BeautyForms Form Builder, then click Install Now and Activate.

Step 2: Add the Form Block

Open the page or post where you want your form, click the block inserter, and add the Form block. This is the container that holds your fields and manages where submissions go.

Step 3: Add Your Fields

Inside the Form block, add the field blocks you need. BeautyForms includes a full set of thirteen blocks to build almost any form:

  • Text, Email, Textarea, Number, Phone, and URL fields
  • Select, Radio, and Checkbox (single consent or multiple choice)
  • Date and Hidden fields
  • A Submit button

For a classic contact form, you’d typically add Text (name), Email, and Textarea (message) fields, then the Submit button. Building it feels just like adding any other blocks to your page.

Step 4: Style It With Native Controls

Select any field and use the familiar block settings to adjust spacing, typography, colors, and borders. Because these are the block editor’s own controls, your form automatically fits the look of the rest of your site without custom CSS.

Step 5: Set Recipients and Success Behavior

Select the Form block and open its settings to configure where submissions are emailed, along with the subject and from address. Then choose what happens after someone submits: show a success message, or redirect them to a thank-you page. Save your settings when you’re done.

Step 6: Publish, and Reuse Anywhere

Publish the page and your form is live. Since the form is a normal block, you can reuse it across your site with a core synced pattern, so updating it in one place updates it everywhere.

What You Get Under the Hood

BeautyForms is lightweight on the surface, but solid where it counts:

  • Server-side validation. The server rebuilds each form’s field structure from the source page and validates every submission against it, so the browser’s data is never blindly trusted.
  • Spam protection built in. A honeypot field and a submission time-trap are both on by default, quietly filtering out bots.
  • Entry storage. Every submission is saved as an entry in WordPress, with each field stored as its own value, so you have a record even beyond the notification email.
  • Email notifications. Submissions are sent to the recipients you choose.
  • Developer friendly. Teams can extend the available field types and hook into new submissions with provided filters and actions.

Turn Submissions Into an Email List

A contact form is often the first step of a bigger flow. Because BeautyForms integrates first-class with our Send Emails plugin, you can send every new submission straight into a tagged contact list and trigger an automated welcome sequence, turning a simple form into the start of your email marketing, all inside WordPress.

Who It’s For

BeautyForms is a natural fit for anyone who builds in the block editor and wants forms that behave like everything else on the page: site owners who want a clean, lightweight contact form, developers who prefer working with native blocks, and anyone tired of juggling a separate builder and shortcodes.

Frequently Asked Questions

Does BeautyForms work with the classic editor?

No. BeautyForms Form Builder is built exclusively for the WordPress block editor, where every field is a real block you add directly to your page.

Where are form submissions stored?

Each submission is saved as an entry in WordPress, with one value stored per field, and a notification email is sent to the recipients you configure. So you have both an on-site record and an email copy.

Do I need to use shortcodes?

No. That’s the whole point. You build the form from blocks directly on the page, so there are no shortcodes or embeds to manage.

How do I reuse the same form on multiple pages?

Because a form is a normal block, you can turn it into a core synced pattern and place it anywhere. Updating the pattern updates every copy at once.

Can developers add custom field types?

Yes. Developers can register their own block in the BeautyForms category and add it to the allowed fields with a provided filter, and hook into new submissions with an action.

Is BeautyForms free?

Yes. BeautyForms Form Builder is free on WordPress.org, with all of its fields and features available to build and collect forms.

Get Started Today

If you build in the block editor, your forms should live there too, not behind a separate screen and a shortcode. BeautyForms makes a form just another part of the page, styled with the controls you already know.

Download BeautyForms Form Builder free and build your first block-native form in minutes. If it makes your forms simpler, a quick review on WordPress.org helps other builders find it.

Leave a Comment

Shopping Cart
  • Your cart is empty.