So fügst du einer Carrd-Site eine Warteliste hinzu

Füge auf Carrd Pro Plus ein Custom-Formular hinzu, das mit der Methode AJAX an deinen Ikiform-Endpunkt sendet, aktiviere die UTM-Erfassung und definiere diese Felder in Ikiform. Auf Pro Standard fügst du stattdessen ein kleines HTML-Formular in ein Embed-Element ein; es sendet auf die einfache Art, behält einen Honeypot und schickt die Leute zurück zu einem Dankesabschnitt auf derselben Seite.

Carrd ist der schnellste Weg, einen einseitigen Pitch online zu stellen, was es zu einem natürlichen Zuhause für eine Warteliste macht. Welches Formular du nutzen kannst, hängt mehr von deinem Carrd-Tarif ab als von allem, was du baust, fang also dort an.

Was auf Carrd anders ist

• Der Tarif entscheidet über das Formular. Pro Plus hat Custom-Formulare, die an jede URL senden. Pro Standard hat Kontakt- und Anmeldeformulare, die an Carrds eigene Ziele gehen, plus das Embed-Element. Pro Lite hat weder Formulare noch Embeds.
• Send to URL kann keinen Honeypot verstecken. Carrds Hidden-Feld enthält immer den voreingestellten Wert, kann also keine Bots fangen. Die Spam-Bewertung läuft trotzdem bei jedem Post.
• AJAX-Posts können die Menschlichkeitsprüfung nicht ausführen. Carrd wertet jedes 2xx als Erfolg und alles andere als Fehler und kann Ikiforms Prüfseite nicht anzeigen. Lass die Spamprüfung für diesen Weg aus.
• Eine Seite heißt ein Ort zum Danke-Sagen. Es gibt keine zweite Seite für eine Weiterleitung, außer du baust eine. Carrds On-Success-Meldung oder ein Abschnitt auf derselben Seite übernimmt das.

Wenn du nur die Adresse in deinem E-Mail-Tool willst, reicht Carrds eingebautes Anmeldeformular vielleicht aus. Ikiform lohnt sich, wenn du eine gespeicherte Kopie jeder Anmeldung, Spamfilter, eine E-Mail pro Anmeldung und signierte Webhooks willst, die du überallhin leiten kannst.

Pro Plus: ein Custom-Formular

1. Klick auf Add Element › Form. Setze Type auf Custom, dann Send to URL.
2. Setze die URL auf https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx, Method auf AJAX und Format auf Default. Wähle nicht XML: Ikiform lehnt es mit 415 ab.
3. Füge ein Email-Feld hinzu und setze seine Submitted ID auf email. Carrd erzeugt IDs aus Beschriftungen, leer gelassen sendet es also email_address oder Ähnliches.
4. Hake Collect UTM parameters an. Carrd fügt utm_source, utm_medium, utm_campaign, utm_term und utm_content hinzu, wenn sie im Link stehen.
5. Setze On Success auf eine Meldung wie You're on the list. We'll email you at launch. und On Failure auf eine allgemeine Zeile. Carrd zeigt dort deinen eigenen Text, außer du aktivierst Export variables und Return endpoint responses.

Füge dann die Felddefinition im Ikiform-Tab Fields hinzu, einschließlich der UTM-Felder:

{
  "version": 1,
  "title": "Waitlist",
  "fields": [
    { "id": "email", "type": "email", "label": "Email", "required": true },
    { "id": "utm_source", "type": "text", "label": "UTM source", "validation": { "max_length": 100 } },
    { "id": "utm_medium", "type": "text", "label": "UTM medium", "validation": { "max_length": 100 } },
    { "id": "utm_campaign", "type": "text", "label": "UTM campaign", "validation": { "max_length": 100 } },
    { "id": "utm_term", "type": "text", "label": "UTM term", "validation": { "max_length": 100 } },
    { "id": "utm_content", "type": "text", "label": "UTM content", "validation": { "max_length": 100 } }
  ]
}

• Ohne die fünf UTM-Felder wird jede Anmeldung, die über einen getaggten Link kommt, mit einem Unknown-field-Fehler abgelehnt, und Carrd zeigt On Failure. Sie werden nur gesendet, wenn der Link sie enthält, sind hier also optional.
• Füge kein File-Feld hinzu. Ikiform lehnt Dateien mit 422 files_not_supported ab.
• Carrds Events-Einstellungen können bei Erfolg dein eigenes Skript ausführen, etwa einen Analytics-Aufruf. Sie sind von der Meldung getrennt.

Pro Standard: ein eingebettetes Formular

Klick auf Add Element › Embed, setze Type auf Code und Style auf Inline und füge das Formular ein. Embeds werden im Builder nicht gerendert, veröffentliche also, um es zu sehen.

<form class="iki-waitlist" action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post" target="_top">
  <input name="email" type="email" placeholder="you@company.com" aria-label="Email" autocomplete="email" required>
  <input type="hidden" name="_redirect" value="https://example.com/#joined">
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>
  <button type="submit">Join the waitlist</button>
</form>

<style>
  .iki-waitlist { display: flex; flex-wrap: wrap; gap: 8px; max-width: 440px; margin: 0 auto; }
  .iki-waitlist input[type="email"] { flex: 1 1 220px; font: inherit; padding: 12px 14px; border: 1px solid #d4d4d4; border-radius: 8px; }
  .iki-waitlist button { font: inherit; padding: 12px 18px; border: 0; border-radius: 8px; background: #111; color: #fff; cursor: pointer; }
</style>

• Füge einen Section Break namens joined hinzu und setze eine Dankeszeile dahinter. Carrd öffnet einen Abschnitt, wenn sein Name im Link hinter # steht, _redirect bringt die Leute also dorthin.
• Ersetze https://example.com durch deine Carrd-Adresse. _redirect funktioniert nur für eine https:-URL auf einer der Allowed domains des Formulars, füge die Domain also auch dort hinzu.
• target="_top" lässt den Post jeden Frame verlassen, in den Carrd das Embed packt, damit die Weiterleitung im Fenster lädt.
• Das ist ein einfacher Post, die Menschlichkeitsprüfung funktioniert also, wenn du sie aktivierst. Keine Änderung am HTML.

Erlaubte Domains

Füge nie carrd.co oder crd.co allein hinzu; jede Carrd-Site würde passen. Die Carrd-Anleitung in der Doku hat die Kontaktformular-Version, und die Hauptanleitung erklärt wiederholte Anmeldungen.

Prüfen, ob es funktioniert

1. Veröffentliche die Site. Formulare und Embeds funktionieren nur auf der veröffentlichten Seite.
2. 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.
3. Öffne auf Pro Plus die Seite mit ?utm_source=test und melde dich an. Carrd zeigt On Success, und die Einsendung in Ikiform hat utm_source auf test.
4. Melde dich auf Pro Standard über das Embed an. Du landest im Abschnitt #joined deiner Seite.
5. 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.
6. Nichts angekommen? Stell den Statusfilter im Dashboard auf Spam. Spam bekommt dieselbe Erfolgsantwort wie eine echte Einsendung.

Stolperfallen

Fragen