Genera un enlace de WhatsApp con mensaje desde un formulario. Valida el número, codifica el texto y deja que la persona confirme el envío.
Preparar un mensaje sin enviarlo por la persona
Un enlace WhatsApp con mensaje puede reducir pasos para solicitar información. El formulario recoge un nombre y una consulta, construye la URL y ofrece un enlace para continuar. La persona todavía revisa y envía el mensaje dentro de WhatsApp. El código no confirma que se haya entregado nada. Esta distinción debe aparecer en el texto de la interfaz: Preparar consulta describe la acción real y evita prometer un envío que el navegador no puede verificar.
Configurar el destinatario correcto
El número se deja vacío para que no apuntes accidentalmente a un tercero. Debes introducir el número real con prefijo internacional y solamente dígitos, sin el signo más, espacios ni paréntesis. La expresión regular detecta una estructura básica; no demuestra que ese número exista o tenga una cuenta activa. Antes de publicar, abre el enlace desde un dispositivo de prueba y confirma que la conversación corresponde al negocio que debe recibir las consultas.
Código completo para probar en tu navegador
Copia este documento en un archivo index.html, guarda los cambios y ábrelo en el navegador. El ejemplo no requiere bibliotecas.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Crear un enlace de WhatsApp con mensaje desde un formulario</title>
<style>
*{box-sizing:border-box}body{font:16px/1.6 system-ui,sans-serif;max-width:900px;margin:2rem auto;padding:1rem;color:#17233b}label{display:block;font-weight:700;margin-top:1rem}input,textarea,select,button{font:inherit;padding:.65rem;max-width:100%}textarea{width:100%}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #173b94;outline-offset:3px}[hidden]{display:none!important}[role=tab][aria-selected=true]{background:#173b94;color:white}[role=tab]{border:1px solid #bdcbe2;border-radius:.5rem}[role=tabpanel]{padding:1rem;border:1px solid #bdcbe2}
</style>
</head>
<body>
<form id="consulta">
<label for="nombre">Tu nombre</label><input id="nombre" required maxlength="80">
<label for="asunto">¿Qué necesitas?</label><textarea id="asunto" required maxlength="600"></textarea>
<button type="submit">Preparar consulta</button>
</form>
<p id="aviso" role="status"></p>
<a id="enlace" hidden>Continuar en WhatsApp</a>
<script>
const formulario=document.querySelector('#consulta');
const enlace=document.querySelector('#enlace');
const aviso=document.querySelector('#aviso');
const numero=''; // Añade el número real: prefijo internacional y solo dígitos.
formulario.addEventListener('submit',e=>{
e.preventDefault();
enlace.hidden=true;
if(!/^[1-9]\d{6,14}$/.test(numero)){
aviso.textContent='Configura el número de destino antes de utilizar el formulario.';
return;
}
const nombre=document.querySelector('#nombre').value.trim();
const asunto=document.querySelector('#asunto').value.trim();
if(!nombre||!asunto){aviso.textContent='Completa el nombre y la consulta.';return;}
const texto='Hola, soy '+nombre+'. Mi consulta: '+asunto;
enlace.href='https://wa.me/'+numero+'?text='+encodeURIComponent(texto);
enlace.hidden=false;
aviso.textContent='Consulta preparada. WhatsApp te permitirá revisarla antes de enviarla.';
});
</script>
</body>
</html>Por qué se codifica el mensaje
Los espacios, las tildes, los saltos de línea y caracteres como el ampersand tienen funciones especiales dentro de una URL. encodeURIComponent transforma el texto para colocarlo en el parámetro sin romper su estructura. No codifiques la URL completa después de montarla, porque también alterarías sus separadores. Tampoco sustituyas únicamente los espacios por un símbolo: una consulta real puede contener signos de interrogación, enlaces y nombres que necesitan una codificación completa del valor.
Validar sin dificultar una consulta normal
required y maxlength ofrecen una primera ayuda nativa. El evento submit se ejecuta después de que el navegador compruebe esos requisitos en una interacción normal. Además, trim detecta valores formados solamente por espacios. No impongas una expresión regular estrecha a los nombres: las personas pueden utilizar acentos, guiones y distintas convenciones. El límite de seiscientos caracteres es una decisión de diseño del ejemplo, no un requisito universal de WhatsApp.
Un enlace visible en lugar de una ventana inesperada
Después de preparar el mensaje aparece Continuar en WhatsApp. Esta segunda acción evita depender de ventanas emergentes y deja claro cuándo se abre un servicio externo. El enlace utiliza la pestaña actual para mantener el comportamiento sencillo. Si decides abrir otra, indícalo en el texto accesible y añade la protección apropiada. No abras varias conversaciones por repetir clics en el formulario ni redirijas automáticamente mientras la persona todavía está corrigiendo su consulta.
Datos que conviene dejar fuera
El mensaje forma parte de una URL y puede quedar expuesto en el historial y en los sistemas que intervienen al abrirla. Pide solamente la información necesaria para iniciar la conversación. No uses este patrón para recoger contraseñas, documentos privados o datos de pago. Si la solicitud requiere información delicada, deriva a un canal diseñado para ello. Añade información clara sobre el tratamiento de las consultas conforme a la operativa real de tu negocio.
Integración dentro de una página comercial
Coloca el formulario junto a los servicios, el horario de atención y una expectativa realista de respuesta. Preparar un mensaje no significa que haya un agente disponible en ese instante. Un negocio también puede ofrecer un teléfono o correo alternativo para quien no use la aplicación. Si adaptas el código a WordPress, evita duplicar identificadores en varios bloques y carga el script una sola vez. En páginas con varios formularios, encapsula cada instancia.
Una comprobación completa del recorrido
Introduce un nombre con tilde, un mensaje con varias líneas y una consulta que incluya símbolos. Comprueba que llegan intactos al borrador de conversación. Cambia el mensaje y vuelve a prepararlo para confirmar que la URL se actualiza. Prueba el número vacío y uno con separadores: debe aparecer la instrucción de configuración. Finalmente revisa móvil y escritorio. La apertura depende del entorno de WhatsApp disponible, así que conserva siempre una vía de contacto alternativa visible.
Personalizar el mensaje sin convertirlo en una plantilla rígida
Puedes añadir el nombre del servicio o una referencia del producto antes de la consulta. Mantén el texto inicial corto y permite que la persona explique su necesidad con sus propias palabras. No incluyas frases de aceptación de condiciones como si se hubieran leído automáticamente por abrir el enlace. Si un producto cambia de nombre, actualiza la referencia que se incorpora al mensaje. Para varias páginas puedes guardar el contexto en un atributo de datos del formulario y leerlo al preparar la URL, sin insertar HTML del usuario ni construir código ejecutable.
Revisar la accesibilidad del formulario
Las etiquetas permanecen visibles y se asocian mediante for e id. El estado comunica que la consulta está preparada, mientras que el enlace ofrece la siguiente acción. Comprueba que el orden de teclado sigue nombre, consulta, botón y enlace. Si el diseño sitúa el enlace lejos del formulario, la persona podría no encontrarlo aunque exista un anuncio. Mantén ambos elementos cerca y usa un estilo claramente reconocible. No dependas de un icono de WhatsApp sin texto para explicar el destino, especialmente cuando ese control aparece después de una interacción.
Qué comprobar cuando la conversación no se abre
Primero verifica el número y la URL generada sin compartir datos personales innecesarios. Después prueba si el dispositivo tiene acceso al entorno de WhatsApp que espera utilizar. Una aplicación no instalada, una sesión no iniciada o una restricción de red pueden cambiar el recorrido. El formulario no puede garantizar la apertura ni la entrega. Mantén el mensaje escrito para que la persona pueda copiarlo o utilizar otro canal si lo necesita. Un fallo al abrir un servicio externo no debería borrar la consulta que acababa de redactar.
Conservar la consulta hasta que el recorrido termine
La apertura de WhatsApp puede sacar a la persona de la página. Evita vaciar los campos al preparar el enlace, porque todavía no sabes si pudo continuar ni si envió el mensaje. Si vuelve para corregirlo, debería encontrar el texto y generar una URL nueva. También conviene ocultar o actualizar un enlace antiguo cuando cambia la consulta para que no se abra una versión anterior por error. En una integración más completa puedes invalidarlo al detectar input y pedir una nueva preparación. La interfaz debe distinguir claramente el contenido escrito del borrador que ya estaba preparado.
Guías relacionadas para seguir practicando
Puedes ampliar esta práctica con Crear un formulario HTML y Configurar enlaces.
