src/Aviatur/TwigBundle/Resources/views/aviatur/Flux/Form/Default/emblue_suscribe_home.html.twig line 1

Open in your IDE?
  1. <div class="items-center justify-center" style="background: var(--background, #F5F7F9);">
  2.     <form id="suscribeForm" method="POST" class="max-w-screen-lg mx-auto pt-4 p-8 flex flex-col items-center bg-[#F5F7F9]">
  3.         <!-- Icono -->
  4.         <div class="pb-4 mb-0">
  5.             <img src="https://aviaturcdndev.z5.web.core.windows.net/assets/aviatur_assets/img/others/newsletter_mail.png" alt="Newsletter" class="w-[92px] h-[92px]">
  6.         </div>
  8.         <!-- Título -->
  9.         <h5 class="text-center text-xl font-bold" style="font-family: Roboto;">Suscríbase a nuestro Newsletter</h5>
  11.         <!-- Mensaje de éxito o error -->
  12.         <div id="formMessage" class="text-center text-red-600 pb-4 mb-0"></div>
  14.         <!-- Inputs de Nombre y Correo -->
  15.         <div class="flex flex-wrap justify-center gap-x-8 gap-y-6 pb-4 mb-0 w-full">
  16.             <div class="relative min-h-[56px] w-[400px] gap-y-6">
  17.                 <input type="text" id="name" name="form[name]" placeholder="" required class="absolute left-0 top-0 right-0 bottom-0 h-full w-full rounded-[0.375rem] border border-[#005CB9] hover:border-[#005CB9] focus:border-[#005CB9] appearance-none focus:outline-none bg-[#F5F7F9] pl-3.5 pr-3.5 text-base font-normal text-[#042A44] hover:text-[#005CB9] focus:text-[#005CB9] peer">
  18.                 <label for="name" class="absolute top-0 left-[2.5%] bg-[#F5F7F9] text-[#005CB9] text-base font-[Roboto] font-normal peer-hover:text-[#005CB9] peer-hover:font-medium peer-focus:text-[#005CB9] peer-focus:font-medium z-[10] pl-1 pr-1 translate-y-[-50%] transition-all">
  19.                     Nombre Completo
  20.                 </label>
  21.             </div>
  23.             <div class="relative min-h-[56px] w-[400px]">
  24.                 <input type="email" id="email" name="form[email]" placeholder="" required class="absolute left-0 top-0 right-0 bottom-0 h-full w-full rounded-[0.375rem] border border-[#005CB9] hover:border-[#005CB9] focus:border-[#005CB9] appearance-none focus:outline-none bg-[#F5F7F9] pl-3.5 pr-3.5 text-base font-normal text-[#042A44] hover:text-[#005CB9] focus:text-[#005CB9] peer">
  25.                 <label for="email" class="absolute top-0 left-[2.5%] bg-[#F5F7F9] text-[#005CB9] text-base font-[Roboto] font-normal peer-hover:text-[#005CB9] peer-hover:font-medium peer-focus:text-[#005CB9] peer-focus:font-medium z-[10] pl-1 pr-1 translate-y-[-50%] transition-all">
  26.                     Correo electrónico
  27.                 </label>
  28.             </div>
  29.         </div>
  31.         <!-- Checkbox de suscripción al newsletter -->
  32.         <div class="flex items-start pb-4 mb-0 w-full justify-center">
  33.                 <div class="flex xs:mt-3 s:mt-2 justify-start">
  34.             <input type="checkbox" id="subscribeToNewsletter" name="form[subscribeToNewsletter]" class="text-[#0AC6D1] bg-[#828282] border-gray-300 rounded focus:ring-blue-500 mr-2 mt-[4px] w-8 h-8">
  35. </div>
  36.     <label for="subscribeToNewsletter" class="text-[#2e2e2e] mb-0 text-base font-light font-['Ubuntu'] leading-3">
  37.         <span>Me gustaría recibir </span>
  38.         <span class="font-normal xs:leading-8 s:leading-8">boletines</span>
  39.         <span> y </span>
  40.         <span class="font-normal xs:leading-8 s:leading-8">ofertas especiales por correo electrónico.</span>
  41.     </label>
  42. </div>
  44.         <!-- Checkbox de aceptación de términos -->
  45.         <div class="flex items-start pb-4 mb-0 w-full justify-center">
  46.            <div class="flex xs:mt-3 s:mt-2 justify-start">
  47.     <input type="checkbox" id="acceptTerms" name="form[acceptTerms]" required class="text-[#0AC6D1] bg-[#828282] border-gray-300 rounded focus:ring-blue-500 mr-2 mt-[4px] w-8 h-8">
  48.     </div>
  49.     <label for="acceptTerms" class="text-[#2e2e2e] mb-0 text-base font-light font-['Ubuntu'] leading-3 xs:leading-8 s:leading-8">
  50.         <span>Autorizo el tratamiento de mis datos personales de conformidad con la</span>
  51.         <a href="https://www.aviatur.com/contenidos/politica-de-privacidad" class="font-normal underline" target="blank">política de datos y privacidad.</a>
  52.     </label>
  53. </div>
  55.         <!-- Botón de suscripción -->
  56.         <button type="submit" class="w-[117px] h-[47px] px-5 py-3.5 bg-white rounded-full shadow flex justify-center items-center text-[#042a44] text-base font-medium font-['Roboto'] pb-4 mb-0">
  57.             Suscribirse
  58.         </button>
  59.     </form>
  60. </div>
  63. <script>
  64.  let submitCount = 0;
  66. document.getElementById('suscribeForm').addEventListener('submit', function(event) {
  67.     event.preventDefault();
  68.     
  69.     // Verifica si el formulario ya se ha enviado dos veces
  70.     if (submitCount >= 1) {
  71.         const messageElement = document.getElementById('formMessage');
  72.         messageElement.textContent = '¡Su correo ya forma parte de este viaje ✈️ ! Ya está registrado para recibir nuestras novedades, destinos y promociones exclusivas.';
  73.         messageElement.style.color = '#005CB9'; 
  74.         messageElement.style.fontFamily = 'Roboto, sans-serif';
  75.         messageElement.style.fontWeight = '500';
  76.         return;  
  77.     }
  79.     const formData = new FormData(this);
  80.     const url = window.location.origin + '/formularios/emblue/suscribe/form';
  81.     const messageElement = document.getElementById('formMessage');
  82.     
  83.     fetch(url, {
  84.         method: 'POST',
  85.         body: formData,
  86.         headers: {
  87.             'X-Requested-With': 'XMLHttpRequest'
  88.         }
  89.     })
  90.     .then(response => {
  91.         if (response.ok) {
  92.             return response.text();
  93.         } else {
  94.             throw new Error('Ya existe una suscripción con este correo electrónico.');
  95.         }
  96.     })
  97.     .then(data => {
  98.         messageElement.textContent = 'Suscripción exitosa';
  99.         messageElement.style.color = '#005CB9';  
  100.         submitCount++;  // Incrementa el contador después de un envío exitoso
  101.     })
  102.     .catch(error => {
  103.         messageElement.textContent = error.message;
  104.         messageElement.style.color = '#EB5757';  
  105.         submitCount++;  
  106.     });
  107. });
  109. // Restaura el contador cuando se modifica un campo
  110. document.querySelectorAll('#suscribeForm input').forEach(input => {
  111.     input.addEventListener('input', () => {
  112.         submitCount = 0;
  113.     });
  114. });
  116. </script>