docs.modx.pro
  1. Extras
  2. PageBuilder
  3. Section catalog
  4. Free
  5. Contact

Contact ​

Simple contact block: clickable phone and email (tel: / mailto:), optional short text and button.

Contact

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 ​

Block parameters ​

ParameterValue
keycontact
LayerFree
Categoryconversion (conversion)
Chunkpagebuilder_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|pb_text}</h2>
    {/if}
    {if $text}
      <p class="pb-contact__text">{$text|pb_text}</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|pb_href|escape}">{$button_label|pb_text}</a>
      </div>
    {/if}
  </div>
</section>

See also ​