Formulaires Carrd : envoyer les soumissions vers un backend de formulaires

Les formulaires de Carrd nécessitent une offre Pro : Pro Standard propose des formulaires de contact et d'inscription, et Pro Plus ajoute des formulaires personnalisés qui peuvent envoyer vers n'importe quelle URL. Sur Pro Plus, réglez un formulaire personnalisé sur Send to URL avec votre endpoint Ikiform et Carrd garde son propre message de succès. Sur Pro Standard, collez un formulaire HTML dans un élément Embed, ce qui vous donne des champs personnalisés sans changer d'offre.

Ce qui change sur Carrd

Carrd ne plafonne pas les soumissions. Il réserve des fonctionnalités de formulaire selon l'offre, et chaque offre est un prix annuel pour un nombre donné de sites. En octobre 2026, la tarification et la documentation de Carrd placent les limites ainsi :

Un formulaire de contact Carrd livre chaque message par e-mail depuis @mail.carrd.site, donc votre boîte de réception fait office d'historique et un message classé en indésirable passe facilement inaperçu. C'est la raison habituelle de migrer : vous voulez une liste stockée et consultable, un export et des alertes pour toute l'équipe, pas une seule boîte mail.

Si vous avez seulement besoin d'ajouter de nouveaux abonnés dans Mailchimp, Kit ou un autre outil d'e-mailing, le formulaire Signup de Carrd le fait déjà sur Pro Standard et c'est le meilleur choix. Ikiform n'a pas d'intégrations en un clic avec les outils d'e-mailing.

Pro Plus : Send to URL

Cette méthode garde l'éditeur de formulaires et le style de Carrd, sans code. Les champs ci-dessous correspondent à une demande de réservation chez un photographe ; utilisez les vôtres.

1. Cliquez sur Add Element > Form, réglez Type sur Custom, puis Send to URL.
2. Collez votre endpoint comme URL.
3. Réglez Method sur AJAX et Format sur Default. Carrd interprète toute réponse 2xx comme un succès, et Ikiform répond 201 quand il stocke l'envoi.
4. Ajoutez les champs : Text name, Email email, Select service, Date preferred_date, Text Area details. Définissez l'ID de chaque champ ; sinon Carrd en génère un à partir du libellé.
5. Sous On Success, choisissez un message ou une section à afficher. Sous On Failure, gardez un texte général. Carrd n'affiche pas le message d'erreur d'Ikiform.
6. Publiez. Les formulaires n'envoient que depuis le site publié.

https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx

Un champ Hidden envoie toujours sa valeur prédéfinie, donc il ne peut pas servir de honeypot ici. Le score de spam, les limites de débit et les domaines autorisés d'Ikiform s'appliquent quand même à chaque envoi. Laissez le Spam check d'Ikiform désactivé pour ce formulaire : un envoi AJAX ne peut pas afficher la vérification, et échouerait avec 403 challenge_required.

Pro Standard : un élément Embed

Sur Pro Standard, vous ne pouvez pas construire de formulaire personnalisé dans Carrd, mais vous pouvez en coller un. Cliquez sur Add Element > Embed, réglez Type sur Code et Style sur Inline, et collez ceci. Il embarque ses propres styles, car les styles de formulaire de Carrd n'atteignent pas le code intégré.

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

• Le script envoie avec fetch et remplace le formulaire par la ligne de remerciement, donc la page ne change pas.
• L'input masqué _gotcha est ici un vrai honeypot, contrairement à un champ Hidden de Carrd.
• Si le script ne se charge pas, le formulaire envoie quand même normalement. target="_top" empêche le résultat de s'ouvrir dans un cadre.
• Les intégrations ne s'exécutent pas dans l'éditeur de Carrd. Publiez pour voir le formulaire.

Les deux versions envoient les mêmes champs. Définissez-les dans Ikiform une fois qu'un test est arrivé :

Domaines autorisés sur Carrd

Ajoutez your-site.carrd.co, ou your-site.crd.co sur Pro, et votre domaine personnalisé. N'ajoutez pas carrd.co seul ; tous les sites Carrd seraient autorisés à envoyer. Le guide Carrd de la documentation liste chaque paramètre avec sa raison.

Vérifier que tout fonctionne sur Carrd

1. 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.
2. Publiez, puis envoyez le formulaire sur le site publié.
3. Vérifiez que Carrd affiche On Success, ou que l'intégration affiche sa ligne de remerciement.
4. Ouvrez Submissions dans le tableau de bord. La nouvelle soumission y est, avec tous les champs envoyés.
5. Vérifiez que les noms sont vos ID, que preferred_date ressemble à 2026-11-14, et qu'aucun champ utm_ n'est arrivé sauf si vous l'attendiez.
6. 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.

Pièges

Questions