MeDo

Generador de Formularios de Contacto con IA.

Describe los campos que necesitas, el tono que quieres y las reglas de validación que importan — MeDo convierte tu prompt en un componente de formulario de contacto completo y accesible en segundos.

Formulario de Contacto
Formulario de Contacto

Cada sitio web necesita un gran formulario de contacto

Un formulario de contacto suele ser el último componente con el que un visitante interactúa antes de convertirse en lead — y sin embargo, la mayoría son una ocurrencia tardía. Un diseño de campos deficiente, validación ausente y estados de error confusos crean fricción que mata las conversiones justo en el momento de la intención. Un formulario de contacto bien diseñado transmite profesionalismo, reduce el abandono y facilita que las personas adecuadas te contacten.

6 plantillas

Plantillas de Formulario de Contacto que puedes generar

Cada plantilla es un prompt real, no una captura de pantalla. Cópialo en cualquier editor de IA o ejecútalo en MeDo y obtén código React + Tailwind.

BasicInquiry

Name, Email, Message Form

Three fields and nothing else. The right default when you have no routing logic yet — every field you add past this point has to justify itself against a measurable drop in completions.

Create a three-field contact form — full name, email, message — inside a bordered card. Every input gets a visible label tied by htmlFor, and validates on blur rather than on every keystroke: name non-empty, email checked against a permissive pattern, message at least twenty characters with a live counter. Render each error in a span referenced by aria-describedby and set aria-invalid on the failing input. On submit, disable the button, swap its label for a spinner with role="status", then replace the card with a confirmation that names the reply window. On failure keep every typed value, show a retry banner and move focus to it. Add a honeypot field and a minimum time-to-submit check instead of a CAPTCHA.

Prueba en MeDo
QualifyingStudio

Project Type and Budget Form

Adds the two questions that decide whether you reply today or next week. Worth the extra friction for service businesses, wasteful for anything self-serve.

Create an agency inquiry form in a light card: full name, work email, a project type select (Brand Identity, Web Design, Motion, Other), a budget radio group (Under $5k, $5k-$20k, $20k+) wrapped in a fieldset with a legend, and a message textarea. Mark the select and the radio group required but validate on submit, not on mount, so the form never opens already covered in red. Collect the failures into an error summary above the card with in-page links to each field, set aria-invalid and aria-describedby on the offenders, and move focus to the summary heading. Show a pending state on the button, a success panel replacing the card, and a failure banner that preserves every answer.

Prueba en MeDo
BranchingSwitchboard

Sales or Support Split Form

One URL, two queues. Stops enterprise leads from landing in the bug tracker without asking you to maintain two contact pages that drift apart.

Create a contact form that opens with a two-option segmented control — Sales inquiry or Support request — built from radio inputs in a fieldset, and swaps the fields beneath it. Sales shows company, team size and budget; Support shows account email, affected feature and a severity select. Announce the swap through an aria-live="polite" region and move focus to the first field of the new branch. Validate only the visible branch, keep the hidden branch out of the submitted payload, and wire every error to its input with aria-describedby and aria-invalid. On submit show a pending button, then a success message naming the queue the request went to. Rate-limit repeat submissions from the same session and include a hidden honeypot.

Prueba en MeDo
High trustChambers

Confidential Consultation Form

For regulated practices, where the reassurance copy next to the submit button does more work than the field layout does. Say what happens to the data before you ask for it.

Create a consultation request form for a law or financial practice: full name, email, phone with a format hint in the label rather than as placeholder-only text, a matter type select for routing, a preferred contact method radio group, and a details textarea with a note that this form is not privileged communication. Put a one-line confidentiality statement directly above the submit button, not in the footer. Validate on blur, expose errors through aria-describedby, and set aria-invalid on failures. Submit button reads Request a confidential consultation, goes to a disabled pending state, then a success panel stating the response window and an alternative phone number. On failure show the error inline and never clear the textarea.

Prueba en MeDo
Two columnLedger

Contact Details Beside the Form

Form on the right, address, hours and direct email on the left. Cuts the volume of people who fill in a form to ask a question the sidebar already answered.

Create a two-column contact section: on the left, an office address, opening hours, a direct email and phone as real mailto and tel links; on the right, a card form with name, email, subject select and message. Stack the columns on mobile with the form first. Labels are always visible, errors validate on blur and attach via aria-describedby with aria-invalid on the input, and the submit button moves through idle, pending with a role="status" spinner, and success states. On failure show a banner above the form, focus it, and keep all values. Add a honeypot input hidden from assistive technology and a timestamp check to drop bot submissions.

Prueba en MeDo
Multi stepEnquire

Three-Step Contact Wizard

Splits a long inquiry into three short screens with a step indicator. Only pays off past about eight fields — below that the wizard adds clicks and removes context.

Create a three-step contact wizard: step one collects name and email, step two collects project type, budget and timeline, step three shows a message textarea and a read-only review of the earlier answers. Render a step indicator with aria-current="step" on the active item. Validate the current step before allowing Next, focus the first invalid field, and expose errors with aria-describedby and aria-invalid. Keep all answers in state so Back never loses data. The final submit shows a pending state, then a success screen replacing the wizard, and on failure returns to step three with a retry banner and every answer intact. Include a honeypot field.

Prueba en MeDo

Cómo personalizar tu Formulario de Contacto

Pregunta solo lo que realmente vas a usar

Cada campo adicional reduce las tasas de compleción. Revisa tu formulario: si no puedes describir cómo cada campo influye en cómo respondes al envío, elimínalo. Nombre, correo electrónico y una pregunta calificadora suelen ser suficientes para iniciar una conversación.

Escribe errores de validación que guíen, no que regañen

Reemplaza mensajes como "Correo inválido" por "Por favor ingresa un correo válido, ej. tu@ejemplo.com". Un texto de error específico y accionable reduce la fricción de reenvío y genera confianza con los visitantes que cometen errores honestos.

Diseña tu estado de éxito con tanto cuidado como el formulario mismo

La confirmación post-envío es una oportunidad perdida en la mayoría de los sitios. Úsala para establecer expectativas ("Respondemos en un día hábil"), ofrecer una alternativa ("O reserva una llamada directamente") o reforzar tu voz de marca — no solo un genérico "Gracias".

Usa campos condicionales para mantener el formulario corto

Muestra preguntas adicionales solo cuando sean relevantes para respuestas anteriores — por ejemplo, revelar un campo de presupuesto solo después de que el visitante seleccione "Nuevo proyecto". La lógica condicional reduce la longitud percibida y enfoca a cada visitante exactamente en los campos que importan para su situación.

Quién usa el componente Formulario de Contacto

Agencia creativa o freelancer

Los formularios de contacto de agencias típicamente incluyen un selector de tipo de proyecto, un rango de presupuesto y un campo de cronograma junto a nombre y correo — dando al estudio suficiente contexto para calificar y priorizar los leads entrantes antes de la primera respuesta.

SaaS o producto tech

Los formularios de contacto de productos frecuentemente se bifurcan en "Consulta de ventas" vs. "Solicitud de soporte" al inicio, mostrando luego campos relevantes por cada ruta — manteniendo los leads enterprise separados de los reportes de bugs sin requerir dos páginas separadas.

Servicios profesionales (derecho, finanzas, salud)

Los formularios de contacto de alta confianza en industrias reguladas enfatizan garantías de confidencialidad, incluyen un desplegable de tipo de asunto para enrutamiento y reemplazan botones de envío genéricos con textos como "Solicitar una consulta confidencial".

Evento o conferencia

Los formularios de consulta de eventos preguntan sobre tipo de asistencia, tamaño de empresa para niveles de patrocinio y temas de sesión preferidos — funcionando a la vez como herramienta de captura de leads y segmentación de audiencia antes de que el evento comience.

Patrones de Formulario de Contacto para distintos sitios web

El mismo componente formulario de contacto, adaptado al tipo de sitio donde se publica.

01 / 06

Agency and Studio Contact Forms

Project type, budget band and timeline earn their place here because they decide reply order, not because they look thorough. The one field to cut first is company website — you can find it from the email domain in less time than the visitor spends typing it.

Estilos y variantes de Formulario de Contacto

Elige la variante que encaje con el resto de la página y genérala.

01 / 06

Card Form With Visible Labels

A bordered card, one column, labels above every input. The most boring option and the one that tests best, because a label above the field survives autofill, zoom and translation without collapsing into the value.

Formulario de Contacto en React, Next.js, Vue y Svelte

React, Next.js, Vue 3, SvelteKit, Astro o HTML puro: el mismo formulario de contacto, seis formas de integrarlo.

01 / 06

React Contact Form

Keep the form uncontrolled and read values from FormData on submit — controlled state on every field re-renders the whole form on each keystroke for no benefit. Hold only errors and status in state.

src/components/ContactForm.tsx

export function ContactForm() {
  const [status, setStatus] = useState('idle')

  async function onSubmit(e) {
    e.preventDefault()
    setStatus('pending')
    const data = new FormData(e.currentTarget)
    const res = await send(data)
    setStatus(res.ok ? 'success' : 'error')
  }

  return <form onSubmit={onSubmit} noValidate>{/* fields */}</form>
}

Cómo añadir tu Formulario de Contacto a un proyecto

Cuatro pasos, desde elegir una plantilla de formulario de contacto hasta llevarlo a producción.

01~30s

Pick a Contact Form Template

Match the template to how you triage replies — three fields if every message goes to one inbox, the branching form if sales and support are different queues.

02~10s

Copy the Prompt

Paste it into MeDo, Lovable, Bolt, v0 or Cursor. Replace the placeholder select options with your real ones first, since the option list is what determines the routing you have to build behind it.

03~2min

Generate and Refine

You get React + Tailwind with a live preview. Follow up in plain English — "validate on blur, not on change", "add an error summary above the card", "keep the values on a failed submit".

04~2min

Wire Up the Submit Handler

Point the action at a serverless function, Resend, Formspree or your own API. Test the failure path before shipping: a form that silently drops a message is worse than no form at all.

Preguntas frecuentes sobre Formulario de Contacto

¿Qué es un generador de formularios de contacto con IA?

Un generador de formularios de contacto con IA toma una descripción en lenguaje natural de los campos, reglas de validación y diseño que deseas y produce un componente de formulario completo y estilizado con código funcional. MeDo genera el componente completo — diseño, etiquetas, estados de error, estado de éxito y atributos de accesibilidad — para que puedas integrarlo directamente en tu proyecto.

¿Cómo creo un formulario de contacto con IA?

Abre MeDo y describe tu formulario en español: lista los campos que necesitas, los requisitos de validación, el estilo visual y cualquier comportamiento especial como campos condicionales o un mensaje de éxito personalizado. MeDo genera el componente de inmediato. Puedes refinarlo con prompts de seguimiento — cambiar un tipo de campo, ajustar la validación o rediseñar el layout — hasta que sea exactamente lo que necesitas.

¿Cuál es la mejor herramienta de IA para construir formularios de contacto?

MeDo está diseñado específicamente para generar componentes de UI individuales desde prompts, incluidos formularios de contacto. A diferencia de las herramientas generales de chat con IA, MeDo entiende la accesibilidad de formularios (etiquetas ARIA, navegación por teclado, gestión del foco), patrones de validación y estructura de componentes — por lo que el resultado es listo para producción, no solo código que parece plausible.

¿Puede la IA generar un formulario de contacto con validación?

Sí. Cuando incluyes requisitos de validación en tu prompt — por ejemplo, "campos obligatorios", "formato de correo válido" o "mínimo 20 caracteres en el campo de mensaje" — MeDo genera la lógica de validación en línea junto con el componente. También puedes pedir bibliotecas de validación específicas o validación de restricciones HTML5 nativa dependiendo de tu stack.

¿Cómo agrego un formulario de contacto a mi sitio web sin un plugin?

Genera el componente de formulario con MeDo, luego conecta el manejador de envío a cualquier endpoint HTTP — una función serverless, un servicio de manejo de formularios como Resend o Formspree, o tu propia API de backend. Dado que MeDo produce código de componente limpio sin dependencias de bibliotecas de formularios externas, mantienes el control total sobre la lógica de envío y el enrutamiento de datos.

¿Qué campos debe incluir un formulario de contacto?

Como mínimo, un formulario de contacto necesita un campo de nombre, un campo de correo electrónico y un textarea de mensaje. Más allá de eso, agrega solo los campos que cambien cómo respondes: un selector de asunto o tipo de proyecto para enrutamiento, un campo de teléfono si ofreces llamadas, o un rango de presupuesto para servicios profesionales. Cada campo obligatorio adicional aumenta el abandono, así que mantén el predeterminado corto y usa lógica condicional para expandir cuando sea relevante.