Refactor breadcrumb margins and add reCAPTCHA validation to contact forms

2025-04-22 15:28:06 +02:00
parent e05749bfda
commit 651d2f61f2
12 changed files with 307 additions and 506 deletions
--- a/templates_user/modal/modal.php
+++ b/templates_user/modal/modal.php
@@ -175,6 +175,7 @@
                <button class="step-prev-to-quick-form2">&lt; Powrót</button>
              </div>
              <div class="step-send">
+                <div class="g-recaptcha" data-sitekey="6LfaovglAAAAAAieLVC7i4xGkQA5ufXUbWLipSbp"></div>
                <input type="submit" value="Wyślij zapytanie &nbsp;>" class="form-send-content">
              </div>
            </div>
@@ -187,117 +188,141 @@
 <link class="footer" href="/plugins/fileuploader/jquery.fileuploader.min.css" rel="stylesheet" type="text/css">
 <link class="footer" href="/plugins/fileuploader/font/font-fileuploader.css" rel="stylesheet" type="text/css">
 <script class="footer" type="text/javascript" src="/plugins/fileuploader/jquery.fileuploader.min.js"></script>
+
 <script class="footer" type="text/javascript">
-$('body').on('submit', '#modal-contact-form', function(e) {
-  window.dataLayer = window.dataLayer || [];
-  window.dataLayer.push({
-    'event': 'formSent'
+  let modalContactForm_Started = false;
+  $('#modal-contact-form input, #modal-contact-form textarea, #modal-contact-form select').one('input change', function() {
+    if (!modalContactForm_Started) {
+      modalContactForm_Started = true;
+
+      window.dataLayer = window.dataLayer || [];
+      window.dataLayer.push({
+        event: "form_start",
+        form_name: "Kontakt (Modal)",
+        form_id: "modal-contact-form",
+        form_step: "1"
+      });
+    }
  });
-});

-// Popup open
-$(".header-container .btn-popup-oferta").on(click_event, function() {
-  $(".box-popup").show();
-  $(".box-popup .modal-step-1").show();
-});
-// Popup close
-$(".box-popup .modal-close img").on(click_event, function() {
-  $(".box-popup").hide();
-  $(".box-popup .modal-step-1").hide();
-  $(".box-popup .modal-step-2").hide();
-  $(".box-popup .modal-step-3").hide();
-});
-// Okno start (1)
-$(".box-popup .modal-step-1-wrap .box-left").on(click_event, function() {
-  $(".box-popup .modal-step-1").hide();
-  $(".box-popup .modal-step-2").show();
-  kontaktTogle();
-});
-$(".box-popup .modal-step-1-wrap .box-right").on(click_event, function() {
-  $(".box-popup .modal-step-1").hide();
-  $(".box-popup .modal-step-3").show();
-});
-// Okno 'szybki kontakt' (2)
-$(".box-popup .modal-step-2 .modal-tabs .item").on(click_event, function() {
-  $(".box-popup .modal-step-2 .modal-tabs .item").removeClass("active");
-  $(this).addClass("active");
-  kontaktTogle();
-})
-$(".box-popup .modal-step-2 .step-prev-to-quick-form2").on(click_event, function() {
-  $(".box-popup .modal-step-1").show();
-  $(".box-popup .modal-step-2").hide();
-})
-// Okno 'szybki kontakt' nav tab
-function kontaktTogle() {
-  if ($(".box-popup .modal-step-2 .modal-tabs .item:nth-child(1)").hasClass("active")) {
-    $(".box-popup .modal-step-2 .modal-step-2-wrap .content-1").css("display", "flex");
-    $(".box-popup .modal-step-2 .modal-step-2-wrap .content-2").hide();
-  } else if ($(".box-popup .modal-step-2 .modal-tabs .item:nth-child(2)").hasClass("active")) {
-    $(".box-popup .modal-step-2 .modal-step-2-wrap .content-2").css("display", "flex");
-    $(".box-popup .modal-step-2 .modal-step-2-wrap .content-1").hide();
+  $(function () {
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.get('modal_form_sent') === '1') {
+      window.dataLayer = window.dataLayer || [];
+      window.dataLayer.push({
+        event: "form_submit",
+        form_name: "Kontakt (Modal)",
+        form_id: "modal-contact-form",
+        submission_status: "success"
+      });
+    }
+  });
+</script>
+
+<script class="footer" type="text/javascript">
+  // Popup open
+  $(".header-container .btn-popup-oferta").on(click_event, function() {
+    $(".box-popup").show();
+    $(".box-popup .modal-step-1").show();
+  });
+  // Popup close
+  $(".box-popup .modal-close img").on(click_event, function() {
+    $(".box-popup").hide();
+    $(".box-popup .modal-step-1").hide();
+    $(".box-popup .modal-step-2").hide();
+    $(".box-popup .modal-step-3").hide();
+  });
+  // Okno start (1)
+  $(".box-popup .modal-step-1-wrap .box-left").on(click_event, function() {
+    $(".box-popup .modal-step-1").hide();
+    $(".box-popup .modal-step-2").show();
+    kontaktTogle();
+  });
+  $(".box-popup .modal-step-1-wrap .box-right").on(click_event, function() {
+    $(".box-popup .modal-step-1").hide();
+    $(".box-popup .modal-step-3").show();
+  });
+  // Okno 'szybki kontakt' (2)
+  $(".box-popup .modal-step-2 .modal-tabs .item").on(click_event, function() {
+    $(".box-popup .modal-step-2 .modal-tabs .item").removeClass("active");
+    $(this).addClass("active");
+    kontaktTogle();
+  })
+  $(".box-popup .modal-step-2 .step-prev-to-quick-form2").on(click_event, function() {
+    $(".box-popup .modal-step-1").show();
+    $(".box-popup .modal-step-2").hide();
+  })
+  // Okno 'szybki kontakt' nav tab
+  function kontaktTogle() {
+    if ($(".box-popup .modal-step-2 .modal-tabs .item:nth-child(1)").hasClass("active")) {
+      $(".box-popup .modal-step-2 .modal-step-2-wrap .content-1").css("display", "flex");
+      $(".box-popup .modal-step-2 .modal-step-2-wrap .content-2").hide();
+    } else if ($(".box-popup .modal-step-2 .modal-tabs .item:nth-child(2)").hasClass("active")) {
+      $(".box-popup .modal-step-2 .modal-step-2-wrap .content-2").css("display", "flex");
+      $(".box-popup .modal-step-2 .modal-step-2-wrap .content-1").hide();
+    }
  }
-}
-// Okno 'wycenana podstawie projektu' (3)
-$(".box-popup .modal-step-3 .step-prev-to-quick-form2").on(click_event, function() {
-  $(".box-popup .modal-step-1").show();
-  $(".box-popup .modal-step-3").hide();
-})
+  // Okno 'wycenana podstawie projektu' (3)
+  $(".box-popup .modal-step-3 .step-prev-to-quick-form2").on(click_event, function() {
+    $(".box-popup .modal-step-1").show();
+    $(".box-popup .modal-step-3").hide();
+  })

-function wycenaNaPodstawieProjektu(event) {
-  event.preventDefault();
-  $(".box-popup").show();
-  $(".box-popup .modal-step-3").show();
-}
+  function wycenaNaPodstawieProjektu(event) {
+    event.preventDefault();
+    $(".box-popup").show();
+    $(".box-popup .modal-step-3").show();
+  }
 </script>
 <!-- Form action -->
 <script class="footer" type="text/javascript">
-$(document).ready(function() {
-  $('#modal-contact-form input.files').fileuploader({
-    fileMaxSize: 10,
-    extensions: ['jpg', 'jpeg', 'png', 'pdf', 'text/plain', 'csv', 'xml', 'xls', 'xlsx', 'doc', 'dot', 'docx'],
-    addMore: true,
-    captions: {
-      button: function(e) {
-        return "WYBIERZ PLIKI";
-      },
-      feedback: function(e) {
-        return (
-          "PRZYCIĄGNIJ I UPUŚĆ LUB"
-        );
-      },
-      feedback2: function(e) {
-        return (
-          e.length +
-          " " +
-          (1 < e.length ? "pliki są wybrane" : "plik jest wybrany")
-        );
-      },
-      confirm: "Potwierdzenie",
-      cancel: "Anuluj",
-      name: "Nazwa",
-      type: "Typ pliku",
-      size: "Rozmiar pliku",
-      dimensions: "Wymiary",
-      duration: "Czas",
-      crop: "Utnij to",
-      rotate: "Koło",
-      sort: "Sortować",
-      open: "Otwierasz",
-      download: "Ściągnij",
-      remove: "Usunąć",
-      drop: "Umieść plik tutaj do przesłania",
-      paste: '<div class="fileuploader-pending-loader"></div> Wklej plik, kliknij tutaj, aby usunąć',
-      removeConfirmation: "Czy na pewno chcesz usunąć plik??",
-      errors: {
-        filesLimit: "Sam ${limit} pliki można przesyłać.",
-        filesType: "Sam ${extensions} pliki można przesyłać.",
-        fileSize: "${name} jest zbyt duży! Wybierz plik do ${fileMaxSize} MB.",
-        filesSizeAll: "Wybrane pliki są za duże! Wybierz plik do ${maxSize} MB.",
-        fileName: "Plik o tej samej nazwie ${name} jest już wybrany.",
-        remoteFile: "Pliki zdalne są niedozwolone.",
-        folderUpload: "Foldery są niedozwolone.",
+  $(document).ready(function() {
+    $('#modal-contact-form input.files').fileuploader({
+      fileMaxSize: 10,
+      extensions: ['jpg', 'jpeg', 'png', 'pdf', 'text/plain', 'csv', 'xml', 'xls', 'xlsx', 'doc', 'dot', 'docx'],
+      addMore: true,
+      captions: {
+        button: function(e) {
+          return "WYBIERZ PLIKI";
+        },
+        feedback: function(e) {
+          return (
+            "PRZYCIĄGNIJ I UPUŚĆ LUB"
+          );
+        },
+        feedback2: function(e) {
+          return (
+            e.length +
+            " " +
+            (1 < e.length ? "pliki są wybrane" : "plik jest wybrany")
+          );
+        },
+        confirm: "Potwierdzenie",
+        cancel: "Anuluj",
+        name: "Nazwa",
+        type: "Typ pliku",
+        size: "Rozmiar pliku",
+        dimensions: "Wymiary",
+        duration: "Czas",
+        crop: "Utnij to",
+        rotate: "Koło",
+        sort: "Sortować",
+        open: "Otwierasz",
+        download: "Ściągnij",
+        remove: "Usunąć",
+        drop: "Umieść plik tutaj do przesłania",
+        paste: '<div class="fileuploader-pending-loader"></div> Wklej plik, kliknij tutaj, aby usunąć',
+        removeConfirmation: "Czy na pewno chcesz usunąć plik??",
+        errors: {
+          filesLimit: "Sam ${limit} pliki można przesyłać.",
+          filesType: "Sam ${extensions} pliki można przesyłać.",
+          fileSize: "${name} jest zbyt duży! Wybierz plik do ${fileMaxSize} MB.",
+          filesSizeAll: "Wybrane pliki są za duże! Wybierz plik do ${maxSize} MB.",
+          fileName: "Plik o tej samej nazwie ${name} jest już wybrany.",
+          remoteFile: "Pliki zdalne są niedozwolone.",
+          folderUpload: "Foldery są niedozwolone.",
+        }
      }
-    }
+    });
  });
-});
 </script>