PageBuilder
Visual section builder for MODX 3. Draft and publish without overwriting resource content
Contact
Simple contact block: clickable phone and email (tel: / mailto:), optional short text and button.
What the contact block adds
- Phone and email tap-to-call on mobile
- No form when direct contact is enough
- Smaller footprint than Contact with map
Where to place
- Landing footer: how to reach you
- Contact page when you do not need a map
- Next to a form: alternate contact channel
Page examples
Minimum for output
Fill at least Phone or Email. The button behaves like the CTA section.
Similar sections
- Contact with map when you need a map pin
- Contact form for multi-field leads
Block parameters
| Parameter | Value |
|---|---|
| key | contact |
| Layer | Free |
| Category | conversion (conversion) |
| Chunk | pagebuilder_contact |
| Requires | — |
Inspector fields
Fill these fields in the section inspector. Field types are documented in the field types reference.
Title (title)
Type text. Optional.
Text (text)
Type textarea. Optional.
Phone (phone)
Type text. Optional.
Email (email)
Type text. Optional.
Button label (button_label)
Type text. Optional.
Button URL (button_url)
Type url. Optional.
Site output
pb-contact with tel:/mailto: links and optional CTA button.
Section data
Example payload after save. Media, video, and map values may be enriched on output:
json
{
"title": "Section title",
"text": "Supporting text under the title.",
"phone": "+7 (999) 123-45-67",
"email": "hello@example.com",
"button_label": "Learn more",
"button_url": "https://example.com/action"
}Chunk template
Fenom chunk pagebuilder_contact:
fenom
<section class="pb-section pb-section--contact pb-contact{if $cssClass} {$cssClass|escape}{/if}" data-pb-section="contact"{if $id} id="pb-{$id|escape}"{/if}>
<div class="pb-section__inner pb-contact__inner">
{if $title}
<h2 class="pb-heading pb-contact__title">{$title|escape}</h2>
{/if}
{if $text}
<p class="pb-contact__text">{$text|escape}</p>
{/if}
<div class="pb-contact__details">
{if $phone}
<a class="pb-contact__link pb-contact__phone" href="tel:{$phone|escape:'url'}">{$phone|escape}</a>
{/if}
{if $email}
<a class="pb-contact__link pb-contact__email" href="mailto:{$email|escape:'url'}">{$email|escape}</a>
{/if}
</div>
{if $button_label && $button_url}
<div class="pb-contact__actions">
<a class="pb-contact__button pb-button" href="{$button_url|escape}">{$button_label|escape}</a>
</div>
{/if}
</div>
</section>JSON definition
core/components/pagebuilder/sections/contact.json