feat(contact-form): implement consent checkbox and enable/disable submit button based on consent

static/css/admin.css

@@ -23,6 +23,54 @@ nav a:hover {
   text-decoration: underline;
 }
 
+/* Pagination */
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  margin-top: 20px;
+}
+
+.pagination a,
+.pagination span {
+  padding: 8px 12px;
+  text-decoration: none;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  color: #007bff;
+}
+
+.pagination a:hover {
+  background-color: #007bff;
+  color: white;
+}
+
+.pagination .current {
+  background-color: #007bff;
+  color: white;
+}
+
+/* Pagination */
+.pagination button {
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  background-color: white;
+  cursor: pointer;
+  border-radius: 4px;
+}
+.pagination button:hover {
+  background-color: #f8f9fa;
+}
+.pagination button:disabled {
+  background-color: #e9ecef;
+  cursor: not-allowed;
+}
+.pagination .current-page {
+  font-weight: bold;
+  color: #007bff;
+}
+
 /* Admin newsletter */
 .filters {
   margin-bottom: 20px;

static/css/styles.css

@@ -74,6 +74,12 @@ button,
   display: inline-block;
 }
 
+button[disabled="true"],
+.btn[disabled="true"] {
+  background-color: #cccccc;
+  cursor: not-allowed;
+}
+
 button:hover,
 .btn:hover {
   background-color: #0056b3;
@@ -304,54 +310,6 @@ tr:hover {
   background-color: #f5f5f5;
 }
 
-/* Pagination */
-.pagination {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 10px;
-  margin-top: 20px;
-}
-
-.pagination a,
-.pagination span {
-  padding: 8px 12px;
-  text-decoration: none;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  color: #007bff;
-}
-
-.pagination a:hover {
-  background-color: #007bff;
-  color: white;
-}
-
-.pagination .current {
-  background-color: #007bff;
-  color: white;
-}
-
-/* Pagination */
-.pagination button {
-  padding: 8px 12px;
-  border: 1px solid #ddd;
-  background-color: white;
-  cursor: pointer;
-  border-radius: 4px;
-}
-.pagination button:hover {
-  background-color: #f8f9fa;
-}
-.pagination button:disabled {
-  background-color: #e9ecef;
-  cursor: not-allowed;
-}
-.pagination .current-page {
-  font-weight: bold;
-  color: #007bff;
-}
-
 /* Utility classes */
 .text-center {
   text-align: center;

templates/embed_contact.html

@@ -23,17 +23,32 @@
           <textarea id="message" name="message" required></textarea>
         </div>
         <div class="form-group">
-          <label for="consent"
-            >I agree to the processing of my submitted data.</label
+          <input
+            type="checkbox"
+            id="consent"
+            name="consent"
+            required
+            style="display: inline-block; width: auto"
+          />
+          <label for="consent" style="display: inline-block">
+            <span style="color: red">*</span> I agree to the processing of my
+            submitted data.</label
           >
-          <input type="checkbox" id="consent" name="consent" required />
         </div>
-        <button type="submit">Send Message</button>
+        <button id="contactSubmit" class="btn" type="submit" disabled="true">
+          Send Message
+        </button>
       </form>
       <div id="responseMessage"></div>
     </div>
 
     <script>
+      document
+        .getElementById("consent")
+        .addEventListener("change", function (e) {
+          const submitButton = document.getElementById("contactSubmit");
+          submitButton.disabled = !e.target.checked;
+        });
       document
         .getElementById("contactForm")
         .addEventListener("submit", function (e) {