Tutorial: Formulario de contacto flotante de WhatsApp

jcduranm · 1 Mar 2024

El tutorial consiste en colocar un formulario de contacto de WhatsApp con una apariencia flotante en la parte inferior del blog con un botón de WhatsApp.
Para ver la demostración, pueden hacer clic en el botón de abajo. Si están interesados en instalarlo, pueden seguir los siguientes pasos.

Paso #1: Abre Blogger > Diseño > Agregar gadget.

Paso #2: Selecciona Widget HTML/Javascript.

Paso #3: Luego, copia y pega el siguiente código HTML.

HTML:

<!--[ Formulario de Contacto de WhatsApp ]-->
<div class='nav-whatsapp'>
  <div class='wrapperWA'>
    <div class='wrapperWA-header'>
      <h2>Chat de WhatsApp</h2>
      <div class='closeWA'>
        <svg class='h-6 w-6' fill='none' stroke='#f40000' viewbox='0 0 24 24'><path d='M6 18L18 6M6 6l12 12' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'></path></svg>
      </div>
    </div>
    <div class='form-container' id='waform-IT'>
      <div class='formC'>
        <div class='Fcontrol'>
          <input class='cName' id='cName' name='name' required='required' type='text'>
          <span class='nameC'>Nombre</span>
          <span class='valid' id='error_name'></span>
        </div>
        <div class='Fcontrol'>
          <input class='cEmail' id='cEmail' name='email' required='required' type='email'>
          <span class='emailC'>Correo electrónico</span>
          <span class='valid' id='error_email'></span>
        </div>
      </div>
      <div class='formC'>
        <div class='Fcontrol'>
          <select class='cSubject' id='cSubject'>
            <option value='Ayuda'>Ayuda</option>
            <option value='Pregunta'>Pregunta</option>
            <option value='Colaboración'>Colaboración</option>
          </select> <span class='subjectC'>Seleccionar asunto</span>
        </div>
        <div class='Fcontrol'>
          <textarea class='cMessage' id='cMessage' name='message' required='required'></textarea>
          <span class='messageC'>Mensaje</span>
          <span class='valid' id='error_message'></span>
        </div>
      </div>
      <div class='formB'>
        <a class='whatsapp-send' onclick='sendToWhatsApp()'><svg viewbox='0 0 32 32'>
        <path d='M16 2a13 13 0 0 0-8 23.23V29a1 1 0 0 0 .51.87A1 1 0 0 0 9 30a1 1 0 0 0 .51-.14l3.65-2.19A12.64 12.64 0 0 0 16 28a13 13 0 0 0 0-26Zm0 24a11.13 11.13 0 0 1-2.76-.36 1 1 0 0 0-.76.11L10 27.23v-2.5a1 1 0 0 0-.42-.81A11 11 0 1 1 16 26Z'></path><path d='M19.86 15.18a1.9 1.9 0 0 0-2.64 0l-.09.09-1.4-1.4.09-.09a1.86 1.86 0 0 0 0-2.64l-1.59-1.59a1.9 1.9 0 0 0-2.64 0l-.8.79a3.56 3.56 0 0 0-.5 3.76 10.64 10.64 0 0 0 2.62 4 8.7 8.7 0 0 0 5.65 2.9 2.92 2.92 0 0 0 2.1-.79l.79-.8a1.86 1.86 0 0 0 0-2.64Zm-.62 3.61c-.57.58-2.78 0-4.92-2.11a8.88 8.88 0 0 1-2.13-3.21c-.26-.79-.25-1.44 0-1.71l.7-.7 1.4 1.4-.7.7a1 1 0 0 0 0 1.41l2.82 2.82a1 1 0 0 0 1.41 0l.7-.7 1.4 1.4Z'></path></svg>Enviar por WhatsApp</a>
      </div>
    </div>
  </div>
  <div class='whatsapp-float'>
    <div class='whatsapp-icon'>
      <svg viewbox='0 0 512 512'><path d='M414.73 97.1A222.14 222.14 0 0 0 256.94 32C134 32 33.92 131.58 33.87 254a220.61 220.61 0 0 0 29.78 111L32 480l118.25-30.87a223.63 223.63 0 0 0 106.6 27h.09c122.93 0 223-99.59 223.06-222A220.18 220.18 0 0 0 414.73 97.1zM256.94 438.66h-.08a185.75 185.75 0 0 1-94.36-25.72l-6.77-4-70.17 18.32 18.73-68.09-4.41-7A183.46 183.46 0 0 1 71.53 254c0-101.73 83.21-184.5 185.48-184.5a185 185 0 0 1 185.33 184.64c-.04 101.74-83.21 184.52-185.4 184.52zm101.69-138.19c-5.57-2.78-33-16.2-38.08-18.05s-8.83-2.78-12.54 2.78-14.4 18-17.65 21.75-6.5 4.16-12.07 1.38-23.54-8.63-44.83-27.53c-16.57-14.71-27.75-32.87-31-38.42s-.35-8.56 2.44-11.32c2.51-2.49 5.57-6.48 8.36-9.72s3.72-5.56 5.57-9.26.93-6.94-.46-9.71-12.54-30.08-17.18-41.19c-4.53-10.82-9.12-9.35-12.54-9.52-3.25-.16-7-.2-10.69-.2a20.53 20.53 0 0 0-14.86 6.94c-5.11 5.56-19.51 19-19.51 46.28s20 53.68 22.76 57.38 39.3 59.73 95.21 83.76a323.11 323.11 0 0 0 31.78 11.68c13.35 4.22 25.5 3.63 35.1 2.2 10.71-1.59 33-13.42 37.63-26.38s4.64-24.06 3.25-26.37-5.11-3.71-10.69-6.48z'></path></svg>
    </div>
    <span class="whatsapp-text">¿Quieres hablar con nosotros?</span>
  </div>
</div>

Paso #4: Una vez hecho, haz clic en GUARDAR.

El siguiente paso es instalar el CSS y el script para activar la función del formulario de contacto flotante de WhatsApp.

Paso #6: En el panel de Blogger, abre el menú Tema > Editar HTML.

Paso #7: Busca ]]></b:skin> o </style>, luego copia y coloca el siguiente CSS justo encima de ese código.

CSS:

 /* Formulario de Contacto flotante de WhatsApp */
  .nav-whatsapp {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    padding: 12px 0;
}

.nav-whatsapp.active .wrapperWA {
    opacity: 1;
    visibility: visible;
    width: 400px;
    height: auto;
    z-index: 6;
    display: block;
}

.nav-whatsapp.active .whatsapp-float {
    opacity: 0;
    visibility: hidden;
}

.wrapperWA {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 60px;
    padding: 25px;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease;
    height: 60px;
    margin: 12px 0;
    background: #ffffff29;
    display: none;
}

.wrapperWA-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    justify-content: center;
    position: relative;
}

.wrapperWA-header h2 {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #fff;
    font-size: 1rem;
    flex: 1 1 auto;
    margin: 0;
}

.wrapperWA-header .closeWA svg {
    width: 20px;
    height: 20px;
    float: right;
}

.form-container .formC:nth-child(1) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(45%, 1fr));
    gap: 1rem;
    --gap: 1rem;
}

.form-container .formC:nth-child(2) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
}

.form-container .formC .Fcontrol {
    position: relative;
}

.form-container .formC .Fcontrol input:focus,
.form-container .formC .Fcontrol textarea:focus {
    border-color: #4caf50;
}

.Fcontrol input[type=&quot;text&quot;],
.Fcontrol input[type=&quot;email&quot;],
.Fcontrol .cSubject,
.Fcontrol textarea {
    width: 100%;
    height: calc(3.5rem + calc(1px * 2));
    padding: .375rem 2.25rem .375rem .75rem;
    padding-top: 1.625rem;
    border-radius: 5px;
    margin-bottom: 15px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    background: #212529;
}

.Fcontrol textarea {
    height: 100px;
}

.Fcontrol input:focus ~ .nameC,
.Fcontrol input:focus ~ .emailC,
.Fcontrol textarea:focus ~ .messageC {
    top: -5px;
}

.Fcontrol input[type=&quot;text&quot;],
.Fcontrol input[type=&quot;email&quot;],
.Fcontrol textarea {
    padding: .75rem;
    padding-top: 1.625rem;
}

.Fcontrol .nameC,
.Fcontrol .emailC,
.Fcontrol .subjectC,
.Fcontrol .messageC {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    height: auto;
    padding: 1rem .75rem;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
    transform-origin: 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    white-space: nowrap;
    color: rgb(255 255 255);
    transition: 0.1s ease;
}

.formC .Fcontrol .cSubject {
    display: block;
    background: url(&quot;data:image/svg+xml,%3csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 16 16&#39;%3e%3cpath fill=&#39;none&#39; stroke=&#39;%23343a40&#39; stroke-linecap=&#39;round&#39; stroke-linejoin=&#39;round&#39; stroke-width=&#39;2&#39; d=&#39;m2 5 6 6 6-6&#39;/%3e%3c/svg%3e&quot;) no-repeat right .75rem center/16px 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  background: #212529;
}

.valid[data-text]:before {
    position: absolute;
    bottom: 100%;
    left: 12px;
    content: &quot;&quot;;
    border: 8px solid;
    border-color: transparent transparent #810202 transparent;
    top: calc(100% - 21px);
}

.valid[data-text]:after,
.valid[data-text]:before {
    opacity: 1;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 3;
}

.valid[data-text]:after {
    content: attr(data-text);
    position: absolute;
    background: #810202;
    left: 0;
    top: calc(100% - 5px);
    font-size: 12px;
    padding: 5px;
    box-shadow: 0 5px 10px rgb(0 0 0 / 8%);
    border-radius: 5px;
}

.show#cName ~ .valid:after,
.show#cEmail ~ .valid:after,
.show#cMessage ~ .valid:after,
.show#cName ~ .valid[data-text]:before,
.show#cEmail ~ .valid[data-text]:before,
.show#cMessage ~ .valid[data-text]:before {
    opacity: 0;
}

.none#cName ~ .valid:after,
.none#cEmail ~ .valid:after,
.none#cMessage ~ .valid:after,
.none#cName ~ .valid[data-text]:before,
.none#cEmail ~ .valid[data-text]:before,
.none#cMessage ~ .valid[data-text]:before {
    opacity: 1;
}

.whatsapp-send {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 10px 20px;
    background-color: #4caf50;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 12px;
    border-radius: 4px;
    transition: background-color 0.3s;
    cursor: default;
    height: auto;
    width: auto;
}

.whatsapp-send svg {
    fill: #fff;
    width: 22px;
    height: 22px;
}

.whatsapp-send:hover {
    background-color: #45a049;
}

.whatsapp-float {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: .2rem;
}

.whatsapp-float .whatsapp-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #4CAF50;
    display: flex;
    justify-content: center;
    align-items: center;
    animation-name: waAnimation;
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}

@keyframes waAnimation {
    0% {
        box-shadow: 0 0 0 0 rgba(74, 175, 80, 0.5);
    }
    80% {
        box-shadow: 0 0 0 14px rgba(74, 175, 80, 0);
    }
}

.whatsapp-float .whatsapp-icon svg {
    fill: #fff;
    width: 30px;
    height: 30px;
}

select:focus {
    outline: none;
}

select::-ms-expand {
    display: none;
}

@media screen and (max-width: 620px) {
    .formC:nth-child(1) {
        gap: 0;
    }
    .nav-whatsapp.active .wrapperWA {
        width: auto;
        height: auto;
        right: 0;
        left: 0;
        bottom: 0;
        top: auto;
        margin: 0;
        transition: all .3s ease;
    }
    .form-container .formC:nth-child(1) {
        grid-template-columns: auto;
        gap: 0;
    }
}

.drK .wrapperWA {
    background: #000;
}

.drK .Fcontrol input[type=&quot;text&quot;],
.drK .Fcontrol input[type=&quot;email&quot;],
.drK .Fcontrol .cSubject,
.drK .Fcontrol textarea {
    background: #272b2d;
}

.drK .wrapperWA-header h2,
.drK .Fcontrol .nameC,
.drK .Fcontrol .emailC,
.drK .Fcontrol .subjectC,
.drK .Fcontrol .messageC {
    color: #000;
}

Paso #8: Por último, coloca el siguiente JavaScript justo encima del código </body>

HTML:

<script>
//<![CDATA[
// Formulario de contacto flotante de WhatsApp

var menuToggle = document.querySelector(".whatsapp-float"),
    wrapperMenu = document.querySelector(".nav-whatsapp"),
    closeWA = document.querySelector(".closeWA");
var inputs = document.querySelectorAll('.Fcontrol input[type=text], .Fcontrol input[type=email], .Fcontrol textarea');

menuToggle.onclick = function() {
    wrapperMenu.classList.toggle('active');
}
closeWA.onclick = function() {
    wrapperMenu.classList.remove('active');
};

for (var i = 0; i < inputs.length; i++) {
    var input = inputs[i];
    input.addEventListener('input', function() {
        var bg = this.value ? 'show' : 'none';
        this.setAttribute('class', bg);
    });
}

function sendToWhatsApp() {
    var name = document.getElementById("cName").value;
    var email = document.getElementById("cEmail").value;
    var subject = document.getElementById("cSubject").value;
    var message = document.getElementById("cMessage").value;
    var postLink = window.location.href;
    var error_name = document.getElementById("error_name"),
        error_email = document.getElementById("error_email"),
        error_message = document.getElementById("error_message");
    var text;
    if (name == "") {
        text = 'Por favor ingrese su nombre';
        error_name.setAttribute('data-text', text);
        return false;
    }
    if (email.indexOf("@") == -1 || email.length < 6) {
        text = 'Por favor ingrese un correo electrónico válido';
        error_email.setAttribute('data-text', text);
        return false;
    }
    if (message == "") {
        text = 'Por favor ingrese su mensaje';
        error_message.setAttribute('data-text', text);
        return false;
    }
    var whatsappMessage = "Nuevo mensaje de " + name + "\n\n";
    whatsappMessage += "*Nombre:* " + name + "\n";
    whatsappMessage += "*Email:* " + email + "\n";
    whatsappMessage += "*Asunto:* " + subject + "\n";
    whatsappMessage += "*Mensaje:* " + message + "\n\n";
    whatsappMessage += "=============================" + "\n";
    whatsappMessage += "*Formulario:* " + postLink + "\n";
    whatsappMessage += "=============================";

    var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
    var whatsappLink = isMobile ? 'https://api.whatsapp.com/send' : 'https://web.whatsapp.com/send';

    var phoneNumber = '528361093...'; // Ajusta este número a tu número de WhatsApp
    var encodedMessage = encodeURIComponent(whatsappMessage);
    var finalWhatsappUrl = whatsappLink + "?phone=" + phoneNumber + "&text=" + encodedMessage;
    window.open(finalWhatsappUrl, '_blank');
    return true;
}
//]]></script>

Ajusta el número de WhatsApp con tu propio número de WhatsApp.

Paso #9: Una vez que hayas completado todo, ahora haz clic en GUARDAR

elnazadsm · 9 Mar 2024

excelente gracias por el aporte, yo utilizo mucho Blogger últimamente y esto me viene genial para mis proyectos, saludos..

Tutorial: Formulario de contacto flotante de WhatsApp

jcduranm Seguir Seguidores 5

elnazadsm

jcduranm Seguir

Seguidores

5