integraciones · framework

Un formulario para Svelte sin servidor.

Svelte sin SvelteKit genera JavaScript de navegador, sin servidor. Ideal para widgets, páginas e islas, pero sin receptor para el formulario.

En vez de mantener un servidor para tres campos, envía a mailcontact. Conservas el despliegue estático y recibes en tu bandeja con Discord, Slack, email o webhook.

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

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/lib/ContactForm.svelte
<script>
  let sent = $state(false);
  let error = $state(false);

  async function submit(event) {
    const res = await fetch("https://mailcontact.app/api/forms/your-form-id", {
      method: "POST",
      body: new FormData(event.currentTarget),
    });
    if (res.ok) sent = true;
    else error = 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>
    {#if error}<p role="alert">That didn't send. Try again?</p>{/if}
  </form>
{/if}

cómo funciona

Tres pasos de principio a fin.

01

Crear una bandeja

Una bandeja por proyecto, con endpoint y email inmediatos.

02

Añade el componente

Pégalo en tus componentes y cambia ID. Lee el formulario al enviar; los atributos name determinan los campos recibidos.

03

Recibe avisos

Añade Discord, Slack, email o webhook y recibe avisos al llegar.

por qué mailcontact

Pensado para funcionar con Svelte.

El paquete sigue siendo estático

Svelte con Vite genera archivos para cualquier alojamiento estático. Este método añade contacto sin cambiar el despliegue.

Sin declarar estado

new FormData(event.currentTarget) evita enlaces por campo, valores y reinicios propios. required y type del navegador se aplican antes del controlador.

Se integra donde quieras

Los componentes Svelte se insertan en sitios ajenos. CORS abierto permite cualquier dominio donde termine el componente.

preguntas frecuentes

Svelte + mailcontact: tus preguntas resueltas

¿En qué se diferencia de SvelteKit?

Las form actions de SvelteKit son controladores de servidor: depende de mantener un adaptador compatible. Svelte no tiene servidor, así que necesita un destino externo. Si usas SvelteKit, consulta su guía.

¿Funciona con Svelte 4?

Sí. Usa runas ($state) y onsubmit de Svelte 5. En Svelte 4 usa let sent = false y on:submit|preventDefault={submit}. fetch y FormData no cambian.

¿El ID de mi endpoint es secreto?

No, no se trata como secreto. Está en el código público por diseño, como una URL de Google Forms. Solo acepta envíos a una bandeja y no permite leer nada. La recepción se protege con límites, controles y detección de campañas. La trampa detecta bots básicos; los mensajes sospechosos pueden exigir verificación o pasar a Spam.

¿Puedo enviarlo a Discord en vez de por email?

Sí, pero no publiques un webhook en Svelte: llega al navegador y cualquiera puede escribir en el canal. Añade Discord en las notificaciones de la bandeja; el enlace permanece en el servidor.

relacionado

También funciona con

Una bandeja por cada proyecto de Svelte 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.