Formulario de contacto para WhatsApp

  • Autor Autor jcfernandez
  • Fecha de inicio Fecha de inicio
jcfernandez

jcfernandez

Gamma
Verificación en dos pasos activada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola amigos, expertos en la web, genios iluminados por cristo, les quiero hacer una pregunta, saber si conocen algún plugin que me genere un formulario de contacto donde el usuario ingrese sus datos, como nombre, edad, dirección, teléfono y al hacer clic en enviar no envíe un email sino que abra WhatsApp, y esos datos se escriban por automático en el whatssap y solo haga clic en enviar y llegue al WhatsApp del vendedor o webmaster, ese plugin lo vi para wooocomerce, no me acuerdo el nombré, pero lo vi, pero yo no quiero para WooCommerce. Quien me pasa el dato amiguitos, ustedes son bakanes, son los mejores.

No quiero un botón flotante, aunque igual déjenmelo podría ser por ultimo, pero que sean gratuitos por favor, pero mejor si es un formulario así clásico pero con esa función, de enviar a WhatsApp y te lleva a WHATSAPP arrastrando todos los datos que escribiese.

Aqui dejo una foto de un personaje que cree con IA para que se deleiten es mi gratitud.
 

Adjuntos

  • 354.webp
    354.webp
    123,8 KB · Visitas: 48
Me uno a la pregunta 🙋
 
Frcruter dijo:

Cómo usar la función de clic para chatear | Servicio de ayuda de WhatsApp

faq.whatsapp.com faq.whatsapp.com
Hacer clic para expandir...
Justamente aquí te está dando la idea.

Puedes usar el formulario que se te hago cómodo al día de hoy, creo que los formularios de WordPress hace cosas avanzadas.

Yo en mis proyectos uso jetformbuilder, no tengo necesidad de otro. Así que intentaré explicarte la base de lo que necesitas, también recomiendo el uso de alguna IA, deepseek y claude va genial para preguntas extensas y técnicas.

Con jetformbuilder existen los campos ocultos (Hidden Field) aquí la documentación: https://jetformbuilder.com/features/hidden-field/

El chiste es que el usuario al darle al botón "enviar" te haga una redirección al WhatsApp (o así lo resolvería yo) me baso en la documentación de WhatsApp y le añado los campos del formulario, quedaría algo así:

Insertar CODE, HTML o PHP: 
https://wa.me/send?phone=TUNUMERO&text=Nombre: %field::CAMPODELFORMULARIONOMBRE%

En el caso de la redirección aquí la documentación: https://jetformbuilder.com/features/redirect-to-page/
Le indico que va a redirigir a la web del campo oculto, es decir, al WhatsApp 🙃

Toda la documentación de Jetformbuilder: https://jetformbuilder.com/features/overview/


UPDATE:

Pensando en este falso positivo:
jcfernandez dijo:
esos datos que escribió se envié al WhatsApp una forma de contacto más directo más rápido.
Hacer clic para expandir...

Otra opción es que al llenar un formulario también se envíe al WhatsApp con Make.

Make: https://www.make.com
Jetformbuilder se puede integrar con make: https://jetformbuilder.com/blog/using-make-with-jetformbuilder/
WhatsApp para empresa en make: https://www.make.com/en/integrations/whatsapp-business-cloud

Mientras menos paso hace un usuario para llegar a algo de tu sitio mejor.

En la solución que te di tiene el siguiente flujo:

El usuario llena el formulario > presiona el botón enviar > le sale otra página donde tiene que contactar por WhatsApp > espera tu respuesta

Si es solo el formulario con o sin make:

El usuario llena el formulario > presiona enviar > espera tu respuesta

Si colocas un plugin que de botón flotante:

el usuario da clic> escribe su consulta > espera respuesta

Espero todo esto te sirva.
 
Última edición:
Sin usar plugin, se puede poner el formulario usando html y js, (code html block si usas bloques/visual builder)

Si lo pondrás en diferentes lugares y le cambiaras textos/cosas con el tiempo, si te conviene un plugin de formulario como dice adolfohnz.


HTML: 
<form id="contactForm" style="max-width: 400px; margin: 0 auto; font-family: Arial, sans-serif;">
    <div style="margin-bottom: 15px;">
        <label for="name" style="display: block; margin-bottom: 5px;">Nombre:</label>
        <input type="text" id="name" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
    </div>

    <div style="margin-bottom: 15px;">
        <label for="age" style="display: block; margin-bottom: 5px;">Edad:</label>
        <input type="number" id="age" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
    </div>

    <div style="margin-bottom: 15px;">
        <label for="address" style="display: block; margin-bottom: 5px;">Dirección:</label>
        <input type="text" id="address" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
    </div>

    <div style="margin-bottom: 15px;">
        <label for="phone" style="display: block; margin-bottom: 5px;">Teléfono:</label>
        <input type="tel" id="phone" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
    </div>

    <button type="button" onclick="sendToWhatsApp()" style="width: 100%; padding: 10px; background-color: #25D366; color: white; border: none; border-radius: 4px; cursor: pointer;">Enviar por WhatsApp</button>
</form>

<script>
function isMobile() {
    return ('maxTouchPoints' in navigator && navigator.maxTouchPoints > 0) ||
           matchMedia('(pointer:coarse)').matches ||
           'orientation' in window ||
           /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

function sendToWhatsApp() {
    const name = document.getElementById("name").value;
    const age = document.getElementById("age").value;
    const address = document.getElementById("address").value;
    const phone = document.getElementById("phone").value;

    if (!name || !age || !address || !phone) {
        alert("Por favor, completa todos los campos.");
        return;
    }

    //Remplazar por un numero real
    const number = "5493425000000";
    const message = `Hola, me llamo *${name}*, tengo *${age}* años. Mi dirección es *${address}* y mi teléfono es *${phone}*.`;
    //tal vez usar wa.me directamente
    const url = `https://${isMobile() ? "api" : "web"}.whatsapp.com/send?phone=${number}&text=${encodeURIComponent(message)}`;

    window.open(url, "_blank");
}
</script>
 
Última edición:
Yo trabajo con elementor en todos los sitios webs de mis clientes, es más sencillo usar el elementor form y un plugin extra que se llama extensions for elementor que te permite agregar la acción de enviar a whatsapp como tu dices.
 
Hola, desde tochat.be puedes crear este tipo de formularios de forma ilimitada.
El formulario se incrusta fácilmente en tu página web (da igual el CMS que uses - wordpress, drupal, webflow, etc... ) y te permite capturar los leads, van a WhatsApp, enviamos un email de aviso y tenemos un CRM con webhooks. Creo que es una buena opción.

Aquí les dejo un vídeo.


Espero que les ayude. Cualquier duda, por favor, avisen que damos soporte.
 
No conozco ninguno funcional como dices, supongo es para WordPress, yo hice un script en Javascript, lo pongo en el footer del tema y detecta si está en la página correcta, si está el formulario y anexa un botón "enviar por Whatsapp", construye el mensaje con concatentando los campos y abre el WhatsApp (web o app) con el teléfono a dónde queramos enviar y listo, el usuario solo tiene que presionar el botón de enviar
 
Frcruter dijo:
Sin usar plugin, se puede poner el formulario usando html y js, (code html block si usas bloques/visual builder)

Si lo pondrás en diferentes lugares y le cambiaras textos/cosas con el tiempo, si te conviene un plugin de formulario como dice adolfohnz.


HTML: 
<form id="contactForm" style="max-width: 400px; margin: 0 auto; font-family: Arial, sans-serif;">
    <div style="margin-bottom: 15px;">
        <label for="name" style="display: block; margin-bottom: 5px;">Nombre:</label>
        <input type="text" id="name" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
    </div>

    <div style="margin-bottom: 15px;">
        <label for="age" style="display: block; margin-bottom: 5px;">Edad:</label>
        <input type="number" id="age" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
    </div>

    <div style="margin-bottom: 15px;">
        <label for="address" style="display: block; margin-bottom: 5px;">Dirección:</label>
        <input type="text" id="address" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
    </div>

    <div style="margin-bottom: 15px;">
        <label for="phone" style="display: block; margin-bottom: 5px;">Teléfono:</label>
        <input type="tel" id="phone" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
    </div>

    <button type="button" onclick="sendToWhatsApp()" style="width: 100%; padding: 10px; background-color: #25D366; color: white; border: none; border-radius: 4px; cursor: pointer;">Enviar por WhatsApp</button>
</form>

<script>
function isMobile() {
    return ('maxTouchPoints' in navigator && navigator.maxTouchPoints > 0) ||
           matchMedia('(pointer:coarse)').matches ||
           'orientation' in window ||
           /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

function sendToWhatsApp() {
    const name = document.getElementById("name").value;
    const age = document.getElementById("age").value;
    const address = document.getElementById("address").value;
    const phone = document.getElementById("phone").value;

    if (!name || !age || !address || !phone) {
        alert("Por favor, completa todos los campos.");
        return;
    }

    //Remplazar por un numero real
    const number = "5493425000000";
    const message = `Hola, me llamo *${name}*, tengo *${age}* años. Mi dirección es *${address}* y mi teléfono es *${phone}*.`;
    //tal vez usar wa.me directamente
    const url = `https://${isMobile() ? "api" : "web"}.whatsapp.com/send?phone=${number}&text=${encodeURIComponent(message)}`;

    window.open(url, "_blank");
}
</script>
Hacer clic para expandir...
Jejeje, yo hago lo mismo con mis webs
 
Si queréis una solución más visual, flexible, con validaciones, os recomiendo lo nuestro 🙂 tochat.be


Lo nuestro tiene webhooks, validaciones, tracking para google ads, facebook ads, etc...
Entiendo que si todo esto no es relevante, no pasa nada, pero generar leads es casi la función más importante de una web. 🙂

Saludos!!
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

Ramnsés Rojas
Se puede usar formulario como Contact Form en html?
Respuestas
4
Visitas
44
WebowAgency
WebowAgency
K Johnson
Tutorial: FORMULARIO de CONTACTO en Blogger | Como Agregarlo Paso a Paso
Respuestas
0
Visitas
27
K Johnson
K Johnson
A
Formulario de contacto alternativo sin enlace a Stripe
Respuestas
5
Visitas
88
adolfohnz
adolfohnz
jcduranm
Tutorial: Formulario de contacto flotante de WhatsApp
Respuestas
1
Visitas
219
elnazadsm
elnazadsm
javiadrados24
Mejores opciones para formulario de contacto sin spam
Respuestas
9
Visitas
218
marjuanm
marjuanm
Atrás
Arriba