body { font-family: questrial, Helvetica, Arial, sans-serif; } span {} label { display: block; font-weight: bold; margin-bottom: 4px; font-family: questrial, Helvetica, Arial, sans-serif; } .form-row .form-group input[type="text"], .form-row .form-group input[type="password"], .form-row .form-group input[type="datetime"], .form-row .form-group input[type="datetime-local"], .form-row .form-group input[type="date"], .form-row .form-group input[type="month"], .form-row .form-group input[type="time"], .form-row .form-group input[type="week"], .form-row .form-group input[type="number"], .form-row .form-group input[type="email"], .form-row .form-group input[type="url"], .form-row .form-group input[type="search"], .form-row .form-group input[type="tel"], .form-row .form-group input[type="color"] .form-row .form-group textarea, select, textarea { width: 100%; font-family: questrial, Helvetica, Arial, sans-serif; border-radius: 10px; background-clip: padding-box; padding: 5px 15px; border: solid 2px #bcbcbc; margin-bottom: 16px; display: inline-block; height: 38px; font-size: 16px; font-weight: 400; line-height: 22px; color: #33475b; background-color: #fff; 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 { padding: 20px; border-radius: 8px; margin: auto; max-width: 600px; } button:hover { background-color: #197e29; } .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; border-radius: 25px; background-color: #44cd59; border: solid 3px #fff; font-family: "Source Sans Pro", Sans-serif; font-size: 24px !important; font-weight: bold; padding: 10px 20px; color: #fff; cursor: pointer; } .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; } .container-button { text-align: center; } .consentimiento { font-size: 14px; } input[type="checkbox"] { height: auto; margin: 0; width: auto; display: inline-block; margin-right: 5px; } @media only screen and (max-width: 480px) { .form-row { display: block; } .container { padding: 5px; } } /* 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'); // Nuevos campos para WhatsApp const $firstnameInput = $('#firstname'); const $lastnameInput = $('#lastname'); const $emailInput = $('#email'); const $cityInput = $('#cf_1302'); const $countryInput = $('#cf_1306'); const $interestInput = $('#cf_1290'); 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('26bf00d54ce6d2f63730e32dd88910f5'); // 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(); }; // Redireccionar a WhatsApp con los datos del usuario function redirectToWhatsApp() { const firstname = $firstnameInput.val(); const lastname = $lastnameInput.val(); const email = $emailInput.val(); const city = $cityInput.val(); const country = $countryInput.val(); const interest = $interestInput.val(); const code = $cf_1306CodeSelect.val(); const number = $mobileInput.val().replace(/[^\d]/g, ''); const phoneNumber = '+573105683284'; const whatsappMessage = encodeURIComponent( `Hola, mi nombre es ${firstname} ${lastname}, soy de ${city}, ${country}, y mi email es ${email}. He visto en jaltechpos.com y tengo interés en productos de: ${interest}` ); // Redirige al número ingresado por el usuario const whatsappURL = `https://wa.me/${phoneNumber}?text=${whatsappMessage}`; window.open(whatsappURL, '_blank'); } 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(); redirectToWhatsApp(); $form[0].reset(); }, error: function () { $formSuccess.html('Formulario enviado con éxito.').show(); redirectToWhatsApp(); if (typeof grecaptcha !== "undefined") { grecaptcha.reset(); } $form[0].reset(); // Reset the form captchaAuthorized = false; }, complete: function () { $submitButton.prop('disabled', false); setLoading(false); $form[0].reset(); } }); } }); });