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.
integraciones · framework
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
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.
<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
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.
<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
Una bandeja por proyecto, con endpoint y email inmediatos.
Pégalo en tus componentes y cambia ID. Lee el formulario al enviar; los atributos name determinan los campos recibidos.
Añade Discord, Slack, email o webhook y recibe avisos al llegar.
por qué mailcontact
Svelte con Vite genera archivos para cualquier alojamiento estático. Este método añade contacto sin cambiar el despliegue.
new FormData(event.currentTarget) evita enlaces por campo, valores y reinicios propios. required y type del navegador se aplican antes del controlador.
Los componentes Svelte se insertan en sitios ajenos. CORS abierto permite cualquier dominio donde termine el componente.
preguntas frecuentes
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.
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.
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.
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
Formularios y una dirección de email real, juntos, con avisos en tus herramientas. Empieza con una cuenta gratuita.
Crear formulario gratisSin tarjeta de crédito. Free incluye un proyecto y 50 mensajes de formulario al mes.