Help : Need to add a checkbox on the booking form for RGPD compliance

[Thomas BALLARIN]

Hello
I need to add a checkbox on the booking form for RGPD compliance. I use the Elementor widget booking form on a page and I don’t access to the generate form by the widget. I try to inject the checkbox with jquery but no success 🙁

Could you help me please ? it’ a required in France (my client say me )

Thanks in advance

Tom

[Thomas BALLARIN]

I try with this Jqery but no success. Bug with the validation form motopress and the checkbox when it was unchecked, the form is sending !

<script>
jQuery(document).ready(function ($) {
function addCheckboxValidation() {
let form = $(“.mpa-checkout-form”);
let submitButton = form.find(“button[type=’submit’]”);
let existingCheckbox = form.find(“input[type=’checkbox’][name=’motopress_terms’]”);

// Supprime toute ancienne case pour éviter les doublons
form.find(“.custom-checkbox-wrapper”).remove();

// Création de la case à cocher et du message d’erreur
let checkboxWrapper = $(‘<div class=”custom-checkbox-wrapper”></div>’);
let newCheckbox = $(‘<input type=”checkbox” class=”custom-checkbox-class” name=”motopress_terms” required>’);
let label = $(‘<label class=”custom-checkbox-label”>J\’accepte les termes et conditions</label>’);
let errorMessage = $(‘<div class=”checkbox-error” style=”color: red; display: none;”>⚠ Vous devez accepter les termes et conditions.</div>’);

checkboxWrapper.append(newCheckbox).append(label).append(errorMessage);
form.find(“.mpa-actions”).before(checkboxWrapper);

// Récupère le message d’erreur existant
let errorMessageDiv = form.find(“.checkbox-error”);

// Désactive le bouton au départ
submitButton.prop(“disabled”, true);

// Fonction pour activer/désactiver le bouton en fonction de la case cochée
function toggleSubmitButton() {
if (newCheckbox.prop(“checked”)) {
errorMessageDiv.hide();
submitButton.prop(“disabled”, false); // Active le bouton
} else {
errorMessageDiv.show();
submitButton.prop(“disabled”, true); // Désactive le bouton
}
}

// Vérifie si la case est cochée au changement
newCheckbox.on(“change”, function () {
toggleSubmitButton();
});

// Bloque la soumission si la case n’est pas cochée
form.on(“submit”, function (event) {
if (!newCheckbox.prop(“checked”)) {
event.preventDefault(); // 🔥 Bloque l’envoi
errorMessageDiv.show(); // Affiche le message d’erreur
newCheckbox.focus(); // Met le focus sur la case à cocher
return false; // 🔥 Assure que le formulaire ne continue pas
}
});
}

// Observer les changements dans le DOM pour injecter la validation dynamiquement
let observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
if (!$(mutation.target).hasClass(‘mpa-hide’)) {
addCheckboxValidation();
}
});
});

let targetNode = document.querySelector(‘.mpa-booking-step-checkout’);
if (targetNode) {
observer.observe(targetNode, { attributes: true, attributeFilter: [‘class’] });
}

addCheckboxValidation();
});
</script>

[Author]

Posts