Formulare im Theme

Das form-Tag

{% form section.settings.form_handle | default: 'contact' %}
  <div class="field">
    <label for="name-{{ section.id }}">Name</label>
    <input type="text" id="name-{{ section.id }}" name="name" required>
  </div>
  <div class="field">
    <label for="email-{{ section.id }}">E-Mail</label>
    <input type="email" id="email-{{ section.id }}" name="email" required>
  </div>
  <div class="field">
    <label for="message-{{ section.id }}">Nachricht</label>
    <textarea id="message-{{ section.id }}" name="message" rows="5"></textarea>
  </div>
  <button type="submit">Absenden</button>
{% endform %}

{% schema %}
{
  "name": "Kontaktformular",
  "enabled_on": { "groups": ["body"] },
  "settings": [
    { "type": "form", "id": "form_handle", "label": "Formular", "default": "contact" }
  ],
  "presets": [ { "name": "Kontaktformular" } ]
}
{% endschema %}

Das Tag rendert:

<form action="/api/submit" method="POST" data-form-type="contact">
  <input type="hidden" name="form_id" value="contact">
  <input type="text" name="_hp" … aria-hidden="true">   <!-- Honeypot -->
  …deine Felder…
</form>

• Das Honeypot-Feld _hp wird automatisch eingefügt – nicht selbst anlegen.

• Die name-Attribute der Felder sind die Feldschlüssel, die im Dashboard, in „Erlaubte Felder“ und in der Datensatz-Bindung erscheinen.

• Nutze section.id für id-Attribute, da eine Section mehrfach auf einer Seite stehen kann.

Absenden per JavaScript

Für Erfolgsmeldungen ohne Seitenwechsel sendest du das Formular per fetch als JSON:

form.addEventListener('submit', async (event) => {
  event.preventDefault()
  const data = Object.fromEntries(new FormData(form))
  const { form_id, _hp, ...fields } = data
  const res = await fetch('/api/submit', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ form_id, fields, _hp, _time: Date.now() - startedAt })
  })
  if (res.ok) showSuccess()
  else showError(res.status)
})

Die Antwortcodes beschreibt der Artikel „Formular-Endpunkt /api/submit“ in der Kategorie API & Integrationen.