Business · Gutenberg
Contact Form block for WordPress
A fully styled contact form that sends emails via your WordPress site — no plugin required.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
A fully styled contact form that sends emails via your WordPress site — no plugin required.
Inspector panels on this block: Fields, Labels & Placeholders, Email Settings, Style & Layout. Those titles come from index.js, not from a shared template.
Behavior controls: “Recipient Email (blank = admin)” (Leave blank to use the WordPress admin email); “Button Style” options: Primary (solid), Outline, Full Width.
Where to find it
Gutenberg inserter → Business → search “Contact Form” (block name `blockenberg/contact-form` in block.json). Style it in the sidebar after insert.
How to use Contact Form block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Contact Form”, insert it. Category: Business.
- Configure inspector controls that exist on this block. Open Fields. Set “Name Field”, “Email Field”, “Phone Field”, “Message Field”.
- Check the published page. The view script reads HTML data attributes: data-error, data-recipient, data-recipient-sig, data-subject, data-success. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Name Field | On/off toggle in the inspector. On by default. Saved as `showName`. |
| Email Field | On/off toggle in the inspector. On by default. Saved as `showEmail`. |
| Phone Field | On/off toggle in the inspector. Off by default. Saved as `showPhone`. |
| Message Field | On/off toggle in the inspector. On by default. Saved as `showMessage`. |
| GDPR Checkbox | On/off toggle in the inspector. Off by default. Saved as `showGdpr`. |
| Name Label | Text field in the inspector. block.json default: Your Name. Saved as `labelName`. |
| Name Placeholder | Text field in the inspector. block.json default: John Doe. Saved as `placeholderName`. |
| Email Label | Text field in the inspector. block.json default: Email Address. Saved as `labelEmail`. |
| Email Placeholder | Text field in the inspector. block.json default: hello@example.com. Saved as `placeholderEmail`. |
| Phone Label | Text field in the inspector. block.json default: Phone Number. Saved as `labelPhone`. |
| Phone Placeholder | Text field in the inspector. block.json default: +1 (555) 000-0000. Saved as `placeholderPhone`. |
| Message Label | Text field in the inspector. block.json default: Your Message. Saved as `labelMessage`. |
| Message Placeholder | Text field in the inspector. block.json default: Write your message here…. Saved as `placeholderMessage`. |
| GDPR Label | Text field in the inspector. block.json default: I agree to the privacy policy. Saved as `labelGdpr`. |
| Submit Button Label | Text field in the inspector. block.json default: Send Message. Saved as `submitLabel`. |
| Recipient Email (blank = admin) | Text field in the inspector. Leave blank to use the WordPress admin email. Saved as `recipientEmail`. |
| Email Subject | Text field in the inspector. block.json default: New message from your website. Saved as `emailSubject`. |
| Success Message | Text field in the inspector. block.json default: Thank you! Your message has been sent.. Saved as `successMessage`. |
| Error Message | Text field in the inspector. block.json default: Something went wrong. Please try again.. Saved as `errorMessage`. |
| Max Width (px) | Numeric range control in the inspector. Range 300–1200. block.json default: 660. Saved as `maxWidth`. |
| Field Padding (px) | Numeric range control in the inspector. Range 6–24. block.json default: 12. Saved as `fieldPadding`. |
| Field Border Radius (px) | Numeric range control in the inspector. Range 0–24. block.json default: 8. Saved as `fieldRadius`. |
| Button Border Radius (px) | Numeric range control in the inspector. Range 0–40. block.json default: 8. Saved as `btnRadius`. |
| Button Style | Select control; the chosen value is saved on the block. Options: Primary (solid); Outline; Full Width. block.json default: primary. Saved as `btnStyle`. |
| Labels | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoLabel`. |
| Submit Button | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoButton`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-error, data-recipient, data-recipient-sig, data-subject, data-success.
- It calls WordPress REST: `/blockenberg/v1/contact`.
- Submit/load uses fetch or wp.apiFetch on the published page, not the editor canvas.
- A honeypot field named website is included to drop bot submissions.
- Native HTML constraint validation runs before any network request.
When this is the right block
- A fully styled contact form that sends emails via your WordPress site — no plugin required — that is the job of Contact Form, not a generic content block.
- Use it when you need the editor control labeled “Name Field”, which exists on this block’s inspector.
- It matches pages about contact, form, email.
- Use it when submissions should hit this block’s REST route, not a third-party form plugin.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Contact Form block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Contact Form”. It sits under Business. After insert, open Fields and set “Name Field”, “Email Field”, “Phone Field”, “Message Field”.
Where do Contact Form submissions go?
The published page calls this block’s Blockenberg REST route (see front-end notes). The editor canvas does not send mail unless you preview on the front end.
Is the Contact Form Gutenberg block free?
Yes. Contact Form ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Contact Form to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Fields, Labels & Placeholders, Email Settings, Style & Layout).
Related business blocks
Contact Section
All-in-one contact page section: info cards (address, phone, email, hours) + a contact form + optional embedded map — all in a polished configurable layout.
Contact Info
Display business contact information with icons, labels, and optional Schema.org markup.
Email Signature
Design and preview a rich HTML email signature with avatar, name, title, company, phone, email, website, social links, and an optional branded banner or divider. Outputs email-client-safe table-based HTML.
Address Card
Business address card with contact details, opening hours, and optional map link.
Contact Card
Business card block with photo, contact details, and social links. Multiple style variants.
Founder Quote
CEO or founder personal message section with photo, signature, and multiple layout styles for About pages.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Contact Form from the Gutenberg inserter.