SvelteKit

Esta página no necesita servidor: el action del formulario es tu endpoint de Ikiform, así que funciona con adapter-static y en cualquier hosting estático. Sin JavaScript, envía y redirige como HTML normal; con JavaScript, envía con fetch y muestra el resultado en su sitio. Para enviar mediante una form action con una clave secreta, consulta Svelte.

Por qué no usar use:enhance

El use:enhance de SvelteKit solo funciona con formularios method="POST" que apuntan a actions definidas en un archivo +page.server.js. Ikiform es una URL externa, así que la página usa un pequeño handler onsubmit. La mejora progresiva es la misma: primero funciona el formulario y el script lo mejora.

Configúralo

1. Añade variables de entorno públicas

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

   PUBLIC_SITE_URL es para la redirección sin JavaScript. Durante el prerenderizado, page.url.origin es http://sveltekit-prerender, no tu dominio, así que la redirección no se puede construir a partir de él.

2. Prerenderiza la página

   export const prerender = true;

3. Añade el formulario

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

   Añade un src/routes/contact/thanks/+page.svelte como destino de la redirección.

Si usas la CSP de SvelteKit

Con kit.csp configurado, permite Ikiform tanto para el envío con fetch como para el envío normal del formulario. Si no, el navegador bloquea uno de los dos.

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

export default config;

Dominios permitidos

Incluye producción y tus hosts de vista previa.

• Nunca añadas vercel.app, pages.dev ni netlify.app solos. Coincidiría cualquier sitio de ese host, incluidos los de otras personas.

Lista de pruebas

1. Ejecuta el servidor de desarrollo con localhost en los dominios permitidos y envía. El mensaje de agradecimiento debería sustituir al formulario.
2. Ejecuta vite build y comprueba que el resultado contiene contact.html con el formulario ya dentro.
3. Desactiva JavaScript, recarga y envía. En tu dominio https: deberías llegar a /contact/thanks.
4. Envía desde un despliegue de vista previa y confirma que no se marca como spam.

Solución de problemas

Relacionado

• SvelteUn componente de Svelte 5 y una server action.
• AstroUn formulario sin JavaScript, opcionalmente mejorado.
• Dominios permitidosCómo se comparan los orígenes y qué pasa cuando no coinciden.
• ErroresCada código de error, con su causa y su solución.