Ajout d'un formulaire de contact

Présentation

Utilisez le widget Contact Form (Formulaire de contact) pour ajouter un formulaire Web complet sur votre site Web. Le formulaire de contact vous permet de mettre à disposition des visiteurs différents champs de saisie, notamment des zones de texte, des menus déroulants,des boutons radio, des cases à cocher, des champs de saisie de date, d'heure, d'e-mail et de numéro de téléphone. Vous pouvez utiliser le formulaire pour les adhésions à la newsletter électronique, les questions des clients ou simplement pour recueillir des commentaires de la part des visiteurs de votre site.

Guide

1. Ajoutez le widget Contact Form (Formulaire de contact) sur votre créateur de site Web. Pour en savoir plus sur l'ajout de widgets sur votre site Web,  voir Ajout de widgets. Une fois le widget placé, l'éditeur de contenu s'affiche.

2. Décidez des informations que vous aimeriez recueillir auprès de vos visiteurs, puis modifiez le champ existant en cliquant sur le nom du champ.

3. Ajoutez de nouveaux champs en cliquant sur le bouton Add field (Ajouter un champ).

addacontactform_1_en-US.png

4. Cliquez sur l'onglet Submission (Dépôt). Dans la section Submission recipients (Destinataires du dépôt), définissez l'adresse e-mail et l'objet pour recevoir les réponses au formulaire. addacontactform_2_en-US.png5. Dans la section Submission actions (Actions liées au dépôt), définissez les messages de confirmation et d'erreur lorsque les visiteurs déposent le formulaire. Utilisez l'éditeur de texte enrichi pour ajouter de la couleur, une accentuation (gras, italique et soulignement) et des puces au texte dans les messages.

addacontactform_3_en-US.png6. Dans la section Tracking (Suivi), ajoutez un code de suivi à votre formulaire. Si vous avez AdWords ou tout autre code de conversion, vous pouvez coller ce code ici. addacontactform_4_en-US.png

Intégrations

Vous pouvez étendre la portée de votre formulaire de contact en l'intégrant à Google Sheets, Mailchimp, Constant Contact ou à une application tierce utilisant des webhooks.

Intégration à Google Sheets

Ajoutez instantanément les données du formulaire de contact à une feuille de calcul dans Google Sheets. Tous les champs de contact du formulaire sont renseignés dans la feuille de calcul, y compris un horodatage de la date et l'heure de soumission du formulaire.

Étapes du processus

Cliquez sur l'onglet Integrations (Intégrations) dans la zone des paramètres généraux du formulaire de contact.
addacontactform_5_en-US.png

Développez l'option Google Sheets et cliquez sur SIGN IN WITH GOOGLE (SE CONNECTER AVEC GOOGLE).

addacontactform_6_en-US.png

Cliquez sur Allow (Autoriser) pour accorder des autorisations de connexion à votre compte Google. Si votre ordinateur est connecté à plusieurs comptes Google, choisissez celui que vous souhaitez connecter à ce formulaire.

addacontactform_7_en-US.png

Indiquez si vous souhaitez ajouter des données à une feuille de calcul existante ou à une nouvelle feuille.

addacontactform_13_en-US.png

Sélectionnez la feuille de calcul vers laquelle vous souhaitez envoyer les données du formulaire. Vous pouvez sélectionner la feuille de calcul dans une liste ou utiliser la barre de recherche pour trouver une feuille spécifique.

addacontactform_9_en-US.png

Autres remarques

  • Si vous disposez de plusieurs formulaires sur le site, vous pouvez connecter chacun d'eux à une feuille de calcul différente, y compris des feuilles de calcul de comptes Google différents.
  • Vous pouvez également connecter deux formulaires à la même feuille de calcul. Dans ce cas, assurez-vous que les champs et l'ordre du formulaire sont identiques afin qu'ils correspondent aux informations soumises.
  • L'envoi de données de formulaire vers une feuille de calcul Google ne vous empêche pas de télécharger les données dans un fichier CSV ou de recevoir des e-mails de soumission de formulaire.

Intégration à MailChimp

MailChimp est un excellent outil pour la distribution de campagnes d'e-mails, de newsletters, etc. En utilisant l'intégration de nouveaux formulaires, les propriétaires de sites peuvent gérer des listes de contact de clients potentiels (visiteurs du site), en collectant les adresses e-mail, qui sont soumises au formulaire, et les envoyer automatiquement à MailChimp.

Vous devez posséder un compte MailChimp. Une fois que vous disposez d'un compte, créez une liste de diffusion dans votre compte MailChimp où les coordonnées seront recueillies.

Étapes du processus

Cliquez sur l'onglet Integrations (Intégrations) dans la zone des paramètres généraux du formulaire de contact.

addacontactform_10_en-US.png

Développez l'option MailChimp et choisissez CONNECT TO MAILCHIMP (SE CONNECTER À MAILCHIMP).

addacontactform_11_en-US.png

Connectez-vous avec vos identifiants MailChimp.

addacontactform_12_en-US.png

Sélectionnez votre liste de contacts MailChimp dans le menu déroulant.

addacontactform_18_en-US.png

Configurez les champs de votre formulaire. Outre l'adresse e-mail, le formulaire de contact peut automatiquement envoyer les champs du prénom et du nom à MailChimp. Vous devez configurer les champs de l'adresse e-mail, du prénom et du nom dans le formulaire.

addacontactform_14_en-US.png

Intégration à Constant Contact

Cette intégration est similaire à celle de MailChimp, mais permet aux propriétaires de site de créer des listes de diffusion dans leur compte Constant Contact.

Vous devez posséder un compte Contact Constant. Une fois que vous disposez d'un compte, créez une liste de diffusion dans votre compte Contact Constant où les coordonnées seront recueillies.

Étapes du processus

Cliquez sur l'onglet Integrations (Intégrations) dans la zone des paramètres généraux du formulaire de contact.

addacontactform_15_en-US.png

Développez l'option Contact Constant et choisissez CONNECT TO CONTACT CONSTANT (SE CONNECTER À CONSTANT CONTACT).

addacontactform_16_en-US.png

Connectez-vous avec vos identifiants Constant Contact.

addacontactform_17_en-US.png

Sélectionnez votre liste Constant Contact dans le menu déroulant.

addacontactform_18_en-US.png

Configurez les champs de votre formulaire. Outre l'adresse e-mail, le formulaire de contact peut automatiquement envoyer le prénom, le nom et le numéro de téléphone à Constant Contact. L'utilisateur doit configurer les champs de l'adresse e-mail, du prénom et du nom dans le formulaire de contact. L'adresse e-mail et le message texte sont ajoutés par défaut.

addacontactform_19_en-US.png

Intégrations de webhooks

De nombreux services de cloud et en ligne proposent des intégrations par l'intermédiaire de chemins appelés webhooksLes webhooks envoient des notifications à une adresse Web spécifique appelée l'URL de point de terminaison. Vous pouvez connecter le formulaire de contact pour envoyer un événement lors de la soumission du formulaire.

Pour connecter le formulaire de contact à un autre service à l'aide de webhooks, il vous suffit de créer une URL de point de terminaison personnalisée avec le service de votre choix et de la coller dans le champ d'intégration de webhooks du formulaire de contact. Une fois que vous avez ajouté l'URL d'un webhook, le formulaire de contact envoie une requête POST au point de terminaison avec les données du corps au format JSON lorsque le formulaire de contact est soumis sur le site Web. Voici un exemple de données au format JSON qui seront envoyées :

{"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 : les valeurs "Submission Date" et "Form Title" seront toujours renseignées, les autres champs (field_name: value) sont basés sur les champs configurés dans le formulaire.

Création d'une URL de point de terminaison

Les points de terminaison sont configurés sur des services tiers (par exemple, Zapier ou Slack) ou un autre serveur que vous contrôlez. Ces points de terminaison sont spécifiquement configurés pour recevoir des notifications du webhook.

addacontactform_20_en-US.png

Idées d'intégration

Zapier - Connectez les données de formulaire de contact à Zapier pour profiter de possibilités illimitées. Connectez-vous à pratiquement tous les services de cloud modernes, notamment les services de gestion de la relation client comme Salesforce, Sugar CRM, Zoho, etc.

Slack - Application de messagerie robuste. Connectez-vous pour recevoir des notifications dès que des données de formulaire sont soumises.

Intégration personnalisée - Créez vos propres webhooks personnalisés pour les intégrer au formulaire de contact. Par exemple, vous pouvez enregistrer les soumissions dans une base de données ou vous connecter à des applications personnalisées ou des services de tiers.

Exemple de configuration de webhooks / d'URL de point de terminaison sur Slack

Dans l'application Slack, ouvrez le menu déroulant principal du compte, puis cliquez sur Apps & Integrations (Applications et intégrations).

addacontactform_21_en-US.png

Le site Web Slack s'ouvre. Dans le coin supérieur droit, cliquez sur le bouton Build (Créer).

addacontactform_22_en-US.png

Cliquez sur Make a Custom Integration (Créer une intégration personnalisée).

addacontactform_23_en-US.png

Sélectionnez Incoming Webhooks (Webhooks entrants).

addacontactform_24_en-US.png

Sélectionnez un canal existant ou créez un nouveau canal où vos messages seront publiés.

addacontactform_25_en-US.png

Copiez votre URL Webhooks.

addacontactform_26_en-US.png

Réglez les paramètres et les options à votre convenance, puis cliquez sur Save Settings (Enregistrer les paramètres).

addacontactform_27_en-US.png

Retournez ensuite sur le formulaire de contact et collez l'URL de vos webhooks dans le champ Webhooks.Cliquez sur Done (Terminé) pour terminer la configuration.

addacontactform_28_en-US.png

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

addacontactform_29_en-US.png

Si le message s'affiche sur le canal sélectionné, félicitations ! Vous êtes fin prêt ! Vous recevrez désormais un message sur Slack lors de chaque soumission de votre formulaire de contact.

addacontactform_30_en-US.png

Pièces jointes

Des fichiers peuvent être joints à des soumissions de formulaire de contact. Pour cela, il faut créer un champ dédié aux pièces jointes dans le formulaire de contact. Les liens vers les fichiers téléchargés sont disponibles dans le fichier de téléchargement des soumissions de formulaire, ainsi que dans chacune des intégrations de formulaire telles que Webhooks et Google Sheets.

Étapes du processus

Ajoutez un nouveau champ à n'importe quel formulaire de contact.

addacontactform_31_en-US.png

Sélectionnez la pièce jointe à partir du menu déroulant. Vous pouvez modifier le texte du paramètre fictif pour changer le nom de ce champ.

addacontactform_32_en-US.png

Un lien permettant de télécharger des fichiers s'ajoute alors à votre formulaire.

addacontactform_33_en-US.png

Conception

Ouvrez l'éditeur de conception en cliquant sur l'onglet Design (Conception) dans le coin supérieur gauche ou en effectuant un clic droit sur le widget et en sélectionnant « Edit Design » (Modifier la conception) pour modifier la disposition des boutons, les champs, l'encadrement et l'espacement. 

addacontactform_34_en-US.png

Disposition

Cliquez sur l'onglet Layout (Disposition), puis sur l'icône Layout (Disposition) afin de choisir une mise en page différente pour le formulaire de contact. Modifiez l'alignement du formulaire en effectuant un clic gauche ou droit en fonction de l'alignement que vous souhaitez pour les espaces de champs.

addacontactform_35_en-US.png

Champ

Cliquez sur l'onglet Item (Champ) pour modifier le style et le texte des champs, ainsi que le style et le texte des boutons. Vous pouvez modifier la conception des champs et des boutons, par exemple la couleur d'arrière-plan et le style des bordures, et modifier le texte des champs et des boutons, notamment sa taille, sa police, son alignement, etc. Revenez au style par défaut en cliquant sur le bouton « Revert to global design » (Revenir au style par défaut).

addacontactform_36_en-US.png

Encadrement

Cliquez sur l'onglet Frame (Encadrement) pour modifier le style d'encadrement. Vous pouvez modifier l'arrière-plan en ajoutant une couleur ou une image, changer le style de texte de la notification de soumission, ajouter une bordure et personnaliser la police dans le titre du formulaire.

addacontactform_37_en-US.png

Espacement 

Cliquez sur l'onglet Spacing (Espacement) pour modifier l'espacement intérieur et extérieur du formulaire de contact. Pour en savoir plus sur l'espacement, cliquez ici.

addacontactform_38_en-US.png

Pièces jointes

Des fichiers peuvent être joints à un formulaire de contact. Pour cela, il faut créer un champ dédié aux pièces jointes dans le formulaire de contact. Les visiteurs disposeront d'un lien qui leur permettra de télécharger leurs fichiers via le formulaire de contact.

Pour ajouter cette option à votre formulaire :

  1. Ajoutez un nouveau champ à n'importe quel formulaire de contact.
  2. Sélectionnez la pièce jointe à partir du menu déroulant. Vous pouvez modifier le texte du paramètre fictif pour changer le nom de cette zone.
  3. Un lien permettant de télécharger des fichiers s'ajoute alors à votre formulaire.

Remarques

Les formulaires de contact constituent un formidable outil pour recueillir des informations auprès des visiteurs et des clients. Veillez à saisir votre adresse e-mail lors du renseignement des destinataires du dépôt afin d'obtenir une copie des informations déposées.

Ressources