SvelteKit

Cette page n'a pas besoin de serveur : l'action du formulaire est votre endpoint Ikiform, donc elle fonctionne avec adapter-static et n'importe quel hébergeur statique. Sans JavaScript, elle envoie et redirige comme du HTML classique ; avec JavaScript, elle envoie avec fetch et affiche le résultat sur place. Pour envoyer plutôt via une form action avec une clé secrète, voir Svelte.

Pourquoi pas use:enhance

Le use:enhance de SvelteKit ne fonctionne qu'avec des formulaires method="POST" qui pointent vers des actions définies dans un fichier +page.server.js. Ikiform est une URL externe, donc la page utilise à la place un petit handler onsubmit. L'amélioration progressive est la même : le formulaire fonctionne d'abord, le script l'améliore ensuite.

Mise en place

1. Ajoutez des variables d'environnement publiques

   PUBLIC_IKIFORM_FORM_ID=frm_xxxxxxxxxxxxxxxx
   PUBLIC_SITE_URL=https://example.com

   PUBLIC_SITE_URL sert à la redirection sans JavaScript. Pendant le prérendu, page.url.origin vaut http://sveltekit-prerender et non votre domaine, donc la redirection ne peut pas être construite à partir de lui.

2. Prérendez la page

   export const prerender = true;

3. Ajoutez le formulaire

   <script>
     import { PUBLIC_IKIFORM_FORM_ID, PUBLIC_SITE_URL } from "$env/static/public";
   
     const endpoint = `https://ikiform.com/f/${PUBLIC_IKIFORM_FORM_ID}`;
   
     let status = $state("idle");
     let errors = $state({});
     let message = $state("");
   
     async function onsubmit(event) {
       event.preventDefault();
       status = "sending";
       try {
         const response = await fetch(endpoint, {
           method: "POST",
           headers: { Accept: "application/json" },
           body: new FormData(event.currentTarget),
         });
         const result = await response.json();
         if (result.ok) {
           status = "sent";
           return;
         }
         errors = result.error.fields ?? {};
         message = result.error.message;
       } catch {
         message = "Couldn't reach the server. Try again.";
       }
       status = "error";
     }
   </script>
   
   {#if status === "sent"}
     <p>Thanks, we got it.</p>
   {:else}
     <form action={endpoint} method="POST" {onsubmit}>
       <label>
         Email
         <input name="email" type="email" autocomplete="email" required aria-invalid={errors.email ? "true" : undefined} />
       </label>
       {#if errors.email}<p>{errors.email[0]}</p>{/if}
       <label>
         Message
         <textarea name="message" rows="5"></textarea>
       </label>
       <input type="hidden" name="_redirect" value={`${PUBLIC_SITE_URL}/contact/thanks`} />
       <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
       {#if status === "error" && !errors.email}<p role="alert">{message}</p>{/if}
       <button disabled={status === "sending"}>{status === "sending" ? "Sending" : "Send"}</button>
     </form>
   {/if}

   Ajoutez un src/routes/contact/thanks/+page.svelte comme cible de redirection.

Si vous utilisez la CSP de SvelteKit

Avec kit.csp configuré, autorisez Ikiform à la fois pour l'envoi fetch et pour l'envoi de formulaire classique. Sinon, le navigateur bloque l'un ou l'autre.

const config = {
  kit: {
    csp: {
      directives: {
        "connect-src": ["self", "https://ikiform.com"],
        "form-action": ["self", "https://ikiform.com"],
      },
    },
  },
};

export default config;

Domaines autorisés

Listez la production ainsi que vos hôtes de prévisualisation.

• N'ajoutez jamais vercel.app, pages.dev ou netlify.app seul. Tous les sites de cet hébergeur correspondraient, y compris ceux des autres.

Checklist de test

1. Lancez le serveur de développement avec localhost dans les domaines autorisés et envoyez. Le message de remerciement doit remplacer le formulaire.
2. Lancez vite build et vérifiez que le résultat contient contact.html avec le formulaire déjà présent.
3. Désactivez JavaScript, rechargez et envoyez. Sur votre domaine https:, vous devez arriver sur /contact/thanks.
4. Envoyez depuis un déploiement de prévisualisation et vérifiez que l'envoi n'est pas marqué comme spam.

Dépannage

Voir aussi

• SvelteUn composant Svelte 5 et une server action.
• AstroUn formulaire sans JavaScript, amélioré si vous le souhaitez.
• Domaines autorisésComment les origines sont comparées, et ce qui se passe en cas de non-correspondance.
• ErreursChaque code d'erreur, avec sa cause et sa solution.