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
- https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js
- 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>