Carrd-Formulare: Einsendungen an ein Formular-Backend senden

Die Formulare von Carrd brauchen einen Pro-Tarif: Pro Standard bekommt Kontakt- und Anmeldeformulare, und Pro Plus ergänzt eigene Formulare, die an jede URL senden können. Setze in Pro Plus ein eigenes Formular auf Send to URL mit deinem Ikiform-Endpunkt, und Carrd behält seine eigene Erfolgsmeldung. In Pro Standard fügst du ein HTML-Formular in ein Embed-Element ein, was dir eigene Felder ohne Upgrade gibt.

Was auf Carrd anders ist

Carrd begrenzt keine Einsendungen. Es schaltet Formularfunktionen nach Tarif frei, und jeder Tarif ist ein Jahrespreis für eine feste Anzahl Sites. Stand Oktober 2026 ziehen die Preise und die Doku von Carrd die Grenzen so:

Ein Carrd-Kontaktformular liefert jede Nachricht per E-Mail von @mail.carrd.site, also ist dein Posteingang das Archiv, und eine als Junk abgelegte Nachricht übersieht man leicht. Das ist der übliche Grund für den Wechsel: Du willst eine gespeicherte, durchsuchbare Liste, einen Export und Benachrichtigungen für das ganze Team, nicht ein einzelnes Postfach.

Brauchst du nur neue Abonnenten in Mailchimp, Kit oder einem anderen E-Mail-Tool, erledigt das Carrds Signup-Formular in Pro Standard bereits und ist die bessere Wahl. Ikiform hat keine Ein-Klick-Integrationen für E-Mail-Tools.

Pro Plus: Senden mit Send to URL

So behältst du den Formulareditor und das Styling von Carrd, ganz ohne Code. Die Felder unten sind für eine Buchungsanfrage bei einem Fotografen; nutze deine eigenen.

1. Klicke auf Add Element > Form, setze Type auf Custom und dann auf Send to URL.
2. Füge deinen Endpunkt als URL ein.
3. Setze Method auf AJAX und Format auf Default. Carrd wertet jede 2xx-Antwort als Erfolg, und Ikiform antwortet mit 201, wenn es den Post speichert.
4. Füge die Felder hinzu: Text name, Email email, Select service, Date preferred_date, Text Area details. Setze die ID jedes Feldes; sonst erzeugt Carrd eine aus dem Label.
5. Wähle unter On Success eine Meldung oder einen Abschnitt, der angezeigt wird. Halte den Text unter On Failure allgemein. Carrd zeigt die Fehlermeldung von Ikiform nicht an.
6. Veröffentliche. Formulare senden nur von der veröffentlichten Site.

https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx

Ein Hidden-Feld sendet immer seinen voreingestellten Wert, kann hier also nicht als Honeypot dienen. Ikiforms Spam-Score, Rate-Limits und erlaubte Domains laufen trotzdem bei jedem Post. Lass Ikiforms Spam check für dieses Formular aus: Ein AJAX-Post kann die Prüfung nicht zeigen und würde mit 403 challenge_required scheitern.

Pro Standard: ein Embed-Element

In Pro Standard kannst du in Carrd kein eigenes Formular bauen, aber eines einfügen. Klicke auf Add Element > Embed, setze Type auf Code und Style auf Inline und füge dies ein. Es bringt eigene Styles mit, weil die Formular-Styles von Carrd eingebetteten Code nicht erreichen.

<form id="booking" action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post" target="_top">
  <input name="name" placeholder="Name" autocomplete="name" required>
  <input name="email" type="email" placeholder="Email" autocomplete="email" required>
  <select name="service" required>
    <option value="" disabled selected>What do you need?</option>
    <option value="portrait">Portrait session</option>
    <option value="event">Event coverage</option>
    <option value="product">Product photos</option>
  </select>
  <input name="preferred_date" type="date" aria-label="Preferred date">
  <textarea name="details" rows="4" placeholder="Anything else?" maxlength="2000"></textarea>
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>
  <button type="submit">Request a booking</button>
  <p id="booking-note" role="status"></p>
</form>
<style>
  #booking { display: grid; gap: 0.75rem; font: inherit; }
  #booking input, #booking select, #booking textarea { font: inherit; padding: 0.75rem; border: 1px solid #ccc; border-radius: 0.5rem; }
  #booking button { font: inherit; padding: 0.75rem; border: 0; border-radius: 0.5rem; background: #111; color: #fff; }
</style>
<script>
  const booking = document.getElementById("booking");
  booking.addEventListener("submit", async (event) => {
    event.preventDefault();
    const note = document.getElementById("booking-note");
    note.textContent = "Sending";
    try {
      const response = await fetch(booking.action, {
        method: "POST",
        headers: { Accept: "application/json" },
        body: new FormData(booking),
      });
      const result = await response.json();
      if (result.ok) {
        booking.replaceChildren("Thanks. I'll reply with availability.");
        return;
      }
      const fields = result.error.fields ?? {};
      note.textContent = fields.preferred_date?.[0] ?? fields.email?.[0] ?? result.error.message;
    } catch {
      note.textContent = "Couldn't send. Try again, or email me directly.";
    }
  });
</script>

• Das Skript sendet mit fetch und ersetzt das Formular durch die Dankeszeile, sodass die Seite gleich bleibt.
• Der versteckte _gotcha-Input ist hier ein echter Honeypot, anders als ein Hidden-Feld in Carrd.
• Lädt das Skript nicht, sendet das Formular trotzdem ganz normal. target="_top" verhindert, dass sich das Ergebnis in einem Frame öffnet.
• Embeds laufen nicht im Editor von Carrd. Veröffentliche, um das Formular zu sehen.

Beide Versionen senden dieselben Felder. Definiere sie in Ikiform, sobald ein Test angekommen ist:

Allowed domains bei Carrd

Füge your-site.carrd.co, oder your-site.crd.co bei Pro, und deine eigene Domain hinzu. Füge nicht carrd.co allein hinzu; dann dürfte jede Carrd-Site senden. Die Carrd-Anleitung der Doku listet jede Einstellung mit ihrem Grund auf.

Prüfen, dass es auf Carrd funktioniert

1. Füge unter Allowed domains des Formulars die Domain deiner Site hinzu, plus localhost, während du entwickelst. Lass das Feld leer, um Posts von überall anzunehmen.
2. Veröffentliche und sende das Formular dann auf der veröffentlichten Site ab.
3. Prüfe, dass Carrd On Success zeigt oder das Embed seine Dankeszeile.
4. Öffne Submissions im Dashboard. Die neue Einsendung ist da, mit jedem Feld, das du gesendet hast.
5. Prüfe, dass die Namen deine IDs sind, preferred_date etwa 2026-11-14 lautet und keine utm_-Felder ankamen, sofern du sie nicht erwartet hast.
6. Prüfe das Postfach jedes Benachrichtigungsempfängers. Jeder bekommt eine E-Mail mit den Feldern, und Reply geht an den Absender, wenn das Formular ein email-Feld hat.

Stolperfallen

Fragen