Components Forms
Submit button
Forms submit_button
A form submit button.
Markup
Drops in as data-pb-block="submit_button".
html
<button type="submit" data-pb-block="submit_button" class="pb-submit-button" 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;font-family:inherit;">Submit</button>Settings
Everything a block can be configured to do:
- Bind to State
- Drive content reactively from a State with declarative Alpine —
x-text,x-showorx-modelover$store.app.<stateKey>. - On event → run a Flow
- Wire an interaction to a Flow: set
data-pb-flow="<slug>"anddata-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="submit_button"so it imports as a labelled, editable component. - Field name
- The control's
namemaps to a collection field key — the runtime collects it on submit of the surrounding Form. - Validation
- Mark it
required; the collection field's type and options (e.g.email,selectchoices) drive server-side validation.