Form

Forms form

A form card with fields and a submit button.

Markup

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

html

<form data-pb-block="form" class="pb-form" style="display:flex;flex-direction:column;gap:1rem;max-width:28rem;padding:1.75rem;border:1px solid #e2e8f0;border-radius:0.75rem;background:#fff;box-shadow:0 1px 3px rgba(15,23,42,0.08);font-family:inherit;">
  <label class="pb-form__field" style="display:block;">
    <span style="display:block;margin:0 0 0.35rem;font-weight:600;color:#0f172a;font-size:0.9375rem;">Name</span>
    <input type="text" name="name" placeholder="Your name" required style="width:100%;padding:0.6rem 0.75rem;border:1px solid #cbd5e1;border-radius:0.5rem;font-size:0.9375rem;color:#0f172a;outline-offset:2px;box-sizing:border-box;">
  </label>
  <label class="pb-form__field" style="display:block;">
    <span style="display:block;margin:0 0 0.35rem;font-weight:600;color:#0f172a;font-size:0.9375rem;">Email</span>
    <input type="email" name="email" placeholder="you@example.com" required style="width:100%;padding:0.6rem 0.75rem;border:1px solid #cbd5e1;border-radius:0.5rem;font-size:0.9375rem;color:#0f172a;outline-offset:2px;box-sizing:border-box;">
  </label>
  <button type="submit" class="pb-form__submit" style="display:inline-block;padding:0.7rem 1.4rem;border:0;border-radius:0.5rem;background:#4f46e5;color:#fff;font-weight:600;font-size:0.9375rem;cursor:pointer;outline-offset:2px;">Submit</button>
</form>

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="form" so it imports as a labelled, editable component.
Submit to a collection: Set data-pb-record="<collection>" on the <form> to create a collection record from the named inputs on submit.
Submit via a Flow: Alternatively run a Flow on submit (data-pb-flow with data-pb-flow-event="submit"); the nearest form's fields become the flow input.
Fields: Each field block inside carries a stable name so the runtime collects it. Names map to collection field keys.