Formularios que convierten, desde cero y paso a paso

1. Qué es un formulario (en 2 minutos, sin tecnicismos)

Un formulario son esas cajitas donde el visitante escribe (nombre, teléfono, mensaje) más un botón de enviar. Es la caja registradora de tu web: ahí es donde una visita se convierte en un cliente que te escribe.

El contacto es donde mueren la mayoría de las ventas, y casi siempre por lo mismo: formularios larguísimos. Regla de oro para principiantes: solo 3 cajitas (nombre + WhatsApp + mensaje). Cada cajita extra te roba clientes. En serio.

Lo que necesitas: tu número de WhatsApp, un editor de texto cualquiera (el Bloc de notas sirve) y 20 minutos. No necesitas servidor, ni pagar nada, ni saber programar: vas a copiar, pegar y probar.

2. Paso 1: tu primer formulario (copia y pega, te explico cada línea)

Copia este código en un archivo llamado contacto.html. Después te explico qué hace cada parte, línea por línea, como si fuera una receta:

<form id="contactForm">
  <label>Nombre
    <input name="nombre" required minlength="2">
  </label>
  <label>WhatsApp
    <input name="tel" type="tel" required>
  </label>
  <label>¿Qué necesitas?
    <textarea name="msg" required minlength="10"></textarea>
  </label>
  <button type="submit">Enviar por WhatsApp →</button>
</form>

Traducción al cristiano:

• <form>: la "caja" que agrupa todo. Sin esto, son cajitas sueltas sin botón que las envíe.
• <label>: el cartelito que dice qué escribir ("Nombre"). Además ayuda a personas con lector de pantalla: accesibilidad gratis.
• <input>: la cajita de una línea. type="tel" le dice al teléfono "muestra el teclado numérico".
• <textarea>: la cajita grande para el mensaje.
• required: significa "obligatorio": el navegador no deja enviar si está vacío. Validación gratis, sin programar.
• <button>: el botón. Fíjate que dice a dónde va ("Enviar por WhatsApp →"), no un triste "Enviar".

3. Paso 2: pruébalo tú primero (sé tu peor cliente)

Guarda el archivo y ábrelo con doble clic en tu navegador. Ahora rómpelo a propósito, como haría un visitante distraído:

1. Dale a enviar con todo vacío: el navegador debe frenarte (eso es required trabajando).
2. Escribe un nombre de 1 letra: debe pedirte más (eso es minlength).
3. Llena todo bien: debe dejarte enviar.

Si algo no frena cuando debe, revisa que copiaste la palabra completa (required, no require). El 90% de los "no me funciona" son una letra mal copiada.

4. Paso 3: conéctalo a tu WhatsApp, clic por clic

Ahora la magia: que al dar al botón se abra tu WhatsApp con el pedido ya escrito. Paso a paso:

1. Tu número en formato internacional: código de país + número, todo pegado, sin +, espacios ni guiones. Ejemplo con número inventado (no existe): 15551234567.
2. Tu enlace base: https://wa.me/ más tu número → https://wa.me/15551234567. Ábrelo en tu teléfono: debe abrir tu propio chat.
3. Agrega este código debajo de tu formulario (te lo explico justo después):

<script>
form = document.getElementById("contactForm");
form.addEventListener("submit", (e) => {
  e.preventDefault();
  texto = "Hola, soy " + form.nombre.value
    + " (" + form.tel.value + "). Necesito: " + form.msg.value;
  url = "https://wa.me/15551234567?text=" + encodeURIComponent(texto);
  window.open(url, "_blank");
});
</script>

Qué hace, en cristiano: 1) escucha el clic en enviar; 2) frena el envío normal (para qué enviar a un servidor si no tienes); 3) junta los 3 datos en un mensajito; 4) lo pega a tu enlace de WhatsApp (encodeURIComponent solo significa "acomoda tildes y espacios para que el enlace no se rompa"); 5) abre tu chat con el mensaje listo.

5. Paso 4: frena errores y robots (el portero amable + la trampa invisible)

Dos problemas te esperan y ambos tienen solución fácil:

Visitantes que se equivocan: avísales con palabras, no solo con rojo. Agrega esto a tu código: si el nombre tiene menos de 2 letras o el mensaje menos de 10, muestra "Escribe tu nombre" / "Cuéntanos un poco más". Un mensaje claro recupera ventas; un campo rojo sin texto las pierde.

Robots que mandan spam: son programitas que rellenan formularios solos. El captcha (esos "demuestra que no eres robot") los frena, pero también espanta clientes. Mejor una trampa invisible: un campo oculto que los humanos no ven pero los robots sí rellenan. Si llega lleno, era robot y se ignora:

<!-- trampa anti-spam: invisible para personas -->
<input name="empresa" tabindex="-1" autocomplete="off"
  style="position:absolute;left:-9999px" aria-hidden="true">

Y en tu código: "si el campo trampa llegó lleno, no era una persona, ignóralo". Simple y sin molestar a nadie. Detalle completo de validación en JavaScript esencial.

6. Paso 5: checklist del formulario perfecto ✅

• Solo 3 cajitas: nombre + WhatsApp + mensaje
• Cada cajita tiene su cartelito (label) visible
• El botón dice a dónde va ("Enviar por WhatsApp →")
• Probé enviar vacío y me frenó (required funciona)
• Probé desde OTRO teléfono y el pedido llegó a mi WhatsApp
• El número del código es el MÍO, no el del ejemplo
• Puse la trampa anti-spam invisible
• Los errores avisan con palabras, no solo con color
• Se puede usar con teclado y se lee bien en móvil

¿De dónde viene tu formulario? De una buena landing: landing que vende. ¿Y la base de todo? HTML semántico.