label { display: block; font-weight: 500; margin-bottom: 4px; font-family: questrial, Helvetica, Arial, sans-serif; } input, select, textarea { width: 100%; font-family: questrial, Helvetica, Arial, sans-serif; border-radius: 4px; background-clip: padding-box; padding: 10px 15px; border: 1px solid #ccc; margin-bottom: 16px; display: inline-block; height: 40px; font-size: 16px; font-weight: 400; line-height: 22px; color: #33475b; background-color: #f5f8fa; border: 1px solid #959494; box-sizing: border-box; } textarea { height: auto; } .form-row { display: flex; gap: 10px; margin-bottom: 16px; } .form-row .form-group { flex: 1; } .form-row .form-group.full-width { flex: 0 0 100%; } .container { background-color: #fff; padding: 20px; border-radius: 8px; margin: auto; max-width: 100%; } button:hover { background-color: #356211; } .phone-container { display: flex; align-items: center; gap: 10px; } .phone-container select { flex: 0 0 30%; } .phone-container input { flex: 1; text-align: left; } .error, .success { color: red; margin-bottom: 16px; font-family: questrial, Helvetica, Arial, sans-serif; } .error { color: #e51520; } .success { color: #4CAF50; } .required { color: #e51520; } button { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; margin: 0; cursor: pointer; display: inline-block; font-weight: 700; line-height: 12px; position: relative; text-align: center; background-color: #59942a; border: 1px solid #59942a; color: #fff; border-radius: 3px; font-size: 18px; padding: 24px; width: 100%; padding: 10px; } .message { padding: 10px; border-radius: 5px; margin-bottom: 20px; display: none; } .message.error { background-color: #fdd; border: 1px solid #f99; } .message.success { background-color: #dfd; border: 1px solid #9f9; } button:disabled { background-color: #ccc; /* Color de fondo más claro */ color: #666; /* Color del texto más claro */ cursor: not-allowed; /* Cambia el cursor */ opacity: 0.7; /* Reduce la opacidad */ } .consentimiento { font-size: 14px; } input[type="checkbox"] { height: auto; margin: 0; display: inline-block; margin-right: 5px; width: 15px !important; } /* NUEVAS REGLAS ANTI-SPAM */ /* 1. Ocultar el formulario por defecto y mostrarlo solo con JavaScript */ .container { display: none; } .js-enabled .container { display: block; /* antes: flex */ } /* 2. Mensaje para usuarios sin JavaScript */ .no-js-message { text-align: center; padding: 30px; background: #f8f9fa; border-radius: 10px; color: #666; font-family: questrial, Helvetica, Arial, sans-serif; max-width: 600px; margin: 50px auto; } .js-enabled .no-js-message { display: none; } /* 3. Campo honeypot (invisible para usuarios reales) */ .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } $(document).ready(function () { // ========== MEDIDAS ANTI-SPAM ========== // 1. Marcar que JavaScript está habilitado document.body.classList.add('js-enabled'); $('#js_enabled').val('true'); const $cf_1306CodeSelect = $('#cf_1306Code'); const $mobileInput = $('#mobile'); const $fullPhoneNumberInput = $('#fullPhoneNumber'); const $phoneError = $('#phoneError'); const $formErrors = $('#formErrors'); const $formSuccess = $('#formSuccess'); const $form = $('#__vtigerWebForm'); const $ip = $('#cf_1411'); const $referidor = $('#cf_1413'); const $submitButton = $form.find('button[type="submit"]'); const $consentimientoCheckbox = $('#consentimiento'); const document_referidor = document.referrer; $referidor.val(document_referidor); $form.attr('action', 'https://crm.mijaltech.com/modules/Webforms/capture.php'); $('#__vtigerWebForm input[name="publicid"]').val('b1f5cfa36f732deae6583d147ba6d50f'); // Estado del CAPTCHA y callbacks globales let captchaAuthorized = false; window.enableSubmitBtn = function () { captchaAuthorized = true; $formErrors.hide(); }; window.onCaptchaExpired = function () { captchaAuthorized = false; $formErrors .html("El CAPTCHA ha expirado. Por favor, vuelve a completarlo.") .show(); $formSuccess.hide(); }; window.onCaptchaError = function () { captchaAuthorized = false; $formErrors .html("No se pudo verificar el CAPTCHA. Intente nuevamente.") .show(); $formSuccess.hide(); }; function updatePhoneNumber() { const code = $cf_1306CodeSelect.val(); const number = $mobileInput.val().replace(/^\+\d+/, ''); $fullPhoneNumberInput.val(code + number); } function validatePhoneNumber() { const number = $mobileInput.val(); const pattern = /^\d{10,15}$/; if (number && !pattern.test(number)) { $phoneError.show(); } else { $phoneError.hide(); } } function validateRequiredFields() { const errors = []; $('[required]').each(function () { if (!$.trim($(this).val())) { errors.push(`${$(this).prev('label').text().trim()} es obligatorio.`); } }); return errors; } async function obtenerIP() { try { const respuesta = await fetch('https://api.ipify.org?format=json'); const datos = await respuesta.json(); const ip = datos.ip; $ip.val(ip); } catch (error) { console.error('Error al obtener la IP:', error); } } obtenerIP(); $cf_1306CodeSelect.on('change', updatePhoneNumber); $mobileInput.on('input', function () { updatePhoneNumber(); validatePhoneNumber(); }); function validateConsentimiento() { if (!$consentimientoCheckbox.is(':checked')) { return 'Debe aceptar el Aviso de Privacidad y condiciones.'; } return ''; } // ========== VALIDACIONES ANTI-SPAM ========== function validateAntiSpam() { const errors = []; // 1. Verificar honeypot const honeypot = $('input[name="website"]').val(); if (honeypot && honeypot.trim() !== '') { errors.push('Detección de bot automático.'); return errors; } // 2. Verificar que JavaScript esté habilitado if ($('#js_enabled').val() !== 'true') { errors.push('JavaScript es requerido para enviar este formulario.'); } return errors; } // Spinner/estado de carga en el botón de envío function setLoading(isLoading) { if (isLoading) { if (!$submitButton.data("original-html")) { $submitButton.data("original-html", $submitButton.html()); } const spinnerSvg = ''; $submitButton .html(spinnerSvg + "Enviando datos...") .prop("disabled", true); } else { const original = $submitButton.data("original-html"); if (original) { $submitButton.html(original); } else { $submitButton.text("Enviar"); } $submitButton.prop("disabled", false); } } $form.on('submit', function (e) { e.preventDefault(); updatePhoneNumber(); const errors = validateRequiredFields(); const consentimientoError = validateConsentimiento(); // Validaciones anti-spam const antiSpamErrors = validateAntiSpam(); if (antiSpamErrors.length > 0) { $formErrors.html(antiSpamErrors.join('
')).show(); $formSuccess.hide(); return; } // Validación de reCAPTCHA antes de enviar const captchaResponse = typeof grecaptcha !== "undefined" ? grecaptcha.getResponse() : ""; if (!captchaResponse) { $formErrors .html("Por favor, completa el CAPTCHA para continuar.") .show(); $formSuccess.hide(); captchaAuthorized = false; return; } if (errors.length > 0 || $phoneError.is(':visible') || consentimientoError) { let errorMessage = errors.join('
'); if ($phoneError.is(':visible')) { errorMessage += '
' + $phoneError.text(); } if (consentimientoError) { errorMessage += '
' + consentimientoError; } $formErrors.html(errorMessage).show(); $formSuccess.hide(); } else { $formErrors.hide(); setLoading(true); $submitButton.prop('disabled', true); $.ajax({ type: 'POST', url: $form.attr('action'), data: $form.serialize(), success: function () { $formSuccess.html('Formulario enviado con éxito.').show(); if (typeof grecaptcha !== "undefined") { grecaptcha.reset(); } $form[0].reset(); // Reset the form captchaAuthorized = false; }, error: function () { $formSuccess.html('Formulario enviado con éxito.').show(); $form[0].reset(); }, complete: function () { $submitButton.prop('disabled', false); setLoading(false); $form[0].reset(); } }); } }); });