Form Blocks

How to create your own custom forms.

Write your own form

A form in Geppetto is simple HTML. There are no special rules, just write a normal form and point the action at Geppetto.

<form action="https://edge.geppetto.build/forms/submit/contact-us" method="POST">
  <label for="email">Your Email</label>
  <input name="Email" id="email" type="email">
  <button type="submit">Submit</button>
</form>

The action URL has two pieces

https://edge.geppetto.build/forms/submit/ + contact-us

The first is always the same. It tells the browser to POST submissions to Geppetto's worker. The second (after the last slash) is the name of your form in the dashboard. Lowercase, letters, digits, dash, and underscore only.

Adding a thank you page

The default behavior is a redirect back to the same page with ?form_submitted=1 in the URL. Users will see a toast-style banner thanking them for their submission. You can read form_submitted=1 with Alpine to swap the form for a thank-you message:

To send visitors to a dedicated thank-you page instead, add a hidden _gpto_redirect field pointing at a path on your own site (<input type="hidden" name="_gpto_redirect" value="/thanks">). After a successful submit the worker redirects there with ?form_submitted=1. The target must be on your own site; off-site redirects are ignored.

<!-- Swap the form for a thank-you message with Alpine -->
<div x-data="{ submitted: new URLSearchParams(window.location.search).has('form_submitted') }">
  <template x-if="!submitted">
    <form action="https://edge.geppetto.build/forms/submit/contact-us" method="POST">
      <!-- ...your form HTML... -->
    </form>
  </template>
  <template x-if="submitted">
    <div class="thank-you">
      <h2>Thanks, we'll get back to you shortly.</h2>
    </div>
  </template>
</div>

Forms outside Geppetto

If you want total control (your own spam defense, your own storage, a third-party form service) just point the action somewhere other than edge.geppetto.build. Geppetto leaves any form that doesn't post to our worker alone. Use Formkeep, Formspree, or your own backend.