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>

[J. Davis]

Hi Thomas,
You can navigate to Appointment > Settings and select the Terms and Conditions page to display the checkbox to agree to your terms and conditions. If you need to add another checkbox to the checkout form you can use the Checkout Fields Editor add-on.

[Author]

Posts