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.

<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> 

Artículos Recientes