Widgets : Contact Forms

Catégories de widgets : Business

Le widget Contact Form ajoute un formulaire web à votre site, par exemple pour des inscriptions à votre newsletter, des questions de clients ou simplement pour recueillir des avis. Il offre à vos visiteurs différents champs de saisie : texte, menu déroulant, boutons radio, cases à cocher, date, heure, e-mail et numéro de téléphone.

Avertissement : mieux vaut ne pas dupliquer les formulaires de contact ; le formulaire dupliqué pose généralement problème.

Pour savoir comment ajouter des widgets, consultez « Add Widgets ».

Éditeur de contenu : configurer le formulaire

Cliquez sur l'élément pour ouvrir le menu flottant, puis sur l'option de l'éditeur de contenu.

Champs du formulaire de contact

Pour modifier un champ existant, cliquez sur son nom dans la liste.

Pour ajouter de nouveaux champs, cliquez sur Ajouter le champ.

Après avoir cliqué sur un champ existant ou ajouté un nouveau champ, des réglages supplémentaires apparaissent. Beaucoup d'entre eux dépendent du Type de champ que vous choisissez.

Remarque :

• Sur les boutons radio et les cases à cocher, vous pouvez ajouter des images à afficher pour les options. Les images n'apparaissent pas dans l'e-mail que vous recevez avec les envois du formulaire, mais l'étiquette sélectionnée, elle, apparaît (même si elle est masquée sur le site).
• Notez que l'apparence des champs de saisie sur votre site publié peut différer légèrement de ce que vous voyez dans l'éditeur, selon le navigateur utilisé.

Réglages et considérations pour les champs de contact

• La plupart des types de champ ont ces options :
  • Champ obligatoire. Si un champ obligatoire reste vide, un cadre rouge apparaît autour de lui au moment d'envoyer le formulaire. Il n'y a pas encore d'indicateur ajouté automatiquement (par exemple un astérisque), mais vous pouvez en ajouter un à la main dans l'Étiquette de champ ou l'Espace réservé.
  • Commencer une nouvelle ligne au niveau de ce champ.
  • Taille du champ. Personnalisez la largeur du champ.
• Sur les boutons radio et les cases à cocher, vous pouvez ajouter des images à afficher pour les options. Les images n'apparaissent pas dans l'e-mail que vous recevez avec les envois du formulaire, mais l'étiquette sélectionnée, elle, apparaît (même si elle est masquée sur le site).
• Champ d'heure : le bouton Utiliser le format 24 heures n'affecte que l'heure affichée dans les envois ; le format du sélecteur d'heure que voient les visiteurs dépend des réglages de leur navigateur.
• Champ de fichier joint :
  • Le nom du fichier ne doit pas contenir d'espace au moment de l'importer.
  • La taille maximale des fichiers joints est de 10 Mo.
  • Un seul fichier peut être importé par champ de fichier joint (si vous devez en importer plusieurs, prévoyez un champ pour chacun).
  • Les formats de fichier suivants sont pris en charge : .pdf, .xls, .xlsx, .doc, .docx, .zip, .ppt, .pptx, .psd, .txt, .xml, .mp3, .ttf, .otf, .woff, .eot, .svg, .odt, .ott, .js, .css, .png, .jpg, .gif, .jpeg, .rar, ainsi que tous les formats de fichier vidéo.
  • Les fichiers joints envoyés expirent au bout de 90 jours.
  • Les fichiers ne sont pas ajoutés au Gestionnaire de médias.
• Champ de numéro de téléphone : le champ de numéro de téléphone vérifie la validation pour s'assurer que les conditions de format sont remplies ; si ce n'est pas le cas, une erreur avec un message s'affiche. Les conditions sont : au moins un chiffre et aucun caractère non valide. Outre les chiffres, les caractères valides sont les espaces, les signes plus (+), les tirets (-) et les points (.).

Bouton Submit

Personnalisez le texte que vous voulez faire apparaître sur le bouton Envoyer.

reCAPTCHA

Par défaut, une validation reCAPTCHA est ajoutée aux nouveaux formulaires. Elle protège votre formulaire des spammeurs et accélère l'envoi pour vos visiteurs.

Choisissez une position pour le reCAPTCHA.

Décidez si le reCAPTCHA s'affiche dans le formulaire sous forme d'icône ou de texte.

Remarque : le reCAPTCHA ne peut pas être désactivé.

Envois (options et réglages pour après l'envoi d'un formulaire)

Notification de nouvel envoi

Pour définir l'adresse e-mail et l'objet de réception des réponses du formulaire, cliquez sur Notification de nouvelle soumission. Veillez à saisir l'adresse e-mail dans le champ Les soumissions de formulaire seront envoyées à pour recevoir une copie des informations envoyées.

Si le champ Les soumissions de formulaire seront envoyées à est vide, c'est l'adresse e-mail principale de la Content Library qui est utilisée. À défaut d'une telle adresse, le titulaire du compte devient le destinataire par défaut des envois. Toutes les réponses arrivent sur la page des réponses du formulaire.

Actions après l'envoi

Cliquez sur Actions après soumission pour configurer ce qui suit :

• Messages de remerciement et d'erreur. Utilisez le Rich Text Editor pour ajouter de la couleur, de l'emphase (gras, italique et souligné) et des puces, et pour saisir le texte dans les champs.
• Réglages de redirection. Vous pouvez rediriger vers une page de votre site ou vers un site externe.
• Réglages d'e-mail : par défaut, une réponse automatique est envoyée à la personne qui a envoyé le formulaire, avec une copie de son envoi (tant que l'adresse e-mail indiquée est valide). Lorsque cette option est activée, les réglages supplémentaires ci-dessous apparaissent.
  • Répondre automatiquement à la personne qui envoie le formulaire. Par défaut, une réponse automatique est envoyée à la personne qui envoie le formulaire (tant que l'adresse e-mail indiquée est valide). Pour la désactiver, désactivez l'option Répondre automatiquement à la personne qui envoie le formulaire.
  • Nom du formulaire. Vous pouvez aussi définir le Nom du formulaire (le nom que vous saisissez ici apparaît dans le champ « From » de l'e-mail envoyé). Si la réponse automatique est désactivée, ce réglage n'est pas disponible.
  • Objet de l'e-mail. Si la réponse automatique est désactivée, ce réglage n'est pas disponible.
  • Message électronique. Si la réponse automatique est désactivée, ce réglage n'est pas disponible.
  • Inclure dans l'e-mail une copie de la réponse au formulaire. Cette option est activée par défaut. Décochez la case pour la désactiver. Si la réponse automatique est désactivée, ce réglage n'est pas disponible.

Suivi

Pour ajouter du code de suivi à votre formulaire, cliquez sur Suivi et collez le code de conversion ou AdWords dans le champ prévu.

Titre du formulaire

Saisissez un titre pour le formulaire. Pour le masquer, cliquez sur l'icône de l'œil.

Remarque : un titre modifié ne prend effet qu'après l'envoi d'une nouvelle réponse. Si vous êtes pressé, envoyez une réponse de test et attendez quelques minutes que le formulaire se mette à jour.

Onglet Integrations (offres de tiers)

Dans l'onglet Intégrations, envoyez les données des envois réussis à un service tiers. Vous trouverez plus de détails plus bas, dans la section Intégrations du formulaire de contact (options de configuration supplémentaires).

Intégrations du formulaire de contact (options de configuration supplémentaires)

Pour élargir la portée de votre formulaire de contact, connectez-le à différentes solutions tierces.

Pour ajouter une intégration, dans la zone de contenu, cliquez sur l'onglet Intégrations.

Remarque : nous ne proposons plus Mailchimp ni Constant Contact comme intégrations du formulaire de contact. Si vous les aviez installées auparavant, elles resteront disponibles pour votre site.

Intégration avec Google Sheets

Avec l'intégration Google Sheets, les données de chaque envoi du formulaire de contact arrivent aussitôt dans une feuille de calcul Google Sheets. Tous les champs de contact du formulaire y sont reportés, avec un horodatage du moment de l'envoi.

1. Cliquez sur Google Sheets, puis sur S'INSCRIRE AVEC GOOGLE.
2. Cliquez sur Allow pour accorder les autorisations de connexion à votre compte Google. Si votre ordinateur est connecté à plusieurs comptes Google, choisissez celui que vous voulez connecter à ce formulaire.
3. Choisissez si vous voulez ajouter les données à une feuille de calcul existante ou à une nouvelle.
4. Choisissez la feuille de calcul vers laquelle envoyer les données du formulaire. Vous pouvez la sélectionner dans une liste ou en chercher une précise avec la barre de recherche.

Remarque :

• Si vous avez plusieurs formulaires sur le site, vous pouvez connecter chacun à une feuille de calcul différente, y compris à des feuilles de comptes Google différents.
• Vous pouvez connecter plusieurs formulaires à la même feuille de calcul. Dans ce cas, veillez à ce que les champs et leur ordre soient identiques dans les formulaires, pour que les informations envoyées s'y intègrent.
• Envoyer les données du formulaire vers une feuille de calcul Google ne vous empêche pas de les télécharger au format .csv ni de continuer à recevoir les e-mails des envois.

Intégrations avec webhooks

De nombreux services en ligne et dans le cloud se connectent grâce à ce qu'on appelle les webhooks. Un webhook envoie des notifications vers une adresse web précise, l'URL d'endpoint. Ainsi, votre formulaire de contact peut envoyer un événement à chaque envoi.

Pour le connecter à un autre service, créez une URL d'endpoint propre dans le service de votre choix et collez-la dans le champ d'intégration des webhooks du formulaire de contact. À partir de là, à chaque envoi, le formulaire envoie une requête POST à l'endpoint, avec les données au format JSON dans le corps. Voici un exemple de ces données JSON :

{"Submission Date":"06/02/2016 10:23:54","Form Title":"Contact Us","Name":"John Smith","Email":"test@example.com","Phone":"(555).555.1212","Message":"Webhook Form Submission!"}

Remarque : « Submission Date » et « Form Title » sont toujours renseignés. Les autres champs (field_name : value) dépendent des champs configurés dans le formulaire. Toutes les informations des champs sont envoyées sous forme de chaîne de texte, entre guillemets. Par exemple, le 7 est envoyé sous la forme « 7 ».

Créer une URL d'endpoint

Un endpoint se trouve sur un service tiers (par exemple Zapier ou Slack) ou sur un serveur que vous contrôlez. Il est spécialement prévu pour recevoir les notifications du webhook.

Idées d'intégrations :

• Slack. Une application de messagerie robuste que vous pouvez connecter pour recevoir des notifications dès qu'un formulaire est envoyé.
• Intégration personnalisée. Créez vos propres webhooks pour les connecter au formulaire de contact. Par exemple, enregistrez les envois dans une base de données ou connectez-les à des applications propres ou à des services tiers.

Exemple de configuration de webhooks/URL d'endpoint sur Slack

1. Dans l'application Slack, ouvrez le menu déroulant principal du compte, puis cliquez sur Apps & Integrations.
2. Le site web de Slack s'ouvre. En haut à droite, cliquez sur Build.
3. Cliquez sur Make a Custom Integration.
4. Choisissez Incoming Webhooks.
5. Choisissez un canal existant ou créez-en un nouveau où vos messages seront publiés.
6. Copiez votre URL de webhooks.
7. Ajustez les réglages et les options à votre convenance, puis cliquez sur ENREGISTRER LES PARAMÈTRES.
8. Ouvrez l'éditeur du formulaire de contact et collez votre URL de webhooks dans le champ Webhooks.
9. Cliquez sur Terminé.

Prévisualisez votre site et envoyez le formulaire de contact pour tester l'intégration.

Vous recevrez alors un message sur Slack à chaque envoi de votre formulaire de contact.

Éditeur de design : mettre en forme le formulaire

Cliquez sur l'élément pour ouvrir le menu flottant, puis sur l'option de modification du design.

Mise en page

Dans l'onglet Mise en page :

• Cliquez sur l'icône de mise en page pour choisir une mise en page pour le formulaire de contact.
• Pour changer l'alignement du formulaire, cliquez sur Gauche ou Droit(e).

Item

Dans l'onglet Élément :

• Pour modifier le style et le texte des champs, cliquez sur Champs.
• Pour modifier le style et le texte du bouton, cliquez sur Bouton. Pour revenir au style du thème, cliquez sur Rétablir le style de thème du site.

Cadre

Dans l'onglet Cadre :

• Pour modifier le style du cadre, cliquez sur Style de cadre. Vous pouvez changer l'arrière-plan en ajoutant une couleur ou une image.
• Pour changer le style du texte du titre, cliquez sur Titre du formulaire.
• Pour changer le style du texte de la notification d'envoi, cliquez sur Envoi de messages.

Pour en savoir plus sur les options de design qui ne sont pas propres à ce widget (par exemple la mise en page, le style ou l'espacement), consultez « Widget Design ».

Aperçu des réponses du formulaire : envois depuis votre site

Les réponses sont accessibles à plusieurs endroits : le Tableau de bord du projet, l'éditeur et le formulaire lui-même.

Remarque : les envois du formulaire faits depuis le lien de prévisualisation ou la prévisualisation dans le site arrivent au destinataire défini (ou au titulaire du compte si aucun n'a été défini). En revanche, ils n'apparaissent pas dans les réponses du site et ne figurent pas dans l'export CSV.

Tableau de bord du projet (gérer, supprimer et exporter)

Pour accéder aux réponses du formulaire dans le Tableau de bord du projet :

1. Dans le panneau latéral, cliquez sur Plus, puis sur Tableau de bord du projet. Sélectionnez Form Response (dans la barre latérale d'options, sous Présentation du site).
2. Pour exporter les réponses, cliquez sur Exporter au format CSV, en haut à droite de la section « Form Responses ».
3. Pour gérer les réponses, cliquez sur Gérer les réponses.
4. La page « Form Responses » s'ouvre et vous permet de supprimer n'importe quelle réponse à n'importe quel formulaire du site. Dans le champ de recherche Rechercher des réponses, vous pouvez chercher les réponses qui vous intéressent. Veillez à chercher le nom, l'expression ou les caractères exacts.
5. Cliquez sur l'onglet du formulaire voulu pour ouvrir un tableau qui comprend :
   • la date d'envoi de la réponse du formulaire.
   • ce qui a été saisi dans chacun des champs du formulaire.
   • la possibilité de supprimer la réponse du formulaire.

Dans l'éditeur (gérer et supprimer)

Pour accéder aux réponses du formulaire dans l'éditeur :

1. Dans le panneau latéral, cliquez sur Plus, puis sur Paramètres.
2. Cliquez sur Gérer les réponses du formulaire.
3. L'écran « Form Responses » s'ouvre et vous permet de supprimer n'importe quelle réponse à n'importe quel formulaire du site. Dans le champ de recherche Rechercher des réponses, vous pouvez chercher les réponses qui vous intéressent. Veillez à chercher le nom, l'expression ou les caractères exacts.
4. Cliquez sur l'onglet du formulaire voulu pour ouvrir un tableau qui comprend :
   • la date d'envoi de la réponse du formulaire.
   • ce qui a été saisi dans chacun des champs du formulaire.
   • la possibilité de supprimer la réponse du formulaire.

Depuis le formulaire lui-même (exporter uniquement)

Pour exporter les réponses depuis le formulaire :

1. Dans l'éditeur du site, allez au formulaire voulu.
2. Faites un clic droit sur le formulaire.
3. Dans le menu contextuel, sélectionnez Télécharger les réponses.

Remarque : si l'option n'est pas disponible, cela peut signifier qu'il n'y a pas encore eu de réponses sur le site publié.

Répondre aux envois du formulaire de contact de vos clients

Pour répondre à l'envoi du formulaire de contact d'un client directement depuis votre e-mail, cliquez simplement sur Répondre au client dans l'e-mail que vous recevez de Website Builder. L'adresse e-mail de la personne qui a envoyé le formulaire se place alors automatiquement dans le champ « To », ce qui vous permet de répondre directement. Notez que si le client a indiqué plusieurs adresses e-mail, seule la première est utilisée.

Remarque : une réponse envoyée ainsi peut se retrouver marquée comme spam, selon l'adresse e-mail et les réglages de la personne qui a envoyé le formulaire. Pour que votre réponse lui parvienne, envisagez de copier son adresse e-mail et d'envoyer plutôt un nouvel e-mail.

Configurer un formulaire de contact conforme au RGPD

Pour obtenir le consentement de vos visiteurs lors de l'envoi du formulaire de contact, ajoutez un nouveau champ à votre formulaire et choisissez comme Type de champ l'option Consentement ou Texte libre.

Opt-in ou Texte libre

Un champ Consentement doit être coché par la personne qui envoie le formulaire, sans quoi celui-ci ne peut pas être envoyé. Ce champ comporte aussi un texte par défaut : « By checking, I agree to share my form responses. ».

Le champ Texte libre, en revanche, n'affiche que l'avis de votre choix. Comme c'est un champ polyvalent, il ne comporte aucun texte par défaut ni suggéré.

Pour ajouter un champ Consentement ou Texte libre :

1. Ouvrez l'onglet de contenu du formulaire. Cliquez sur l'élément pour ouvrir le menu flottant, puis sur l'option de l'éditeur de contenu.
2. Cliquez sur Ajouter le champ.
3. Cliquez sur le menu déroulant Type de champ et choisissez Consentement ou Texte libre.
4. Configurez le champ comme vous le souhaitez.

Questions fréquentes et résolution des problèmes

Remarque : si aucun destinataire d'envois n'est défini, c'est l'adresse e-mail principale de la Content Library qui est utilisée. À défaut d'une telle adresse, le titulaire du compte devient le destinataire par défaut des envois. Toutes les réponses arrivent sur la page des réponses du formulaire.

Je ne reçois pas les envois du formulaire

Si vous ne recevez aucun envoi du formulaire fait avec le widget Contact Form, c'est très probablement parce que nos e-mails sont filtrés comme spam sur votre serveur de messagerie.

Si vous ne recevez pas d'e-mails de Website Builder, regardez dans votre dossier spam. S'ils ne s'y trouvent pas non plus, ajoutez à votre liste d'autorisation les adresses IP 167.89.22.215, 149.72.216.48, 149.72.184.31, 149.72.166.161 et 149.72.162.205 dans les réglages de votre fournisseur de messagerie.

Autres conseils de dépannage :

• Vérifiez les réponses du formulaire pour confirmer que le formulaire de contact fonctionne. Vous pouvez cliquer sur le formulaire de contact puis sur les réponses du formulaire pour les télécharger.
• Vérifiez que l'adresse e-mail est valide. Si vous saisissez plusieurs adresses, séparez-les par une virgule (sans espaces).
• Regardez dans votre dossier spam.
• Vérifiez les réglages de filtre et de liste de blocage de votre messagerie pour vous assurer qu'ils ne bloquent pas les e-mails.
• Ajoutez no-reply@multiscreensite.com à votre liste d'autorisation.
• Créez une nouvelle page et insérez-y votre formulaire de contact pour voir s'il fonctionne.
• Désactivez tous les scripts personnalisés de votre site dans les réglages du site.

Remarque : si votre formulaire de contact ne fonctionne toujours pas après cette liste de vérifications, contactez votre fournisseur de messagerie pour comprendre pourquoi les e-mails des envois du formulaire de contact ne vous parviennent pas.

Si le formulaire fonctionne sur une autre page de votre site mobile mais pas sur celle où il devrait, c'est souvent qu'un script personnalisé interfère avec son fonctionnement. Réinitialisez la page ou examinez le HTML du head de la page et du site à la recherche de scripts personnalisés susceptibles d'en être la cause.

Comment configurer l'envoi d'un e-mail automatique après un envoi ?

Un réglage, activé par défaut, envoie un e-mail automatique avec une copie de l'envoi.

Pour gérer ce réglage :

1. Cliquez sur l'élément pour ouvrir le menu flottant, puis sur l'option de l'éditeur de contenu.
2. Sélectionnez l'onglet Soumission.
3. Cliquez sur Actions après soumission.
4. Descendez jusqu'aux paramètres de l'e-mail.

Vous trouverez plus de détails sur les actions après l'envoi dans la section Actions après l'envoi de cet article.