Feat: Replace Google ReCAPTCHA with ALTCHA using API - non-tracking, GDPR compliant without cookies or fingerprinting.

templates/pages/core/_contact.html

@@ -2,6 +2,10 @@
 
 {% block page_head %}
     <link rel="stylesheet" href="{{ url_for('static', filename='dist/css/core_contact.bundle.css') }}">
+    {#
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@altcha/browser@latest/dist/index.js" defer></script>
+    #}
+    <script type="module" src="{{ url_for('static', filename='js/vendor/altcha.js')}}"></script>
 {% endblock %}
 
 {% block page_nav_links %}
@@ -12,6 +16,7 @@
 {% endblock %}
 
 {% block page_body %}
+    {#
     <script>
         function loadRecaptcha() {
             var script = document.createElement('script');
@@ -22,15 +27,15 @@
 
         window.addEventListener('load', loadRecaptcha);
     </script>
-
-    <!-- Divs -->
+    #}
+    
     {% set form = model.form_contact %}
     <section class="contact-section">
         <div class="contact-form">
             <h1>Contact Us</h1>
             <p>Please fill in the form below and we'll get back to you as soon as possible.</p>
 
-            <form id="contact-form" method="POST" action="{{ url_for('routes_core.contact') }}">
+            <form id="{{ model.ID_CONTACT_FORM }}" method="POST" action="{{ url_for('routes_core.contact') }}">
                 {{ form.csrf_token }}
 
                 <div class="form-grid">
@@ -59,8 +64,12 @@
                     {{ model.form_contact.receive_marketing() }}
                     {{ model.form_contact.receive_marketing.label }}
                 </div>
-                <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_RECAPTCHA }}">
-                    {{ model.form_contact.recaptcha() }}
+                <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_CAPTCHA }}">
+                    {# {{ model.form_contact.recaptcha() }} #}
+                    <altcha-widget
+                        challengeurl="https://eu.altcha.org/api/v1/challenge?apiKey={{ model.app.app_config.ALTCHA_API_KEY }}"
+                        spamfilter
+                    ></altcha-widget>
                 </div>
                 <div class="{{ model.FLAG_CONTAINER_INPUT }}">
                     {{ model.form_contact.submit() }}
@@ -101,6 +110,7 @@
     #}
 
     <script>
+        var idContactForm = "#{{ model.ID_CONTACT_FORM }}";
         var idEmail = "#{{ model.ID_EMAIL }}";
         var idMessage = "#{{ model.ID_MESSAGE }}";
         var idContactName = "#{{ model.ID_CONTACT_NAME }}";