Formulaires, boutons et widgets

Module 4: Pages, apparence et fonctionnalités · Temps de lecture : 8 minutes

Objectif pédagogique : À l'issue de cette leçon, vous saurez configurer le formulaire de contact (destinataire, confirmation, page de remerciement, protection contre le spam, newsletter et mode d'envoi), placer des boutons flottants pour WhatsApp et le contact, intégrer un widget d'un autre service, et vous saurez quand utiliser le Code personnalisé et le HTML personnalisé.

Notions clés : formulaire de contact, destinataire, e-mail de confirmation, page de remerciement, captcha, double opt-in, mode d'envoi, bouton flottant, widget, code d'intégration, consentement, Code personnalisé, HTML personnalisé

Le formulaire de contact : deux emplacements

Un formulaire sur votre site se compose de deux parties. Le formulaire lui-même, avec les champs que remplit le visiteur, se trouve sur une page. Vous le placez avec le bloc Contact (via Blocs ou Ajouter un bloc) ou via le chat. Ce qui se passe lorsque quelqu'un clique sur Envoyer se règle dans Paramètres > Formulaires. Ce panneau, vous le configurez toujours vous-même : le chat ne le fait pas.

Le formulaire comporte toujours les champs nom, e-mail et message. Via le chat, vous pouvez ajouter des champs supplémentaires, huit au maximum : un champ texte, une liste de choix (par exemple « Intérieur ou extérieur ? »), e-mail, téléphone, un champ texte long, une date ou un nombre. Un champ pour envoyer un fichier ou une photo n'existe pas. Si Schildersbedrijf Example souhaite recevoir des photos du chantier, il l'indique dans le texte de remerciement : « N'hésitez pas à envoyer vos photos à notre adresse e-mail. »

Important : sur le site gratuit sans formule, le formulaire est visible mais grisé, et il n'envoie aucun e-mail. Les formulaires n'envoient réellement des messages que lorsque votre site fait partie d'une formule AI Builder. Vous pouvez toutefois déjà préparer les paramètres ci-dessous ; ils seront alors utilisés immédiatement.

Paramètres > Formulaires

Le panneau comporte cinq parties.

Recevoir les messages. Dans Envoyer les messages à, saisissez l'adresse e-mail à laquelle les formulaires remplis doivent arriver. Si vous laissez ce champ vide, ils sont envoyés à l'adresse e-mail de votre compte chez WebOké. Remplissez-le en connaissance de cause. Dans Objet de l'e-mail, choisissez l'objet (vide : « Nouveau message via votre site web »). Dans Après l'envoi, choisissez Afficher un remerciement avec votre propre texte, ou Rediriger vers une page : une page de remerciement que vous créez vous-même et que vous laissez hors du menu (leçon 4.1). Cela vous permettra plus tard de mesurer combien de fois le formulaire est envoyé.

Envoyer via. La manière dont l'e-mail est envoyé. Serveur de WebOké fonctionne immédiatement, avec noreply@weboke.site comme expéditeur. Votre propre adresse e-mail (SMTP) est recommandé : l'e-mail provient alors de votre propre domaine et finit moins facilement dans les spams. Avec Le configurer pour moi, le générateur crée cette adresse sur votre domaine. Sous votre propre adresse e-mail, vous pouvez aussi choisir un service d'envoi d'e-mails, comme Postmark, Brevo, Mailgun ou SendGrid. Pourquoi l'expéditeur compte autant, vous le lirez dans la leçon 5.3.

Confirmation au visiteur. Activez Envoyer une copie au visiteur pour que le visiteur reçoive un e-mail de confirmation. C'est souvent le premier message qu'une personne reçoit de vous. Vous choisissez l'objet, Votre texte (avec {naam} pour le nom du visiteur), la Signature et si le message saisi est joint. Le générateur met votre texte en forme selon le style de votre site, avec votre logo. Avec Faire rédiger ce texte par l'IA, vous obtenez une proposition.

Bloquer le spam. Chaque formulaire dispose toujours d'une protection invisible : un champ caché et un délai minimal. Elle bloque la plupart du spam sans que les visiteurs s'en aperçoivent. Si vous recevez malgré tout beaucoup de spam, choisissez une protection supplémentaire, un captcha : Cloudflare Turnstile ou hCaptcha. Pour cela, vous créez un compte gratuit auprès de ce service et vous saisissez la Site key et la Secret key. N'activez un captcha que si c'est nécessaire : chaque étape supplémentaire vous fait perdre des visiteurs.

Newsletter. Vous pouvez ajouter au formulaire une case à cocher permettant aux visiteurs de s'inscrire chez Mailchimp, Laposta, Brevo ou MailerLite. Seules les personnes qui cochent elles-mêmes la case sont ajoutées. Toujours avec un double opt-in : le visiteur confirme d'abord son inscription par e-mail. Chez Laposta et MailerLite, vous l'activez vous-même dans le service ; le générateur vous indique où. Sans double opt-in, n'importe qui peut inscrire des adresses étrangères sur votre liste.

Par ailleurs : un visiteur peut envoyer au maximum 5 messages par heure. Si vous avez une politique de confidentialité, un lien vers celle-ci apparaît sous le formulaire. Un formulaire collecte des données personnelles ; ce que vous devez prévoir pour cela est expliqué dans la leçon 7.1.

Piège à éviter : testez vous-même le formulaire après chaque modification, depuis une autre adresse que l'adresse de réception. Regardez aussi dans votre dossier spam, et vérifiez que la confirmation arrive bien chez le « visiteur ».

Boutons flottants

Dans Paramètres > Boutons, vous placez des boutons qui restent visibles en bas de l'écran sur chaque page, à droite ou à gauche (Coin : En bas à droite ou En bas à gauche).

• Numéro WhatsApp : au format international, avec l'indicatif du pays et sans le 0 initial (par exemple +31 pour un numéro néerlandais, +33 pour un numéro français). Si vous laissez ce champ vide, il n'y a pas de bouton WhatsApp. Un Message prérempli est possible, par exemple « Je souhaite un devis pour des travaux de peinture. » Le bouton ouvre une conversation avec votre numéro.
• Bouton de contact flottant : ouvre votre formulaire de contact dans une fenêtre. Le message arrive à la même adresse que votre formulaire. Vous choisissez le Texte du bouton.

Dans l'aperçu, les boutons sont placés un peu plus haut que sur votre site réel, pour ne pas être cachés derrière le bouton d'aide du générateur.

Attention : un bouton WhatsApp promet une réponse rapide. Si vous ne lisez WhatsApp que le soir, préférez le bouton de contact.

Widgets d'autres services

Un widget est un élément d'un autre service affiché sur votre page : une vidéo YouTube, une carte Google Maps, un outil de prise de rendez-vous Calendly, votre Instagram, une playlist Spotify. Pour de nombreux services, le lien suffit ; le générateur crée lui-même le lecteur ou le formulaire. Exemples : YouTube, Vimeo, Spotify, Calendly, Google Maps (l'adresse suffit), Google Agenda, Instagram et TikTok (votre @nom suffit) et Google Forms. Pour d'autres services, comme Salonized, Trustpilot ou Bandcamp, vous collez le code d'intégration : le petit morceau de code que ce service vous fournit pour l'ajouter à un site web.

Voici comment faire : dites-le dans le chat en ajoutant le lien (« place notre carte d'accès sous le bloc contact, adresse 1 rue du Village »), collez le code dans le chat, ou choisissez le bloc Widget dans Blocs. Le générateur reconnaît le service, propose une hauteur et un titre, et vous avertit si quelque chose ne va pas fonctionner. Si vous laissez l'IA le placer, c'est une demande qui consomme des modifications ; vous voyez à l'avance combien. Pour modifier un widget déjà placé, utilisez Modifier le code sur le bloc dans l'aperçu.

Trois choses à savoir :

1. Un widget ne se charge qu'après consentement. Les services de tiers déposent souvent des cookies ou suivent les visiteurs. Lorsque le bandeau cookies est activé, un widget ne se charge que si le visiteur donne son consentement pour ce type de cookies. Le service apparaît automatiquement dans votre bandeau cookies, sous « Ce qui fonctionne actuellement sur votre site ». Vérifiez ensuite aussi votre politique de confidentialité (leçons 7.1 et 7.2).
2. Google Agenda doit être public. Un agenda privé n'est visible par personne d'autre. Dans Google Agenda, ne rendez public qu'un agenda séparé contenant ce que les visiteurs peuvent voir, jamais votre agenda personnel.
3. Le code dangereux n'est pas ajouté. Un code qui peut transmettre des données des visiteurs, qui dissimule ce qu'il fait ou qui charge quelque chose depuis un site inconnu, l'IA ne le place pas sur votre site. Elle explique pourquoi.

Code personnalisé et HTML personnalisé, dans les grandes lignes

Pour les utilisateurs avancés, il existe deux emplacements.

Code personnalisé se trouve en bas de Paramètres > Intégrations : du code qui doit figurer sur chaque page, Dans le head de chaque page ou En bas de chaque page. Par exemple le script de chargement d'un service de chat ou d'un widget d'avis. Le générateur ne vérifie pas ce code (« Nous ne vérifions pas ce code »). Le bandeau cookies bloque les services connus jusqu'à ce que le consentement soit donné. Ne cochez Ce code est indispensable que pour du code qui ne suit pas les visiteurs, car il se charge alors immédiatement. Dans l'aperçu du générateur, le code personnalisé n'est pas exécuté ; sur votre site réel, il l'est. Sur le site gratuit, le code personnalisé ne fonctionne pas. Pour un identifiant de mesure comme Google Analytics, n'utilisez pas le Code personnalisé, mais le champ prévu à cet effet dans Intégrations (leçon 7.2).

HTML personnalisé est un bloc disponible dans Blocs. Vous y collez votre propre HTML et éventuellement du CSS, et vous le modifiez ensuite avec Modifier le HTML. Les couleurs et les polices suivent votre identité visuelle. Les scripts, les iframes et les formulaires ne fonctionnent pas ici ; pour cela, utilisez un widget.

N'utilisez ces deux options que si vous n'avez pas d'autre solution : le code d'un tiers représente un risque pour la vitesse, la sécurité et la confidentialité.

Dans le générateur : comment faire

1. Placez le bloc Contact avec formulaire sur votre page de contact.
2. Ouvrez Paramètres > Formulaires. Remplissez Envoyer les messages à.
3. Dans Envoyer via, choisissez votre propre adresse e-mail, ou laissez le serveur de WebOké jusqu'à ce que votre domaine soit prêt (leçon 5.3).
4. Activez Envoyer une copie au visiteur et rédigez votre propre texte.
5. Dans Après l'envoi, choisissez un remerciement ou une page de remerciement.
6. Si nécessaire, ajoutez un bouton WhatsApp ou de contact dans Paramètres > Boutons.
7. Mettez votre site en ligne et envoyez un message de test.

Résumé

• Le formulaire se trouve sur une page ; ce qu'il en advient se règle dans Paramètres > Formulaires.
• Remplissez Envoyer les messages à en connaissance de cause ; choisissez de préférence votre propre adresse e-mail comme expéditeur.
• Sur le site gratuit, le formulaire n'envoie aucun e-mail ; joindre un fichier n'est jamais possible.
• Les boutons flottants pour WhatsApp et le contact se trouvent dans Paramètres > Boutons.
• Les widgets ne se chargent qu'après consentement ; le Code personnalisé et le HTML personnalisé sont réservés aux utilisateurs avancés.

Quiz

Exercice

Exercice D4.3 : Votre formulaire de contact et un widget. Configurez entièrement votre formulaire et placez un widget qui apporte vraiment quelque chose.

Checklist :

• [ ] bloc Contact avec formulaire sur votre page de contact ;
• [ ] Envoyer les messages à rempli avec une adresse que vous lisez tous les jours ;
• [ ] mode d'envoi choisi, en comprenant pourquoi ;
• [ ] confirmation au visiteur avec votre propre texte ;
• [ ] remerciement ou page de remerciement configuré ;
• [ ] un widget placé (par exemple une carte ou un outil de prise de rendez-vous) et vérifié qu'il figure dans le bandeau cookies ;
• [ ] site en ligne et message de test envoyé (uniquement avec une formule ; sur le site gratuit, vous vérifiez les paramètres).

Questions :

1. À quelle adresse arrivent les messages de votre formulaire, et via quel mode d'envoi ?
2. Quel widget avez-vous choisi, qu'apporte-t-il à votre visiteur et que voit un visiteur qui ne donne pas son consentement ?
3. Votre message de test est-il arrivé, et la confirmation est-elle arrivée chez le « visiteur », ou dans les spams ?

Après « terminé », vous verrez un exemple de réponse : Schildersbedrijf Example envoie les messages à info@example.com via sa propre adresse e-mail sur le domaine ; le widget est une carte Google Maps avec l'adresse, qui ne se charge qu'après consentement et affiche sinon une zone avec un bouton pour donner son consentement ; le message de test est arrivé, la confirmation aussi, pas dans les spams.

Pour aller plus loin

• Un formulaire de contact sur votre site web : recevoir les champs par e-mail et éviter le spam
• Cours gratuit E-mail en ordre : configuration et bonne réception des messages 7.3: E-mail depuis votre site web et les formulaires
• Cours gratuit E-mail en ordre : configuration et bonne réception des messages 7.2: Consentement, désabonnement et liste propre
• Utiliser la fonctionnalité « Click to chat » (centre d'aide WhatsApp) : https://faq.whatsapp.com/5913398998672934
• Create & manage a public Google calendar (aide Google Agenda, en anglais) : https://support.google.com/calendar/answer/37083