Business · Gutenberg
Contact Section block for WordPress
All-in-one contact page section: info cards (address, phone, email, hours) + a contact form + optional embedded map — all in a polished configurable layout.
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
All-in-one contact page section: info cards (address, phone, email, hours) + a contact form + optional embedded map — all in a polished configurable layout.
Inspector panels on this block: Layout, Form Fields, Radii, Info Cards. Those titles come from index.js, not from a shared template.
Behavior controls: “Layout” options: Info left, form right, Info right, form left, Stacked (info top); “Map embed URL” (Google Maps embed URL (share → embed)).
Where to find it
Gutenberg inserter → Business → search “Contact Section” (block name `blockenberg/contact-section` in block.json). Style it in the sidebar after insert.
How to use Contact Section block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Contact Section”, insert it. Category: Business.
- Configure inspector controls that exist on this block. Open Layout. Set “Show title & subtitle”, “Show info cards”, “Show contact form”, “Show embedded map”.
- Check the published page. The view script reads HTML data attributes: data-recipient, 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 |
|---|---|
| Layout | Select control; the chosen value is saved on the block. Options: Info left, form right; Info right, form left; Stacked (info top). block.json default: info-left. Saved as `layout`. |
| Show title & subtitle | On/off toggle in the inspector. On by default. Saved as `showTitle`. |
| Show info cards | On/off toggle in the inspector. On by default. Saved as `showInfoCards`. |
| Show contact form | On/off toggle in the inspector. On by default. Saved as `showForm`. |
| Show embedded map | On/off toggle in the inspector. Off by default. Saved as `showMap`. |
| Map embed URL | Text field in the inspector. Google Maps embed URL (share → embed). Saved as `mapEmbedUrl`. |
| Map height (px) | Numeric range control in the inspector. Range 160–480. block.json default: 280. Saved as `mapHeight`. |
| Name field | On/off toggle in the inspector. On by default. Saved as `showName`. |
| Phone field | On/off toggle in the inspector. Off by default. Saved as `showPhone`. |
| Subject field | On/off toggle in the inspector. On by default. Saved as `showSubject`. |
| Submit button label | Text field in the inspector. block.json default: Send Message. Saved as `submitLabel`. |
| Recipient email | Text field in the inspector. Saved as `recipientEmail`. |
| Success message | Text field in the inspector. block.json default: Thank you! We'll be in touch shortly.. Saved as `successMessage`. |
| Typography — Title | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoTitle`. |
| Subtitle | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoSubtitle`. |
| Icon size (px) | Numeric range control in the inspector. Range 28–64. block.json default: 32. Saved as `iconSize`. |
| Field size (px) | Numeric range control in the inspector. Range 12–18. block.json default: 14. Saved as `fieldSize`. |
| Label size (px) | Numeric range control in the inspector. Range 10–16. block.json default: 13. Saved as `labelSize`. |
| Card radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 12. Saved as `cardRadius`. |
| Card gap (px) | Numeric range control in the inspector. Range 8–32. block.json default: 16. Saved as `cardGap`. |
| Form radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 14. Saved as `formRadius`. |
| Field radius (px) | Numeric range control in the inspector. Range 0–20. block.json default: 8. Saved as `fieldRadius`. |
| Button radius (px) | Numeric range control in the inspector. Range 0–99. block.json default: 8. Saved as `btnRadius`. |
| Padding top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 60. Saved as `paddingTop`. |
| Padding bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 60. Saved as `paddingBottom`. |
| Label | Text field in the inspector. |
| Value | Text field in the inspector. |
What the front-end script actually does
- The view script reads HTML data attributes: data-recipient, data-success.
- Submit/load uses fetch or wp.apiFetch on the published page, not the editor canvas.
When this is the right block
- All-in-one contact page section: info cards (address, phone, email, hours) + a contact form + optional embedded map — all in a polished configurable layout — that is the job of Contact Section, not a generic content block.
- Use it when you need the editor control labeled “Show title & subtitle”, which exists on this block’s inspector.
- It matches pages about contact, form, map.
- Inserter grouping: company, service, and operations pages.
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 Section block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Contact Section”. It sits under Business. After insert, open Layout and set “Show title & subtitle”, “Show info cards”, “Show contact form”, “Show embedded map”.
What makes Contact Section different from other Blockenberg blocks?
All-in-one contact page section: info cards (address, phone, email, hours) + a contact form + optional embedded map — all in a polished configurable layout. Inspector labels on this block include “Show title & subtitle”, “Show info cards”, “Show contact form”, “Show embedded map”.
Is the Contact Section Gutenberg block free?
Yes. Contact Section ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Contact Section 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: Layout, Form Fields, Radii, Info Cards).
Related business blocks
Contact Info
Display business contact information with icons, labels, and optional Schema.org markup.
Address Card
Business address card with contact details, opening hours, and optional map link.
Contact Form
A fully styled contact form that sends emails via your WordPress site — no plugin required.
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.
Google Map
Embed a Google Map by address with zoom, map type, caption, border, and shadow controls.
Contact Card
Business card block with photo, contact details, and social links. Multiple style variants.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Contact Section from the Gutenberg inserter.