integraciones · framework

Un formulario de SvelteKit compatible con adapter-static.

SvelteKit ofrece actions en +page.server.js, use:enhance y funcionamiento sin JavaScript. Pero necesitan servidor: al pasar a adapter-static para GitHub Pages o CDN desaparecen porque nadie recibe POST.

Mantén un servidor para tres campos o envía fuera. mailcontact recibe en tu bandeja y conserva la compilación estática. Funciona igual con adapter-static, adapter-node o adapter-vercel.

configuración recomendada

Utiliza el script de MailContact con tu diseño.

Añade este HTML a tu sitio o utiliza el generador de formularios. Sustituye el enlace por el de tu formulario. El script alojado inserta la comprobación oculta, gestiona el envío y la verificación automática y conserva el borrador si hay errores. Tú controlas el HTML y el CSS. Los formularios Free muestran un enlace visible «Processed by mailcontact.app»; Pro y Plus no. Los avisos siguen el idioma del navegador; configura data-mailcontact-language="fr" en el formulario para forzar el francés.

contact.html
<form action="https://mailcontact.app/api/forms/your-form-id" method="POST" data-mailcontact-form lang="es" data-mailcontact-language="es">
  <input type="hidden" name="_language" value="es" />
  <fieldset>
    <legend>Contáctanos</legend>
    <label>
      Nombre (opcional)
      <input name="name" type="text" autocomplete="name" maxlength="200" />
    </label>
    <label>
      Correo electrónico
      <input name="email" type="email" autocomplete="email" maxlength="320" required />
    </label>
    <label>
      Mensaje
      <textarea name="message" rows="5" maxlength="5000" required></textarea>
    </label>
    <noscript>
    <div aria-hidden="true" style="position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;">
      <label>Sitio web
        <input name="company_website" type="text" tabindex="-1" autocomplete="off" />
      </label>
    </div>
    </noscript>
    <button type="submit">Enviar mensaje</button>
  </fieldset>
  <p data-contact-status role="status" aria-live="polite" aria-atomic="true"></p>
</form>
<script defer src="https://mailcontact.app/forms/v1.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Para un componente con su propio controlador de envío, carga el mismo script y utiliza MailContact.prepare(form) y MailContact.send() en lugar del marcador automático. Consulta la referencia de interfaces personalizadas para carga, avisos y atribución de Free.

el código

Alternativa: una integración directa para SvelteKit.

Este ejemplo envía directamente a la API. Mantén el campo obligatorio company_website presente y vacío. Los envíos nativos abren JSON si tienen éxito o una página de verificación si hace falta. Los scripts sin verificación envían los mensajes sospechosos a Spam; el spam claro también se retiene sin alertas ni consumo de cuota. Una respuesta de éxito confirma recepción, incluida revisión, o el descarte silencioso de una trampa rellenada. Consulta protección contra spam para conocer todo el funcionamiento.

src/routes/contact/+page.svelte
<script>
  // No +page.server.js. No actions. No adapter requirement.
  let sent = $state(false);

  async function submit(event) {
    await fetch("https://mailcontact.app/api/forms/your-form-id", {
      method: "POST",
      body: new FormData(event.currentTarget),
    });
    sent = true;
  }
</script>

{#if sent}
  <p>Thanks. We'll be in touch.</p>
{:else}
  <form onsubmit={(e) => { e.preventDefault(); submit(e); }}>
    <input name="name" placeholder="Your name" required />
    <input name="email" type="email" placeholder="[email protected]" required />
    <textarea name="message" placeholder="What's on your mind?" required></textarea>
    <input name="company_website" type="text" tabindex="-1" autocomplete="off"
      style="position:absolute;left:-10000px" aria-hidden="true" />

    <button>Send</button>
  </form>
{/if}

cómo funciona

Tres pasos de principio a fin.

01

Crear una bandeja

Una bandeja por proyecto con endpoint y email antes de tocar las rutas.

02

Añade la ruta

Pega en src/routes/contact/+page.svelte. No necesita +page.server.js ni impone adaptador de servidor.

03

Recibe avisos

Conecta Discord, Slack, email o webhook para avisos.

por qué mailcontact

Pensado para funcionar con SvelteKit.

Elige libremente tu adaptador

Una action impide adapter-static para todo el proyecto. Mantén el contacto fuera del servidor para prerenderizar y publicar archivos.

Sin servidor para tres campos

adapter-node exige ejecutar, actualizar y pagar un proceso. Mucha infraestructura para unos pocos formularios al mes.

Una bandeja por proyecto personal

Cada nueva idea de SvelteKit merece bandeja y dirección propias, sin mezclar el correo personal.

preguntas frecuentes

SvelteKit + mailcontact: tus preguntas resueltas

¿Por qué no usar una form action de SvelteKit?

Sí, manteniendo servidor. Las actions necesitan adapter-node, adapter-vercel u otro entorno. adapter-static no las despliega y no hay destino POST. Un formulario no justifica renunciar a un sitio estático.

¿Funciona con use:enhance?

use:enhance mejora una action de SvelteKit y espera una respuesta interna; no se aplica aquí. El controlador intercepta el envío, publica FormData y muestra el éxito con un número similar de líneas.

¿Puede seguir funcionando sin JavaScript?

Sí. Sin script, usa action al endpoint y method="POST". El navegador envía sin código. Actualmente muestra JSON y no hay redirección configurable.

¿Funciona en Svelte 4 o solo con runas?

Ambos. El ejemplo utiliza $state y onsubmit de Svelte 5, pero no depende de las runas. En Svelte 4 utiliza let sent = false y on:submit|preventDefault; la llamada fetch es idéntica.

relacionado

También funciona con

Una bandeja por cada proyecto de SvelteKit que publiques.

Formularios y una dirección de email real, juntos, con avisos en tus herramientas. Empieza con una cuenta gratuita.

Crear formulario gratis

Sin tarjeta de crédito. Free incluye un proyecto y 50 mensajes de formulario al mes.