Personalizar un Formulario Embed De Hubspot en Custom Module

Agregar un embed dentro de un módulo personalizado.

Antes de todo debemos udar las librerias de jquery.min.js y jquery.validate.min.js

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js

Agregamos el campo tipo formulario para utilizarlo en el embebido, y personalizar las validaciones de campos.

En este caso se hace una validación a un servicio, el cual devuelve true o false si el correo ya está registrado en Hubspot.


{{ require_js('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js') }}
{{ require_js('https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js') }}
{{ require_js('//js.hsforms.net/forms/embed/v2.js') }}

{%require_js%} 
<script>
    var email_check = false;
    var portalId = "12345";
    var formId = "{{ module.formulario.form_id }}";
    var endpoint = 'https://hubspot.com/';
    var form_page = $("#hsForm_" + formId);
    var email_validate = "";            
    hbspt.forms.create({
      css: "",
      region: "na1",
      portalId: portalId,
      formId: formId,
      
      //configuración de redireccionamiento
      {% if module.formulario.response_type == "inline" %}
      inlineMessage: "{{ module.formulario.message }}",
      {% else %}
        {% if module.formulario.redirect_id == null %}
           redirectUrl: "{{module.formulario.redirect_url}}",
        {% else %}
          {% set my_content = content_by_id(module.formulario.redirect_id) %}
           redirectUrl: "{{ my_content.absolute_url }}",
        {% endif %}      
      {% endif %}
      
      onFormReady: function ($form) {
      var ajaxInProgress = false; // Añade esta variable para controlar si hay una petición en curso

      function validate_hs_email(callback, form) {
      if (ajaxInProgress) {
      alert("Cargando, espere por favor...");
      return;
    }
                       email = $("#hsForm_" + formId + " [name=email]").val();
    if (isValidEmail(email)) {
      ajaxInProgress = true; // Indicar que la petición está en curso
      // Encuentra el botón de envío y crea el elemento de carga
      var submitButton = $form.find(
        'input[type="submit"], button[type="submit"]'
      );
      var loadingElement = document.createElement("span");
      loadingElement.innerHTML = "Cargando...";
      loadingElement.style.marginLeft = "10px";
      // Inserta el elemento de carga después del botón de envío
      submitButton.after(loadingElement);
      $.ajax({
        type: "POST",
        url: endpoint,
        data: { email: email },
        dataType: "json",
        success: function (response) {
          ajaxInProgress = false; // Indicar que la petición ha finalizado
          // Elimina el elemento de carga cuando se complete la petición
          loadingElement.remove();
          callback(response, email, form);
        },
        error: function (xhr, status, error) {
          ajaxInProgress = false; // Indicar que la petición ha finalizado
          // Elimina el elemento de carga cuando se complete la petición
          loadingElement.remove();
          console.log("Error: " + error);
        },
      });
    } else {
      form.submit();
    }
    }
    function validate_message(response, email, form) {
      if (response.success == "true") {
        alert("El correo ya se encuentra registrado.");                    
        email_validate = "";
      } else {
        email_validate = email;
      }
    }
    function validate_submit(response, email, form) {
      if (response.success == "true") {
        alert("El correo ya se encuentra registrado.");                   
        email_validate = "";
      } else {
        email_validate = email;
        form.submit();
      }
    }
    $("#hsForm_" + formId + " [name=email]").change(
      "input",
      function () {
        validate_hs_email(validate_message);
      }
    );

    function isValidEmail(email) {
      var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (emailRegex.test(email)) {
        return true;
      } else {
        return false;
      }
    }
    $form.validate({
      errorPlacement: function (error, element) {},
      submitHandler: function (form, e) {
        console.log(form);
        e.preventDefault();
        var email = $("#hsForm_" + formId + " [name=email]").val();
        console.log(email_validate + "--" + email);
        validate_hs_email(validate_submit, form);
      },
    });
    },
    });
  </script>
  {%end_require_js%} 

Guía Práctica para Personalizar Formularios de HubSpot Usando JavaScrip.

window.addEventListener('message', event => {
    // Verificar si el mensaje es un callback de un formulario y corresponde al formulario deseado
    if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady' && event.data.id === '{{ module.form_cotizar.form_id }}') {
      console.log("Form Ready!");

      // Función para validar el número de cédula
      var validarCedula = function(cedula) {
        // Asegurarse de que la cédula tenga 10 dígitos
        if (cedula.length === 10) {
          
          // Obtener los dos primeros dígitos y validar si corresponden a una región válida
          var digitoRegion = parseInt(cedula.substring(0, 2));
          if (digitoRegion >= 1 && digitoRegion <= 24) {
            // Extraer el último dígito para la verificación posterior
            var ultimoDigito = parseInt(cedula.substring(9, 10));

            // Sumar los dígitos en posiciones pares
            var sumaPares = 0;
            for (var i = 1; i < 9; i += 2) {
              sumaPares += parseInt(cedula.substring(i, i + 1));
            }

            // Sumar los dígitos en posiciones impares después de duplicarlos y ajustar si es necesario
            var sumaImpares = 0;
            for (var i = 0; i < 9; i += 2) {
              var numero = parseInt(cedula.substring(i, i + 1)) * 2;
              if (numero > 9) {
                numero -= 9;
              }
              sumaImpares += numero;
            }

            // Calcular la suma total y obtener su primer dígito
            var sumaTotal = sumaPares + sumaImpares;
            var primerDigitoSuma = parseInt(String(sumaTotal).substring(0, 1));

            // Obtener la decena superior más cercana a la suma total
            var decenaInmediata = (primerDigitoSuma + 1) * 10;

            // Determinar el dígito verificador
            var digitoVerificador = (decenaInmediata - sumaTotal) % 10;

            // Comparar el dígito verificador con el último dígito de la cédula
            if (digitoVerificador === ultimoDigito) {
              return { IsValid: true, msg: "La cédula es válida." };
            } else {
              return { IsValid: false, msg: "La cédula es inválida." };
            }
          } else {
            return { IsValid: false, msg: "La cédula es inválida. Los dos primeros dígitos no corresponden a una región válida." };
          }
        } else {
          return { IsValid: false, msg: "La cédula es inválida. Debe tener 10 dígitos." };
        }
      }

      var formIdSel = event.data.id;

      // Agregar un escuchador de eventos al botón de envío del formulario
      document.querySelector("[type='submit']").addEventListener("click", function(event) {         
        // Obtener el valor de la cédula del formulario
        var cedula = document.querySelector("[name='identificacion']").value;
        console.log(cedula);
        var myOut = validarCedula(cedula);

        // Validar la cédula y mostrar un mensaje de error si es inválida
        if(!myOut.IsValid){
          var formEl = document.querySelector("[data-form-id='" + formIdSel + "']");
          var errorMessage = "Por favor, introduce una cédula válida";

          // Asegurarse de no duplicar el mensaje de error
          if(formEl.lastChild.nodeType != 3)
            formEl.append(myOut.msg);

          event.preventDefault();
        }

      }, false);
    }
});
 

Cómo Transferir Parámetros UTM desde la URL Directamente a un Formulario Web.


Ejemplo:
https://midominio.com?utm_1=valor_utm_1&utm_2=valor_utm_2

<script charset="utf-8" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>

<script>
// Función para obtener parámetros de la URL.
function obtenerParametrosURL() {
  var url = window.location.href;
  var parametros = {};
  var partes = url.split("?");

  // Si la URL contiene parámetros, los procesa y los almacena en un objeto.
  if (partes.length > 1) {
    var parametrosArray = partes[1].split("&");
    for (var i = 0; i < parametrosArray.length; i++) {
      var parametro = parametrosArray[i].split("=");
      parametros[parametro[0]] = decodeURIComponent(parametro[1]);
    }
  }
  return parametros;
}

var parametrosURL = obtenerParametrosURL();
var portalId = "INGRESA_EL_ID_DEL_PORTAL"; 
var formId = "{{ module.fomulario.form_id }}";

// Creación y configuración del formulario de HubSpot.
hbspt.forms.create({
  css: "",
  region: "na1",
  portalId: portalId,
  formId: formId,
  
  // Configuración de redireccionamiento o mensaje en línea según la configuración del módulo.
  {% if module.fomulario.response_type == "inline" %}
    inlineMessage: "{{ module.fomulario.message }}",
  {% else %}
    {% if module.fomulario.redirect_id == null %}
      redirectUrl: "{{module.fomulario.redirect_url}}",
    {% else %}
      {% set my_content = content_by_id(module.fomulario.redirect_id) %}
      redirectUrl: "{{ my_content.absolute_url }}",
    {% endif %}      
  {% endif %},
  
  // Función que se ejecuta cuando el formulario está listo.
  onFormReady: function($form) {
    // Asignación de parámetros UTM a campos ocultos en el formulario.
    $("#hsForm_" + formId + " [name=utm_1]").val(parametrosURL["utm_1"]);
    $("#hsForm_" + formId + " [name=utm_2]").val(parametrosURL["utm_2"]);
  
  }
});

</script> 

Artículos Recientes