Comment ajouter un widget de réservation dans Elementor ?

Glissez un widget de la catégorie Kraft Booking, réglez-le dans l'onglet Contenu, puis soignez la mise en page : fiche type, responsive, accessibilité et erreurs fréquentes.

Pour ajouter un formulaire de réservation dans Elementor, ouvrez la page dans l'éditeur, cherchez la catégorie Kraft Booking dans le panneau des widgets et faites glisser le widget voulu sur la page, puis réglez ses options dans l'onglet Contenu. GDA Kraft Booking, l'extension WordPress de Global Digital Agency, fournit des widgets natifs compatibles avec Elementor gratuit et Elementor Pro. Ce guide va plus loin que l'insertion : mise en page d'une fiche hébergement et d'une page de prestation, réglages responsive, accessibilité et performance.

Quels widgets sont disponibles ?

Widget	Où l'utiliser
Recherche de disponibilités	Page d'accueil, en-tête de la page « Nos hébergements »
Résultats de recherche	Page de résultats, vers laquelle renvoie la recherche
Calendrier de disponibilité	Fiche d'un hébergement : le voyageur y choisit ses dates
Formulaire de réservation	Fiche d'un hébergement, sous le calendrier
Espace client	Page dédiée, sur laquelle arrive le lien envoyé aux voyageurs
Prendre rendez-vous	Page de prestation ou page « Prendre rendez-vous »

Il n'existe pas de widget Kraft Console ni de widget « Disponibilité et prix » : Kraft Console est un espace de gestion à part (voir Kraft Console).

La présentation générale des éléments et leurs équivalents dans les autres constructeurs est dans Utiliser Kraft Booking avec Divi, Gutenberg, Elementor et Bricks.

Ouvrez la page avec Modifier avec Elementor.
Dans le panneau de gauche, tapez « Kraft » dans la recherche de widgets, ou ouvrez la catégorie Kraft Booking.
Faites glisser le widget dans un conteneur.
Onglet Contenu : réglez les options du widget, par exemple « Unité (ID, 0 = automatique) », « Nombre de mois » et « Afficher les prix » pour le calendrier ; « Paiement », « Afficher les voyageurs », « Afficher le téléphone » et « Afficher le récapitulatif » pour le formulaire ; « Prestation (ID, 0 = toutes) » et « Intervenant (ID, 0 = au choix) » pour les rendez-vous. Il n'y a pas d'option d'acompte, d'extras ni de langue.
Les widgets n'ont pas d'onglet Style dédié : ajustez marges, fond et bordure dans l'onglet Avancé d'Elementor.
Publiez, puis testez la page en navigation privée.

Quelle mise en page pour une fiche hébergement ?

Une fiche hébergement doit répondre dans l'ordre aux questions du voyageur : à quoi ça ressemble, est-ce libre, combien ça coûte, comment réserver. Structure type sur deux colonnes en bureau :

En-tête pleine largeur : galerie ou photo principale, nom, capacité (« 6 personnes, 3 chambres »).
Colonne principale (environ deux tiers) : description, équipements, plan des espaces, règlement, emplacement.
Colonne latérale (environ un tiers) : widget Calendrier de disponibilité en haut, puis widget Formulaire de réservation, qui confirme les dates choisies. Dans Elementor Pro, l'effet d'ancrage (sticky) de la colonne garde le formulaire visible pendant le défilement ; désactivez-le sur mobile.
Bas de page : conditions d'annulation, questions fréquentes, contact.

Sur mobile, le conteneur passe en colonne : vérifiez que le formulaire arrive après la galerie et le résumé, et ajoutez un bouton « Réserver » en haut de page qui pointe vers l'ancre du formulaire.

Pour enrichir la fiche, voir Galeries, visite par espaces et livre d'or.

Quelle mise en page pour une page de prestation ?

Pour un rendez-vous, l'information compte autant que le formulaire :

titre clair avec la durée et le prix (« Soin du visage, 60 min, 70 € ») ;
déroulé en trois ou quatre étapes, à qui la prestation s'adresse, ce qu'il faut prévoir ;
widget Prendre rendez-vous avec « Prestation (ID, 0 = toutes) » renseigné, ce qui supprime une étape au client ;
règle d'annulation en une phrase, juste sous le formulaire ;
lien vers les autres prestations.

Peut-on utiliser les widgets dans les modèles et pop-ups ?

Ces usages ne sont pas documentés : si vous placez un widget dans un modèle de boucle ou un pop-up d'Elementor Pro, testez-le soigneusement. Deux précautions :

pop-up : réservez-le au widget Recherche de disponibilités. Un formulaire complet dans une fenêtre surgissante est pénible sur mobile ;
modèle unique pour toutes les fiches (Theme Builder) : laissez « Unité (ID, 0 = automatique) » à 0 pour que le calendrier affiche le logement de la fiche, et testez sur deux fiches que chacune affiche bien son propre calendrier ; à défaut, gardez une page par hébergement.

Comment soigner le responsive et l'accessibilité ?

Taille du texte : au moins 16 px dans les champs sur mobile, sans quoi certains navigateurs zooment à la saisie.
Zones tactiles : boutons et jours du calendrier assez grands pour un doigt ; évitez de réduire les marges internes du widget en mode mobile.
Contraste : visez au minimum le niveau AA des WCAG, soit un rapport de 4,5:1 pour le texte courant, y compris pour les dates indisponibles qui ne doivent pas se distinguer par la seule couleur.
Libellés : ne remplacez pas les libellés des champs par de simples textes d'exemple ; ils disparaissent à la saisie.
Focus visible : ne supprimez pas le contour de focus des champs et boutons dans vos styles personnalisés.
Testez au clavier : la touche Tab doit parcourir le formulaire dans l'ordre logique.

Comment préserver la performance ?

Placez les widgets uniquement sur les pages qui en ont besoin, pas dans un en-tête global.
Compressez les photos de la galerie (format WebP, dimensions adaptées) : ce sont elles, plus que le formulaire, qui alourdissent une fiche.
Si vous utilisez une extension de cache, testez le formulaire en navigation privée après une réservation ; si les disponibilités semblent figées, excluez les pages de réservation du cache. N'enregistrez jamais en cache la page du portail voyageur, qui affiche des données personnelles.

Quelles erreurs rencontre-t-on souvent ?

Symptôme	Cause probable	Solution
Le formulaire n'affiche aucun séjour	Aucune date choisie en amont	Placez le widget Calendrier sur la même page, ou passez par la recherche
Pas de bouton de paiement	Paiements non activés, ou option « Paiement » sur « Sans paiement en ligne (confirmation directe) »	Choisissez « Paiement en ligne (Stripe / Kraft Pay) » ; voir Activer les paiements Stripe
Aucun créneau	Horaires, absences ou délai minimal	Aucun créneau de rendez-vous disponible
Styles du thème écrasés	Réglages de style globaux d'Elementor	Ajustez votre kit global et l'onglet Avancé du widget
Mauvaise langue	Page ouverte sans le préfixe de langue (/en/, /it/…) ou texte pas encore traduit	Il n'y a pas d'option de langue dans le widget : voir Sites multilingues

Questions fréquentes

Les widgets fonctionnent-ils avec Elementor gratuit ?

Oui. Les widgets fonctionnent avec Elementor gratuit et Elementor Pro ; seules les fonctions propres à Pro, comme les pop-ups ou les modèles de boucle, demandent Elementor Pro.

Faut-il un compte pour utiliser les widgets ?

L'extension se télécharge depuis votre espace client Kraft GDA (compte gratuit, sans carte bancaire, inscription sur /inscription). Cette édition inclut tout, paiement en ligne, rendez-vous, Kraft Console, modules de design, Kraft Fields et multilingue : aucun add-on à installer.

Puis-je mettre plusieurs formulaires sur la même page ?

C'est possible, mais déconseillé : un seul formulaire par page évite les confusions et les erreurs de saisie. Pour plusieurs hébergements, utilisez les widgets Recherche de disponibilités et Résultats de recherche.

Les widgets reprennent-ils mes couleurs globales ?

Les widgets n'ont pas d'onglet Style dédié : leur rendu dépend des styles de l'extension et de votre thème. Vérifiez le rendu après chaque changement de kit global.