integraciones · site builder

Un formulario para Framer con un Embed.

Inserta HTML en un Embed, dirígelo a mailcontact y recibe en tu bandeja con Discord, Slack o email.

Los formularios nativos de Framer son de pago actualmente. Embed utiliza tu código y endpoint externo, sin sus funciones nativas.

Cada bandeja también tiene email real ([email protected]), útil antes de configurar el dominio.

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

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.

Insert → Embed → HTML
<form action="https://mailcontact.app/api/forms/your-form-id" method="POST">
  <input type="text" name="name" placeholder="Your name" />
  <input type="email" name="email" placeholder="[email protected]" required />
  <textarea name="message" placeholder="What can we help with?" required></textarea>
  <button type="submit">Send</button>
  <input name="company_website" type="text" tabindex="-1" autocomplete="off"
    style="position:absolute;left:-10000px" aria-hidden="true" />
</form>
<style>
  form { display: grid; gap: 8px; font-family: system-ui, sans-serif; }
  input, textarea, button { padding: 10px 12px; border: 1px solid #d4d4d4; border-radius: 8px; font: inherit; }
  textarea { min-height: 96px; resize: vertical; }
  button { background: #111; color: #fff; border: none; cursor: pointer; }
</style>

cómo funciona

Tres pasos de principio a fin.

01

Crear una bandeja

Una bandeja por sitio Framer con endpoint y email al instante.

02

Pega en un Embed

Inserta Embed, cambia a HTML y pega el código con tu ID. Ajusta el tamaño para mostrar todo el formulario.

03

Recibe avisos

Añade Discord, Slack, email o webhook. Los mensajes avisan donde ya estás.

por qué mailcontact

Pensado para funcionar con Framer.

Sin mejorar el plan por un formulario

Los formularios nativos son de pago. Embed envía tu HTML a mailcontact desde cualquier Framer publicado.

Sin servidor detrás del sitio

Framer publica páginas sin servidor propio. El formulario envía directo y CORS abierto permite framer.website y dominios propios.

Una dirección de email en la misma bandeja

Publica [email protected]: funciona sin DNS y llega junto al formulario.

preguntas frecuentes

Framer + mailcontact: tus preguntas resueltas

¿Necesito un plan de Framer de pago?

Con este método no. Los componentes nativos de Framer son de pago actualmente, pero el ejemplo utiliza HTML en un Embed y envía a mailcontact, sin sus funciones de formularios.

¿Cómo muestro un aviso de éxito al enviar?

El endpoint devuelve JSON y el envío nativo abre esa respuesta. Usa el script de MailContact en Embed para enviar, verificar y mostrar avisos en la página. No hay redirección configurable actualmente.

¿Puedo adaptar el formulario a mi diseño de Framer?

Sí, el código es tuyo. Embed no hereda estilos de Framer; añade style con las fuentes y colores de tu sitio.

¿Funciona en un subdominio gratuito framer.website?

Sí. Acepta peticiones de cualquier dominio, gratuitos y propios. Límite: 20 por minuto e IP, suficiente para contacto.

relacionado

También funciona con

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