integraciones · site builder

Formularios de Webflow sin límites del plan.

Los formularios nativos de Webflow tienen cuotas según plan. Un Embed con HTML dirigido a mailcontact evita esa gestión y recibe en una bandeja con Discord, Slack, email o webhook.

Sigue diseñando en Webflow. Reutiliza w-input y w-button para heredar estilos; los visitantes no notarán diferencia.

Cada bandeja también tiene [email protected] y reúne tus sitios y otros proyectos en un lugar, no paneles separados.

Crear una cuenta Leer documentación

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

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.

Elemento Embed (Webflow Designer → Add panel)

<form action="https://mailcontact.app/api/forms/your-form-id" method="POST">
  <input class="w-input" type="text" name="name" placeholder="Your name" />
  <input class="w-input" type="email" name="email" placeholder="[email protected]" required />
  <textarea class="w-input" name="message" placeholder="How can we help?" required></textarea>
  <button class="w-button" type="submit">Send</button>
  <input name="company_website" type="text" tabindex="-1" autocomplete="off"
    style="position:absolute;left:-10000px" aria-hidden="true" />
</form>

cómo funciona

Tres pasos de principio a fin.

Crear una bandeja

Una bandeja por sitio con endpoint y email inmediatos. Sin DNS ni código en cabecera.

Pega un elemento Embed

En Designer arrastra Embed, pega y publica. w-input y w-button heredan tus estilos.

Recibe avisos

Añade Discord, Slack, email o webhook. Sin abrir el panel del sitio para comprobar.

por qué mailcontact

Pensado para funcionar con Webflow.

No consume tu cuota

Webflow cuenta formularios nativos según plan. El Embed envía directamente a mailcontact y no consume esa cuota.

Con el estilo de tu sitio

Usa w-input y w-button para heredar el diseño o tus propias clases CSS.

Una bandeja para los sitios de tus clientes

¿Varios Webflow o tecnologías distintas? Cada proyecto tiene bandeja y dirección, reunidas en un lugar.

preguntas frecuentes

Webflow + mailcontact: tus preguntas resueltas

¿Cuántos formularios enviados permite Webflow?

Los formularios nativos de Webflow tienen una cuota ligada al plan del sitio (consulta los precios actuales). Un formulario HTML propio que envía a mailcontact evita la gestión de Webflow y no está sujeto a esos límites.

¿Necesito un plan de Webflow de pago para usar Embed?

Webflow reserva el código personalizado y Embed a planes de pago actualmente. Comprueba tu plan. Si ya admite código, el formulario no cuesta más ni consume cuota nativa.

¿El formulario encajará con mi diseño Webflow?

Sí. Añade w-input y w-button para heredar el estilo nativo de Webflow o utiliza tus clases y CSS.

¿Cómo muestro un aviso de éxito tras el envío?

El endpoint devuelve JSON sin redirigir. Usa el script en Embed para envío, verificación y avisos. CORS abierto permite dominios webflow.io y propios. No hay redirección configurable actualmente.

relacionado

También funciona con

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