Comment ajouter une liste d'attente à un site Carrd

Sur Carrd Pro Plus, ajoutez un formulaire Custom qui envoie vers votre endpoint Ikiform avec la méthode AJAX, activez la collecte des UTM et définissez ces champs dans Ikiform. Sur Pro Standard, collez plutôt un petit formulaire HTML dans un élément Embed ; il envoie de façon classique, garde un honeypot et ramène les gens vers une section de remerciement sur la même page.

Carrd est le moyen le plus rapide de mettre en ligne une présentation d'une page, ce qui en fait un endroit naturel pour une liste d'attente. Le formulaire que vous pouvez utiliser dépend de votre offre Carrd plus que de tout ce que vous construisez : commencez donc par là.

Ce qui change sur Carrd

• L'offre décide du formulaire. Pro Plus a des formulaires Custom qui envoient vers n'importe quelle URL. Pro Standard a des formulaires de contact et d'inscription qui vont vers les destinations de Carrd, plus l'élément Embed. Pro Lite n'a ni formulaires ni embeds.
• Send to URL ne peut pas masquer de honeypot. Le champ Hidden de Carrd contient toujours la valeur que vous avez prédéfinie : il ne peut donc pas piéger les bots. Le score de spam s'applique toujours à chaque envoi.
• Les envois AJAX ne peuvent pas passer la vérification humaine. Carrd lit tout 2xx comme un succès et tout le reste comme un échec, et ne peut pas afficher la page de vérification d'Ikiform. Laissez la vérification anti-spam désactivée pour cette voie.
• Une seule page, c'est un seul endroit pour remercier. Il n'y a pas de seconde page vers laquelle rediriger, sauf si vous en créez une. Le message On Success de Carrd, ou une section de la même page, fait ce travail.

Si tout ce que vous voulez est l'adresse dans votre outil d'e-mailing, le formulaire d'inscription intégré de Carrd peut suffire. Ikiform se justifie quand vous voulez une copie stockée de chaque inscription, le filtrage du spam, un e-mail par inscription et des webhooks signés que vous pouvez acheminer n'importe où.

Pro Plus : un formulaire Custom

1. Cliquez sur Add Element › Form. Réglez Type sur Custom, puis Send to URL.
2. Réglez l'URL sur https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx, Method sur AJAX et Format sur Default. Ne choisissez pas XML : Ikiform le refuse avec 415.
3. Ajoutez un champ Email et réglez son Submitted ID sur email. Carrd génère les ID à partir des libellés : le laisser vide envoie email_address ou un nom similaire.
4. Cochez Collect UTM parameters. Carrd ajoute utm_source, utm_medium, utm_campaign, utm_term et utm_content quand ils sont dans le lien.
5. Réglez On Success sur un message comme You're on the list. We'll email you at launch. et On Failure sur une phrase générale. Carrd y affiche votre propre texte, sauf si vous activez Export variables et Return endpoint responses.

Ajoutez ensuite la définition des champs dans l'onglet Fields d'Ikiform, champs UTM compris :

{
  "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 } }
  ]
}

• Sans les cinq champs UTM, toute inscription arrivant d'un lien tagué est refusée avec une erreur Unknown field, et Carrd affiche On Failure. Ils ne sont envoyés que lorsque le lien les contient, ils sont donc facultatifs ici.
• N'ajoutez pas de champ File. Ikiform refuse les fichiers avec 422 files_not_supported.
• Les réglages Events de Carrd peuvent exécuter votre propre script en cas de succès, comme un appel d'analytics. Ils sont indépendants du message.

Pro Standard : un formulaire intégré

Cliquez sur Add Element › Embed, réglez Type sur Code et Style sur Inline, puis collez le formulaire. Les embeds ne s'affichent pas dans l'éditeur : publiez pour le voir.

<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>

• Ajoutez un Section Break nommé joined et placez une phrase de remerciement après. Carrd ouvre une section quand son nom figure dans le lien après # : _redirect y amène donc les gens.
• Remplacez https://example.com par votre adresse Carrd. _redirect ne fonctionne que pour une URL https: sur l'un des Allowed domains du formulaire : ajoutez-y donc aussi le domaine.
• target="_top" fait sortir l'envoi de tout cadre dans lequel Carrd enveloppe l'embed, pour que la redirection se charge dans la fenêtre.
• C'est un envoi classique : la vérification humaine fonctionne donc si vous l'activez. Aucune modification du HTML.

Domaines autorisés

N'ajoutez jamais carrd.co ou crd.co seuls ; tous les sites Carrd correspondraient. Le guide Carrd de la documentation propose la version formulaire de contact, et le guide principal explique les inscriptions répétées.

Vérifiez que tout fonctionne

1. Publiez le site. Les formulaires et les embeds ne fonctionnent que sur la page publiée.
2. Dans Allowed domains du formulaire, ajoutez le domaine de votre site, plus localhost pendant le développement. Laissez vide pour accepter les envois de partout.
3. Sur Pro Plus, ouvrez la page avec ?utm_source=test et inscrivez-vous. Carrd affiche On Success, et la soumission dans Ikiform a utm_source à test.
4. Sur Pro Standard, inscrivez-vous via l'embed. Vous arrivez sur la section #joined de votre page.
5. Vérifiez la boîte de réception de chaque destinataire des notifications. Chacun reçoit un e-mail avec les champs, et Reply répond à l'expéditeur quand le formulaire a un champ email.
6. Rien n'est arrivé ? Passez le filtre de statut du tableau de bord sur Spam. Le spam reçoit la même réponse de succès qu'une vraie soumission.

Pièges

Questions