Generador de Formularios para WhatsApp
Crea formularios personalizados que organizan la información del cliente y la envían directamente a una conversación de WhatsApp.
Sin registro · Sin programación · Código listo para instalar
Empieza con una plantilla
Destino del formulario
El mensaje se abrirá en el WhatsApp de este número.
Pega el número con + o espacios, lo limpiamos por ti.
Campos del formulario
4 de 6 camposNombre
Texto corto· Obligatorio
Teléfono
Teléfono
Motivo de contacto
Selector· Obligatorio
Mensaje
Texto largo· Obligatorio
¿Cómo quieres mostrar el formulario?
Elige cómo verán tus visitantes el formulario en la página.
Personaliza el diseño
Color principal
Color del botón
Tamaño avanzado
Define exactamente el ancho, el padding y la altura de los campos.
Mostrar logo
Aislar estilos del formulario
Recomendado. Encapsula todo dentro de .wuaps-waf-root con el prefijo wuaps-waf- para no afectar el resto de tu web.
Agrega tu número de WhatsApp para que el formulario funcione al enviar.
Vista previa · Insertado
Instala tu formulario
Copia el código o descarga los archivos listos para pegar en cualquier página web.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>Solicita información</title>
<style>
.wuaps-waf-root,
.wuaps-waf-root *,
.wuaps-waf-root *::before,
.wuaps-waf-root *::after {box-sizing: border-box !important; }
.wuaps-waf-root :where(div, form, p, span, label, h1, h2, h3, h4, ul, ol, li, fieldset, legend, img, svg, a) {margin: 0 !important;padding: 0 !important;border: 0 !important;float: none !important;text-transform: none !important;letter-spacing: normal !important;word-spacing: normal !important;text-shadow: none !important;text-decoration: none !important;font-style: normal !important;box-shadow: none !important;min-width: 0 !important;max-width: 100% !important;background: none !important;
}
.wuaps-waf-root {--wuaps-waf-primary: #4511AD !important;--wuaps-waf-button: #25D366 !important;--wuaps-waf-radius: 14px !important;--wuaps-waf-btn-radius: 999px !important;--wuaps-waf-shadow: none !important;--wuaps-waf-bg: transparent !important;--wuaps-waf-text: #0f0f28 !important;--wuaps-waf-muted: rgba(15,15,40,.62) !important;--wuaps-waf-input-bg: #fdfdff !important;--wuaps-waf-input-border: #e6e3f0 !important;--wuaps-waf-input-border-w: 1px !important;--wuaps-waf-fab-color: #25D366 !important;--wuaps-waf-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;--wuaps-waf-max-width: 560px !important;--wuaps-waf-pad: 0px !important;--wuaps-waf-input-h: 46px !important;--wuaps-waf-textarea-h: 120px !important;--wuaps-waf-gap: 13px !important;font-family: var(--wuaps-waf-font) !important;font-size: 15px !important;line-height: 1.4 !important;color: var(--wuaps-waf-text) !important;max-width: 100% !important;min-width: 0 !important;isolation: isolate !important;
}
.wuaps-waf-root[data-wuaps-waf-mode="inline"] {overflow-x: clip !important; }
.wuaps-waf-root[data-wuaps-waf-size="compact"] {--wuaps-waf-max-width: 420px !important;--wuaps-waf-pad: 0px !important;--wuaps-waf-input-h: 42px !important;--wuaps-waf-textarea-h: 96px !important;
}
.wuaps-waf-root[data-wuaps-waf-size="wide"] {--wuaps-waf-max-width: 720px !important;--wuaps-waf-pad: 0px !important;--wuaps-waf-input-h: 50px !important;--wuaps-waf-textarea-h: 140px !important;
}
.wuaps-waf-form {width: 100% !important;max-width: var(--wuaps-waf-max-width) !important;margin-inline: auto !important;padding: var(--wuaps-waf-pad) !important;background: var(--wuaps-waf-bg) !important;color: var(--wuaps-waf-text) !important;border-radius: 0 !important;box-shadow: var(--wuaps-waf-shadow) !important;font-family: var(--wuaps-waf-font) !important;font-size: 15px !important;line-height: 1.4 !important;min-width: 0 !important;display: block !important;
}
.wuaps-waf-root[data-wuaps-waf-width="fit"] .wuaps-waf-form {margin-inline: 0 !important; }
.wuaps-waf-root[data-wuaps-waf-width="full"] .wuaps-waf-form {max-width: 100% !important; }
.wuaps-waf-header {margin: 0 0 14px !important;min-width: 0 !important; }
.wuaps-waf-align-center {text-align: center !important; }
.wuaps-waf-align-center .wuaps-waf-logo {margin-left: auto !important;margin-right: auto !important; }
.wuaps-waf-logo {max-height: 48px !important;max-width: 170px !important;display: block !important;margin: 0 0 10px !important;border: 0 !important; }
.wuaps-waf-title {font-family: Georgia, 'Times New Roman', serif !important;font-size: 24px !important;font-weight: 600 !important;letter-spacing: -0.015em !important;line-height: 1.22 !important;margin: 0 0 5px !important;color: var(--wuaps-waf-text) !important;
}
.wuaps-waf-desc {font-size: 13.5px !important;font-weight: 400 !important;margin: 0 !important;color: var(--wuaps-waf-muted) !important;font-family: var(--wuaps-waf-font) !important;line-height: 1.4 !important; }
.wuaps-waf-grid {display: grid !important;grid-template-columns: repeat(2, minmax(0, 1fr)) !important;gap: var(--wuaps-waf-gap) !important; }
.wuaps-waf-field {display: flex !important;flex-direction: column !important;gap: 5px !important;min-width: 0 !important;max-width: 100% !important; }
.wuaps-waf-w-full {grid-column: 1 / -1 !important; }
.wuaps-waf-w-half {grid-column: span 1 !important; }
.wuaps-waf-label {font-size: 13px !important;font-weight: 600 !important;text-transform: none !important;letter-spacing: 0 !important;color: var(--wuaps-waf-text) !important;margin: 0 !important;font-family: var(--wuaps-waf-font) !important;line-height: 1.3 !important;
}
.wuaps-waf-req {color: #e11d48 !important;margin-left: 2px !important; }
.wuaps-waf-help {font-size: 11.5px !important;color: var(--wuaps-waf-muted) !important;font-family: var(--wuaps-waf-font) !important;font-weight: 400 !important;line-height: 1.35 !important; }
.wuaps-waf-input,
.wuaps-waf-select,
.wuaps-waf-textarea {width: 100% !important;min-width: 0 !important;max-width: 100% !important;height: var(--wuaps-waf-input-h) !important;min-height: var(--wuaps-waf-input-h) !important;font-family: var(--wuaps-waf-font) !important;font-size: 14.5px !important;font-weight: 400 !important;line-height: 1.35 !important;color: var(--wuaps-waf-text) !important;background: var(--wuaps-waf-input-bg) !important;border: var(--wuaps-waf-input-border-w) solid var(--wuaps-waf-input-border) !important;border-radius: var(--wuaps-waf-radius) !important;padding: 0 13px !important;margin: 0 !important;outline: none !important;text-transform: none !important;letter-spacing: normal !important;text-shadow: none !important;text-align: left !important;float: none !important;box-shadow: none !important;appearance: none !important;-webkit-appearance: none !important;-moz-appearance: none !important;transition: border-color .15s, box-shadow .15s, background .15s !important;overflow-wrap: anywhere !important;
}
.wuaps-waf-select {background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23888' d='M6 8L0 0h12z'/></svg>") !important;background-repeat: no-repeat !important;background-position: right 13px center !important;padding-right: 34px !important;cursor: pointer !important;
}
.wuaps-waf-textarea {height: var(--wuaps-waf-textarea-h) !important;min-height: var(--wuaps-waf-textarea-h) !important;resize: vertical !important;padding: 11px 13px !important;
}
.wuaps-waf-input:focus-visible,
.wuaps-waf-select:focus-visible,
.wuaps-waf-textarea:focus-visible {border-color: var(--wuaps-waf-primary) !important;box-shadow: 0 0 0 3px color-mix(in srgb, var(--wuaps-waf-primary) 18%, transparent) !important;
}
.wuaps-waf-options {display: flex !important;flex-direction: column !important;gap: 6px !important;padding: 2px 0 !important; }
.wuaps-waf-check {display: flex !important;align-items: flex-start !important;gap: 9px !important;font-size: 14px !important;font-weight: 400 !important;cursor: pointer !important;color: var(--wuaps-waf-text) !important;line-height: 1.35 !important;font-family: var(--wuaps-waf-font) !important; }
.wuaps-waf-check input {width: 16px !important;height: 16px !important;min-width: 16px !important;min-height: 16px !important;max-width: 16px !important;margin: 2px 0 0 !important;padding: 0 !important;border: 0 !important;background: none !important;box-shadow: none !important;accent-color: var(--wuaps-waf-primary) !important;flex-shrink: 0 !important;appearance: auto !important;-webkit-appearance: auto !important; }
.wuaps-waf-check span {min-width: 0 !important;overflow-wrap: anywhere !important; }
.wuaps-waf-error {color: #e11d48 !important;font-size: 11.5px !important;font-family: var(--wuaps-waf-font) !important; }
.wuaps-waf-error:not(:empty) {margin-top: 2px !important; }
.wuaps-waf-privacy {font-size: 11.5px !important;color: var(--wuaps-waf-muted) !important;margin: 12px 0 0 !important;font-family: var(--wuaps-waf-font) !important;font-weight: 400 !important;line-height: 1.4 !important; }
.wuaps-waf-submit {width: 100% !important;max-width: 100% !important;height: calc(var(--wuaps-waf-input-h) + 4px) !important;min-height: 44px !important;background: var(--wuaps-waf-button) !important;color: #fff !important;border: 0 !important;padding: 0 20px !important;margin: 14px 0 0 !important;font-family: var(--wuaps-waf-font) !important;font-size: 15px !important;font-weight: 600 !important;line-height: 1 !important;text-transform: none !important;letter-spacing: normal !important;text-shadow: none !important;float: none !important;box-shadow: none !important;border-radius: var(--wuaps-waf-btn-radius) !important;cursor: pointer !important;appearance: none !important;-webkit-appearance: none !important;transition: filter .15s, transform .1s !important;
}
.wuaps-waf-submit:hover {filter: brightness(.94) !important; }
.wuaps-waf-submit:active {transform: translateY(1px) !important; }
.wuaps-waf-submit:focus-visible {outline: 2px solid var(--wuaps-waf-primary) !important;outline-offset: 2px !important; }
.wuaps-waf-hidden {display: none !important; }
/* ---- Floating button ---- */
.wuaps-waf-floating-wrap {position: fixed !important;bottom: max(16px, env(safe-area-inset-bottom)) !important;z-index: 2147483000 !important;display: flex !important;flex-direction: column !important;gap: 10px !important;pointer-events: none !important;max-width: calc(100vw - 24px) !important;
}
.wuaps-waf-floating-wrap > * {pointer-events: auto !important; }
.wuaps-waf-pos-br {right: max(16px, env(safe-area-inset-right)) !important;left: auto !important;align-items: flex-end !important; }
.wuaps-waf-pos-bl {left: max(16px, env(safe-area-inset-left)) !important;right: auto !important;align-items: flex-start !important; }
.wuaps-waf-bubble {background: #fff !important;color: #0f0f28 !important;border-radius: 14px !important;padding: 8px 12px !important;font: 400 13px/1.35 var(--wuaps-waf-font) !important;box-shadow: 0 6px 20px rgba(0,0,0,.15) !important;max-width: min(240px, calc(100vw - 48px)) !important;overflow-wrap: anywhere !important;
}
.wuaps-waf-floating-button {border: 0 !important;cursor: pointer !important;background: var(--wuaps-waf-fab-color) !important;color: #fff !important;box-shadow: 0 6px 20px rgba(0,0,0,.22) !important;display: inline-flex !important;align-items: center !important;justify-content: center !important;gap: 10px !important;font-family: var(--wuaps-waf-font) !important;font-size: 14px !important;font-weight: 600 !important;line-height: 1 !important;text-transform: none !important;letter-spacing: normal !important;text-shadow: none !important;float: none !important;transition: transform .12s, filter .15s !important;appearance: none !important;-webkit-appearance: none !important;padding: 0 !important;flex: 0 0 auto !important;touch-action: manipulation !important;user-select: none !important;-webkit-tap-highlight-color: transparent !important;
}
.wuaps-waf-floating-button:hover {filter: brightness(.95) !important; }
.wuaps-waf-floating-button:active {transform: scale(.97) !important; }
.wuaps-waf-floating-button:focus-visible {outline: 3px solid color-mix(in srgb, var(--wuaps-waf-fab-color) 45%, #fff) !important;outline-offset: 3px !important; }
.wuaps-waf-floating-icon {display: inline-flex !important;align-items: center !important;justify-content: center !important;color: #fff !important;flex: 0 0 auto !important; }
.wuaps-waf-floating-icon svg {display: block !important;width: 28px !important;height: 28px !important; }
.wuaps-waf-floating-text {color: #fff !important;font-family: var(--wuaps-waf-font) !important;white-space: nowrap !important; }
.wuaps-waf-shape-circle {width: 58px !important;height: 58px !important;min-width: 58px !important;border-radius: 50% !important; }
.wuaps-waf-shape-circle .wuaps-waf-floating-text {display: none !important; }
.wuaps-waf-shape-rounded {width: 58px !important;height: 58px !important;min-width: 58px !important;border-radius: 18px !important; }
.wuaps-waf-shape-rounded .wuaps-waf-floating-text {display: none !important; }
.wuaps-waf-shape-text {height: 54px !important;padding: 0 20px !important;border-radius: 999px !important;max-width: calc(100vw - 32px) !important; }
.wuaps-waf-shape-text .wuaps-waf-floating-text {overflow: hidden !important;text-overflow: ellipsis !important; }
.wuaps-waf-shape-text .wuaps-waf-floating-icon svg {width: 24px !important;height: 24px !important; }
/* ---- Overlay + Modal (chat-style popup) ---- */
.wuaps-waf-overlay {position: fixed !important;inset: 0 !important;background: rgba(15,15,40,.5) !important;z-index: 2147483001 !important;display: none !important;align-items: center !important;justify-content: center !important;padding: 14px !important;padding-top: max(14px, env(safe-area-inset-top)) !important;padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;overflow: hidden !important;
}
.wuaps-waf-overlay[data-wuaps-waf-open="true"] {display: flex !important; }
.wuaps-waf-modal {position: relative !important;background: #ffffff !important;color: var(--wuaps-waf-text) !important;border-radius: 18px !important;width: min(400px, 92vw) !important;max-height: min(560px, calc(100dvh - 28px)) !important;display: flex !important;flex-direction: column !important;box-shadow: 0 24px 70px rgba(0,0,0,.32) !important;overflow: hidden !important;z-index: 2147483002 !important;min-width: 0 !important;
}
.wuaps-waf-close {position: absolute !important;top: 8px !important;right: 8px !important;z-index: 1 !important;width: 34px !important;height: 34px !important;border-radius: 50% !important;border: 0 !important;background: color-mix(in srgb, var(--wuaps-waf-text) 8%, transparent) !important;color: var(--wuaps-waf-text) !important;font-family: var(--wuaps-waf-font) !important;font-size: 20px !important;text-transform: none !important;letter-spacing: normal !important;font-weight: 500 !important;line-height: 1 !important;cursor: pointer !important;appearance: none !important;-webkit-appearance: none !important;display: inline-flex !important;align-items: center !important;justify-content: center !important;
}
.wuaps-waf-close:hover {background: color-mix(in srgb, var(--wuaps-waf-text) 14%, transparent) !important; }
.wuaps-waf-close:focus-visible {outline: 2px solid var(--wuaps-waf-primary) !important;outline-offset: 2px !important; }
.wuaps-waf-modal-body {overflow-y: auto !important;overflow-x: hidden !important;padding: 18px 16px 16px !important;min-width: 0 !important;overscroll-behavior: contain !important;-webkit-overflow-scrolling: touch !important;
}
.wuaps-waf-modal-body .wuaps-waf-form {box-shadow: none !important;padding: 0 !important;max-width: 100% !important;margin: 0 !important;max-height: none !important;overflow: visible !important;background: transparent !important;border-radius: 0 !important;
}
/* ---- Mobile ---- */
@media (max-width: 560px) {
.wuaps-waf-grid {grid-template-columns: 1fr !important; }
.wuaps-waf-w-half {grid-column: 1 / -1 !important; }
.wuaps-waf-input, .wuaps-waf-select, .wuaps-waf-textarea {font-size: 16px !important; }
.wuaps-waf-form {max-width: 100% !important; }
.wuaps-waf-modal {width: 90vw !important;max-height: calc(100dvh - 32px) !important; }
}
/* ---- Builder preview only (keeps preview 1:1 with generated code) ---- */
.wuaps-waf-preview {position: relative !important;overflow: hidden !important; }
.wuaps-waf-preview .wuaps-waf-floating-wrap {position: absolute !important;bottom: 16px !important;max-width: calc(100% - 24px) !important; }
.wuaps-waf-preview .wuaps-waf-pos-br {right: 16px !important; }
.wuaps-waf-preview .wuaps-waf-pos-bl {left: 16px !important; }
.wuaps-waf-preview .wuaps-waf-overlay {position: absolute !important; }
.wuaps-waf-preview .wuaps-waf-modal {width: min(400px, 92%) !important;max-height: 100% !important; }
.wuaps-waf-root[data-wuaps-waf-preset="elegant"] .wuaps-waf-desc {font-style: italic !important; }
.wuaps-waf-root[data-wuaps-waf-preset="elegant"] .wuaps-waf-header {padding-bottom: 10px !important;border-bottom: 1px solid color-mix(in srgb, var(--wuaps-waf-primary) 16%, transparent) !important; }
</style>
</head>
<body style="margin:0;background:#f5f5f7;">
<header style="background:#0f172a;color:#fff;padding:14px 20px;font:600 15px/1.2 system-ui,sans-serif;">Header de ejemplo · No debe verse afectado</header>
<main style="max-width:820px;margin:40px auto;padding:0 20px;font:14px/1.6 system-ui,sans-serif;color:#333;">
<h1 style="font-size:24px;margin:0 0 12px;">Contáctanos</h1>
<p style="margin:0 0 24px;">Debajo se muestra el formulario generado. El resto de estilos de esta página no deben cambiar.</p>
<div class="wuaps-waf-root" data-wuaps-waf-mode="inline" data-wuaps-waf-size="standard" data-wuaps-waf-width="centered" data-wuaps-waf-preset="elegant">
<form class="wuaps-waf-form" id="wuaps-waf-form" data-wuaps-waf-card="false" novalidate>
<div class="wuaps-waf-header wuaps-waf-align-left">
<h2 class="wuaps-waf-title">Solicita información</h2>
<p class="wuaps-waf-desc">Completa tus datos y te atenderemos directamente por WhatsApp.</p>
</div>
<div class="wuaps-waf-grid">
<div class="wuaps-waf-field wuaps-waf-w-full" data-wuaps-waf-field-id="f_ms6j3gaq_1"><label for="wuaps-waf-nombre" class="wuaps-waf-label">Nombre <span class="wuaps-waf-req" aria-hidden="true">*</span></label><input class="wuaps-waf-input" type="text" id="wuaps-waf-nombre" name="nombre" value="" required /><div class="wuaps-waf-error" id="wuaps-waf-err-nombre" role="alert"></div></div>
<div class="wuaps-waf-field wuaps-waf-w-full" data-wuaps-waf-field-id="f_ms6j3gaq_2"><label for="wuaps-waf-telefono" class="wuaps-waf-label">Teléfono</label><input class="wuaps-waf-input" type="tel" id="wuaps-waf-telefono" name="telefono" value="" inputmode="tel" autocomplete="tel" /><div class="wuaps-waf-error" id="wuaps-waf-err-telefono" role="alert"></div></div>
<div class="wuaps-waf-field wuaps-waf-w-full" data-wuaps-waf-field-id="f_ms6j3gaq_3"><label for="wuaps-waf-motivo_de_contacto" class="wuaps-waf-label">Motivo de contacto <span class="wuaps-waf-req" aria-hidden="true">*</span></label><select class="wuaps-waf-select" id="wuaps-waf-motivo_de_contacto" name="motivo_de_contacto" required><option value="">Selecciona una opción</option><option value="Solicitar información">Solicitar información</option><option value="Pedir una cotización">Pedir una cotización</option><option value="Realizar una reserva">Realizar una reserva</option><option value="Soporte">Soporte</option></select><div class="wuaps-waf-error" id="wuaps-waf-err-motivo_de_contacto" role="alert"></div></div>
<div class="wuaps-waf-field wuaps-waf-w-full" data-wuaps-waf-field-id="f_ms6j3gaq_4"><label for="wuaps-waf-mensaje" class="wuaps-waf-label">Mensaje <span class="wuaps-waf-req" aria-hidden="true">*</span></label><textarea class="wuaps-waf-textarea" id="wuaps-waf-mensaje" name="mensaje" required rows="4"></textarea><div class="wuaps-waf-error" id="wuaps-waf-err-mensaje" role="alert"></div></div>
</div>
<p class="wuaps-waf-privacy">Al enviar este formulario aceptas ser contactado por WhatsApp.</p>
<button type="submit" class="wuaps-waf-submit">Enviar por WhatsApp</button>
</form>
</div>
</main>
<script>
(function(){
var PHONE = '51';
var INITIAL = 'Hola, quiero solicitar información. Estos son mis datos:';
var FINAL = 'Quedo atento a su respuesta. Gracias.';
var FIELDS = [{"id":"f_ms6j3gaq_1","name":"nombre","type":"text","label":"Nombre","required":true,"condition":null},{"id":"f_ms6j3gaq_2","name":"telefono","type":"tel","label":"Teléfono","required":false,"condition":null},{"id":"f_ms6j3gaq_3","name":"motivo_de_contacto","type":"select","label":"Motivo de contacto","required":true,"condition":null},{"id":"f_ms6j3gaq_4","name":"mensaje","type":"textarea","label":"Mensaje","required":true,"condition":null}];
var form = document.getElementById('wuaps-waf-form');
if(!form) return;
function wuapsWafValues(name, multiple){
var els = form.querySelectorAll('[name="'+name+'"]');
if(!els.length) return multiple ? [] : '';
if(multiple || els[0].type === 'checkbox' || els[0].type === 'radio'){
var out = [];
for(var i=0;i<els.length;i++){ if(els[i].checked) out.push(els[i].value); }
if(els[0].type === 'radio') return out[0] || '';
return out;
}
return (els[0].value || '').trim();
}
function wuapsWafVisible(f){
if(!f.condition) return true;
var target = FIELDS.filter(function(x){return x.id === f.condition.fieldId;})[0];
if(!target) return true;
var v = wuapsWafValues(target.name, target.type === 'multiselect' || target.type === 'checkbox');
var strVal = Array.isArray(v) ? v.join(',') : String(v);
var cv = f.condition.value || '';
if(f.condition.op === 'equals') return strVal === cv;
if(f.condition.op === 'not_equals') return strVal !== cv;
if(f.condition.op === 'contains') return strVal.indexOf(cv) !== -1;
return true;
}
function wuapsWafApplyConditions(){
FIELDS.forEach(function(f){
var el = form.querySelector('[data-wuaps-waf-field-id="'+f.id+'"]');
if(!el) return;
if(wuapsWafVisible(f)) el.classList.remove('wuaps-waf-hidden');
else el.classList.add('wuaps-waf-hidden');
});
}
form.addEventListener('input', wuapsWafApplyConditions);
form.addEventListener('change', wuapsWafApplyConditions);
wuapsWafApplyConditions();
function wuapsWafClearErrors(){
var errs = form.querySelectorAll('.wuaps-waf-error');
for(var i=0;i<errs.length;i++) errs[i].textContent='';
}
function wuapsWafSetError(name, msg){
var e = form.querySelector('#wuaps-waf-err-'+name);
if(e) e.textContent = msg;
}
function wuapsWafValidate(){
wuapsWafClearErrors();
var ok = true;
for(var i=0;i<FIELDS.length;i++){
var f = FIELDS[i];
if(!wuapsWafVisible(f)) continue;
var multiple = f.type === 'multiselect' || f.type === 'checkbox';
var v = wuapsWafValues(f.name, multiple);
var empty = multiple ? !v.length : !String(v).trim();
if(f.required && empty){ wuapsWafSetError(f.name, 'Este campo es obligatorio.'); ok = false; continue; }
if(!empty && f.type === 'email'){
if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(v))){ wuapsWafSetError(f.name, 'Correo no válido.'); ok = false; }
}
if(!empty && f.type === 'url'){
try { new URL(String(v)); } catch(_) { wuapsWafSetError(f.name, 'URL no válida.'); ok = false; }
}
}
return ok;
}
function wuapsWafBuildMessage(){
var lines = [];
if(INITIAL) lines.push(INITIAL, '');
for(var i=0;i<FIELDS.length;i++){
var f = FIELDS[i];
if(!wuapsWafVisible(f)) continue;
var multiple = f.type === 'multiselect' || f.type === 'checkbox';
var v = wuapsWafValues(f.name, multiple);
var empty = multiple ? !v.length : !String(v).trim();
if(empty){ if(f.required){ lines.push(f.label + ': —'); } continue; }
if(multiple) lines.push(f.label + ': ' + v.join(', '));
else lines.push(f.label + ': ' + String(v).trim());
}
if(FINAL){ lines.push('', FINAL); }
return lines.join('\n');
}
form.addEventListener('submit', function(ev){
ev.preventDefault();
if(!wuapsWafValidate()) return;
if(!PHONE){ alert('Número de WhatsApp no configurado.'); return; }
var msg = wuapsWafBuildMessage();
var url = 'https://wa.me/' + PHONE + '?text=' + encodeURIComponent(msg);
window.open(url, '_blank', 'noopener,noreferrer');
});
})();
</script>
</body>
</html>Cómo instalarlo
1
Diseña el formulario
Agrega los campos que necesita tu negocio.
2
Copia el código
Obtén una integración lista para usar.
3
Pégalo en tu página
Instálalo y recibe las respuestas directamente por WhatsApp.
Casos de uso
Cotizaciones
Recibe datos completos antes de comenzar una conversación.
Reservas
Organiza fechas, horarios y detalles del cliente.
Pedidos
Envía productos, cantidades y datos de entrega a WhatsApp.
Captación de leads
Recopila información comercial y abre la conversación con contexto.
Preguntas frecuentes
Todo lo que necesitas saber antes de instalarlo.
No. Funciona con cualquier número que tenga WhatsApp activo, personal o Business. La herramienta solo genera un enlace wa.me.
¿Los formularios ya te generan demasiadas conversaciones?
Con Wuaps puedes centralizar los chats, organizar oportunidades, asignar conversaciones a tu equipo y automatizar la atención desde una sola plataforma.