Contact

Sections contact

A simple contact form.

Markup

Drops in as data-pb-block="contact".

html

<section data-pb-block="contact" class="pb-contact" style="padding:4rem 1.5rem;max-width:36rem;margin:0 auto;">
  <h2 class="pb-contact__title" style="text-align:center;font-size:2rem;margin:0 0 2rem;">Get in touch</h2>
  <form class="pb-contact__form" style="display:flex;flex-direction:column;gap:1rem;">
    <input type="text" placeholder="Name" style="padding:0.75rem;border:1px solid #cbd5e1;border-radius:0.5rem;">
    <input type="email" placeholder="Email" style="padding:0.75rem;border:1px solid #cbd5e1;border-radius:0.5rem;">
    <textarea placeholder="Message" rows="4" style="padding:0.75rem;border:1px solid #cbd5e1;border-radius:0.5rem;"></textarea>
    <button type="submit" style="padding:0.75rem;border:0;border-radius:0.5rem;background:#4f46e5;color:#fff;font-weight:600;cursor:pointer;">Send</button>
  </form>
</section>

Settings

Everything a block can be configured to do:

Bind to State: Drive content reactively from a State with declarative Alpine — x-text, x-show or x-model over $store.app.<stateKey>.
On event → run a Flow: Wire an interaction to a Flow: set data-pb-flow="<slug>" and data-pb-flow-event="click|submit|hover|change|…". The flow's returned actions update the page.
Link to a page: Navigate to another published page on click with data-pb-page="<slug>".
Styles & classes: Edit spacing, colour and layout visually in the GrapesJS editor. The wrapper carries data-pb-block="contact" so it imports as a labelled, editable component.