FEATURE Refining forms behaviour

functions.php

@@ -9,6 +9,7 @@ require_once(__DIR__ . '/includes/collective-access-api.php');
 require_once(__DIR__ . '/includes/utilities.php');
 require_once(__DIR__ . '/includes/nawalker_fction.php');
 require_once(__DIR__ . '/includes/social-networks.php');
+require_once(__DIR__ . '/includes/forms.php');
 
 
 // require_once(__DIR__ . '/includes/widget.php');

includes/forms.php

@@ -0,0 +1,6 @@
+<?php
+
+
+
+add_filter('gform_confirmation_anchor', '__return_true');
+add_filter('gform_confirmation_anchor_2', '__return_true');

resources/css/forms/forms.css

@@ -23,6 +23,10 @@ body.front-end {
     --gf-ctrl-label-font-size-req: 1rem;
     --gf-ctrl-label-font-weight-req: 400;
 
+    --gf-ctrl-desc-color-error: white;
+
+    --gf-ctrl-radius: 0;
+
     --gf-ctrl-btn-radius: 0;
     --gf-ctrl-btn-bg-color-primary: transparent;
     --gf-ctrl-btn-bg-color-primary-focus: white;
@@ -47,6 +51,75 @@ body.front-end {
     --gf-color-in-ctrl-primary: red;
     --gf-ctrl-choice-check-color: white;
 
+    /* ERRORS */
+    --gf-color-danger: white;
+    /* --gf-color-danger-rgb: white; */
+    --gf-form-validation-border-color: transparent;
+    --gf-form-validation-heading-color: white;
+    --gf-form-validation-heading-font-weight: 600;
+    --gf-ctrl-bg-color-error: white;
+    --gf-form-validation-bg-color: transparent;
+    --gf-ctrl-desc-font-size-error: 1rem;
+    --gf-form-validation-heading-font-size: 1rem;
+    --gf-form-validation-heading-font-weight: 300;
+    --gf-form-validation-radius: 0;
+    --gf-form-validation-margin-y: 30px;
+    --gf-form-validation-padding-x: 0;
+
+    --gf-ctrl-bg-color-error: transparent;
+    --gf-form-validation-padding-y: 16px;
+    --gf-form-validation-shadow: none;
+
+    h2.gform_submission_error {
+      @apply justify-center;
+    }
+    .gform-icon--circle-error {
+      @apply border-none;
+      background-image: url('../resources/img/icons/carhop-attention-rouge.svg');
+      @apply bg-no-repeat bg-center bg-contain text-carhop-red-700   rounded-full text-3xl  w-6 h-6;
+
+      margin-right: 0.5rem;
+      &:before {
+        content: none;
+      }
+    }
+    .gfield_validation_message {
+      @apply flex items-center  bg-white border border-carhop-red-700 border-solid text-carhop-red-700 font-normal w-fit py-1 px-4 rounded-full mt-4;
+      &:before {
+        content: '';
+        background-image: url('../resources/img/icons/carhop-attention-rouge.svg');
+        @apply block w-5 h-5 bg-no-repeat bg-center bg-contain;
+        border-radius: 50%;
+
+        margin-right: 0.5rem;
+      }
+
+      &.validation_message--hidden-on-empty {
+        @apply hidden;
+        &:before {
+          content: none;
+          @apply hidden;
+        }
+      }
+    }
+
+    .gfield:has(.gfield_validation_message) {
+      .ginput_container {
+        @apply relative;
+
+        &:before {
+          content: '';
+          @apply absolute block top-1/2 right-3 w-6 h-6 text-red-800  text-2xl  -translate-y-1/2;
+          background-image: url('../resources/img/icons/carhop-attention-rouge.svg');
+        }
+      }
+
+      .ginput_container_textarea:before,
+      .ginput_container_fileupload:before {
+        @apply top-8;
+      }
+    }
+
     input[type='submit'] {
       --gf-ctrl-btn-font-size: 1.25rem;
       --gf-ctrl-btn-padding-x: 2rem;

resources/img/icons/carhop-attention-rouge.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="attention-rouge" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-2 {
+        fill: #ae2154;
+      }
+    </style>
+  </defs>
+  <g>
+    <circle class="cls-1" cx="6" cy="6" r="5.5"/>
+    <path class="cls-2" d="M6,1c2.76,0,5,2.24,5,5s-2.24,5-5,5S1,8.76,1,6,3.24,1,6,1M6,0C2.69,0,0,2.69,0,6s2.69,6,6,6,6-2.69,6-6S9.31,0,6,0h0Z"/>
+  </g>
+  <path class="cls-2" d="M5.9,7.06c-.07-.06-.11-.16-.12-.28l-.36-3.74v-.1c0-.2.06-.36.2-.48.14-.12.31-.18.52-.18s.39.06.52.18c.14.12.21.28.21.48v.11s-.37,3.73-.37,3.73c-.01.12-.05.21-.12.28-.07.06-.15.1-.25.1s-.18-.03-.24-.1ZM5.63,8.96c-.13-.14-.2-.31-.2-.51s.07-.38.2-.51.3-.21.51-.21.38.07.51.21.2.31.2.51-.07.38-.2.51c-.13.14-.3.21-.51.21s-.37-.07-.51-.21Z"/>
+</svg>