Die formspree.json-Datei

In der Datei formspree.json kannst du Formulare für eine Website erstellen und konfigurieren. Du kannst zum Beispiel Opt-in-Formulare für eine Mailchimp-Liste oder Kontaktformulare erstellen, die dir beim Absenden eine E-Mail senden. Die Datei formspree.json wird von der Formspree CLI verwendet, wenn deine Formulare auf den Formspree-Servern bereitgestellt werden.

Formularkonfiguration

Formulare akzeptieren die folgenden Konfigurationsparameter:

Eigenschaft	Typ	Standard	Beschreibung
name	String		Der Name des Formulars (erforderlich)
actions	Array	[]	Ein Array von Aktionen, die nach der Übermittlung ausgeführt werden
fields	Object	{}	Optionale Metadaten zu Formularfeldern
captcha	Object	{}	Optionale Captcha-Einstellungen.

Das Captcha-Objekt sollte diesem Format folgen:

"captcha": {
    "type": "recaptcha",                  // Required
    "recaptchaSecret": "my-secret"        // Optional
}

Beispiel Hier ist eine beispielhafte formspree.json-Datei:

{
  "forms": {
    "contact": {
      "name": "Contact Form",
      "captcha": {
        "type": "recaptcha",
        "recaptchaSecret": "my-secret"
      },
      "fields": {
        "email": { "type": "email", "required": true },
        "message": { "type": "text", "required": true }
      },
      "actions": [
        { "type": "email", "to": "john@example.com" }
      ]
    }
  }
}

Aktionen nach dem Absenden

Formulare akzeptieren ein Array von Aktionen, die nach der Übermittlung ausgeführt werden. Wir haben einige integrierte Aktionen und eine wachsende Liste von Integrationen mit anderen Apps:

App	Typ	Beschreibung
	email	Sendet eine Benachrichtigungs-E-Mail. Mehr erfahren
	autoresponse	Sendet eine Antwort an den Absender. Mehr erfahren
	webhook	Sendet einen Webhook an eine angegebene URL. Mehr erfahren
mailchimp	addOrUpdateContact	Erstellt Abonnenten in Mailchimp. Mehr erfahren
mailerlite	addSubscriber	Fügt Abonnenten zu MailerLite hinzu. Mehr erfahren
convertkit	applyTags	Erstellt Abonnenten und wendet Tags in ConvertKit an. Mehr erfahren
hubspot	createContact	Erstellt Kontakte in Hubspot. Mehr erfahren
freshdesk	createSupportTicket	Erstellt Tickets in Freshdesk. Mehr erfahren
zendesk	createSupportTicket	Erstellt Tickets in Zendesk. Mehr erfahren
airtable	sendToTable	Fügt Zeilen in Airtable hinzu. Mehr erfahren
trello	createCard	Erstellt Karten in Trello. Mehr erfahren
discord	sendMessage	Sendet Nachrichten an Discord. Mehr erfahren
gorgias	createSupportTicket	Erstellt Tickets in Gorgias. Mehr erfahren

Hier ist ein Beispiel für eine formspree.json-Datei mit einer Mailchimp-Aktion:

{
  "forms": {
    "contact": {
      "name": "Contact Form",
      "actions": [
        {
          "app": "mailchimp",
          "type": "addOrUpdateContact",
          "audience": "8djs8fg8d",
          "apiKey": "$MAILCHIMP_APIKEY"
        }
      ]
    }
  }
}

Feldregeln

Du kannst optional konfigurieren, welche Felder zulässig sind, welchen Typ sie haben sollen und verschiedene Validierungsregeln für sie.

Hinweis: Standardmäßig akzeptiert Formspree alle Felder, die du von der Client-Seite übergibst. Das Definieren deiner Felder hier ermöglicht es dir jedoch, Validierungen hinzuzufügen (z. B. ein Feld als erforderlich zu markieren) und ihnen benutzerfreundliche Namen zu geben.

Feldobjekte können die folgenden Eigenschaften enthalten:

Key	Typ	Beschreibung
required	Boolean	Gibt an, ob das Feld erforderlich ist
type	String	Der Feldtyp. Einer von text, email, numeric, datetime-local, url oder file.
min	Number oder String	Gibt den Mindestwert an. Dies kann mit den Typen numeric, datetime-local oder file verwendet werden. Beachte, dass du den Feldtyp angeben solltest, andernfalls wird diese Regel nicht angewendet.
max	Number oder String	Gibt den Maximalwert an. Dies kann mit den Typen numeric, datetime-local oder file verwendet werden. Beachte, dass du den Feldtyp angeben solltest, andernfalls wird diese Regel nicht angewendet.
minlength	Number	Gibt den Mindestwert an. Dies kann mit den Typen text, url oder email verwendet werden. Beachte, dass du den Feldtyp angeben solltest, andernfalls wird diese Regel nicht angewendet.
maxlength	Number	Gibt den Maximalwert an. Dies kann mit den Typen text, url oder email verwendet werden. Beachte, dass du den Feldtyp angeben solltest, andernfalls wird diese Regel nicht angewendet.
accept	String-Liste	Gibt gültige Datei-Inhaltstypen an. Der Wert sollte eine String-Liste mit gültigen MIME-Typen sein. Beachte, dass du den type-Key als file festlegen solltest, andernfalls wird diese Regel nicht angewendet.

**Hinweise:
**Der Typ datetime-local akzeptiert ISO-Formate. Das Standardformat ist yyyy-mm-dd hh:mm:ss. Dieser Typ akzeptiert auch nur Datumsangaben, zum Beispiel yyyy-mm-dd. Weitere Informationen findest du hier.

Die Werte min und max für file-Typen sind die minimale und maximale Dateigröße in MiB.

Beispiel

{
  "forms": {
    "contact": {
      "name": "Contact Form",
      "fields": {
        "email": {
          "type": "email",
          "required": true
        },
        "birthdate": {
          "type": "datetime",
          "required": true,
          "min": "2002-09-21 13:13:00"        /* also accept dates */
        },
        "document": {
          "type": "file",
          "contentType": ["application/pdf"],  /* please use valid MIME Types */
          "min": 10                            /* MiB */
        }
      }
    }
  }
}