{"id":2274,"date":"2020-08-21T13:00:28","date_gmt":"2020-08-21T11:00:28","guid":{"rendered":"https:\/\/www.easyhost.be\/fr\/help\/?post_type=ht_kb&#038;p=2274"},"modified":"2022-04-27T19:14:45","modified_gmt":"2022-04-27T17:14:45","slug":"sitebuilder-integrations-du-formulaire-de-contact","status":"publish","type":"ht_kb","link":"https:\/\/www.easyhost.be\/fr\/help\/kb\/sitebuilder-integrations-du-formulaire-de-contact\/","title":{"rendered":"Int\u00e9grations du formulaire de contact"},"content":{"rendered":"<section class=\"article-info\">\n<div class=\"article-content\">\n<div class=\"article-body\">\n<div id=\"mc-main-content\" role=\"main\">\n<p>Vous pouvez \u00e9tendre la port\u00e9e de votre formulaire de contact en l&rsquo;int\u00e9grant \u00e0 Google Sheets, Mailchimp, Constant Contact ou \u00e0 une application tierce utilisant des webhooks.<\/p>\n<p>Pour ajouter des int\u00e9grations, faites un clic droit sur le \u00ab\u00a0formulaire de contact\u00a0\u00bb, cliquez sur \u00ab\u00a0Modifier le contenu\u00a0\u00bb puis sur l&rsquo;onglet \u00ab\u00a0Int\u00e9gration\u00a0\u00bb.<\/p>\n<p><strong>DANS CET ARTICLE:<\/strong><\/p>\n<ul>\n<li><a href=\"#google\">Int\u00e9gration \u00e0 Google Sheets<\/a><\/li>\n<li><a href=\"#mailchimp\">Int\u00e9gration \u00e0 MailChimp<\/a><\/li>\n<li><a href=\"#constant\">Int\u00e9gration \u00e0 Constant Contact<\/a><\/li>\n<li><a href=\"#webhooks\">Int\u00e9grations de Webhooks<\/a><\/li>\n<li><a href=\"#fichiers\">Fichiers joints<\/a><\/li>\n<\/ul>\n<h2 id=\"google\">Int\u00e9gration \u00e0 Google Sheets<\/h2>\n<p>Utilisez l&rsquo;int\u00e9gration \u00e0 Google Sheets pour ajouter instantan\u00e9ment les donn\u00e9es du formulaire de contact \u00e0 une feuille de calcul. Tous les champs de contact du formulaire sont renseign\u00e9s dans la feuille de calcul, ainsi qu&rsquo;un horodatage incluant la date et l&rsquo;heure d&rsquo;envoi du formulaire.<\/p>\n<ol>\n<li value=\"1\">Cliquez sur Google Sheets, puis sur \u00ab\u00a0S&rsquo;inscrire avec Google\u00a0\u00bb.<\/li>\n<li value=\"2\">Cliquez sur \u00ab\u00a0Autoriser\u00a0\u00bb pour accorder des autorisations de connexion \u00e0 votre compte Google. Si votre ordinateur est connect\u00e9 \u00e0 plusieurs comptes Google, choisissez celui que vous souhaitez connecter \u00e0 ce formulaire.<\/li>\n<li value=\"3\">Indiquez si vous souhaitez ajouter des donn\u00e9es \u00e0 une feuille de calcul existante ou \u00e0 une nouvelle feuille.<\/li>\n<li value=\"4\">S\u00e9lectionnez la feuille de calcul vers laquelle vous souhaitez envoyer les donn\u00e9es du formulaire. Vous pouvez s\u00e9lectionner la feuille de calcul dans une liste ou utiliser la barre de recherche pour trouver une feuille sp\u00e9cifique.<\/li>\n<\/ol>\n<div class=\"imessage inote\">\n    \t\t<div class=\"hts-messages hts-messages--alert   hts-messages--withicon \"   >\r\n    \t\t\t    \t\t\t    \t\t\t\t<p>\r\n    \t\t\t\t\tRemarque<\/p>\n<ul>\n<li>Si vous disposez de plusieurs formulaires sur le site, vous pouvez connecter chacun d&rsquo;eux \u00e0 une feuille de calcul diff\u00e9rente, y compris des feuilles de calcul de comptes Google diff\u00e9rents.<\/li>\n<li>Vous pouvez \u00e9galement connecter plusieurs formulaires \u00e0 la m\u00eame feuille de calcul. Dans ce cas, assurez-vous que les champs et leur ordre dans les formulaires sont identiques pour correspondre aux informations envoy\u00e9es.<\/li>\n<li>L&rsquo;envoi de donn\u00e9es de formulaire vers une feuille de calcul Google ne vous emp\u00eache pas de t\u00e9l\u00e9charger les donn\u00e9es dans un fichier CSV ou de recevoir des e-mails d&rsquo;envoi de formulaire.    \t\t\t\t<\/p>\r\n    \t\t\t    \t\t\t\r\n    \t\t<\/div><!-- \/.ht-shortcodes-messages -->\r\n    \t\t<\/li>\n<\/ul>\n<\/div>\n<h2 id=\"mailchimp\">Int\u00e9gration \u00e0 MailChimp<\/h2>\n<p>MailChimp est un excellent outil pour la distribution de campagnes d&rsquo;e-mails, de newsletters, etc. En utilisant la nouvelle int\u00e9gration aux formulaires, les propri\u00e9taires de sites peuvent g\u00e9rer 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 \u00e0 MailChimp.<\/p>\n<p>Vous devez poss\u00e9der un compte MailChimp. Une fois que vous disposez d&rsquo;un compte, cr\u00e9ez une liste de diffusion dans votre compte MailChimp o\u00f9 les coordonn\u00e9es seront recueillies.<\/p>\n<ol>\n<li value=\"1\">Cliquez sur \u00ab\u00a0MailChimp\u00a0\u00bb et choisissez \u00ab\u00a0Se connecter \u00e0 MailChimp\u00a0\u00bb.<\/li>\n<li value=\"2\">Connectez-vous avec vos identifiants MailChimp.<\/li>\n<li value=\"3\">S\u00e9lectionnez votre liste de contacts MailChimp dans le menu d\u00e9roulant.<\/li>\n<li value=\"4\">Configurez les champs de votre formulaire. Outre l&rsquo;adresse e-mail, vous pouvez envoyer automatiquement les champs du pr\u00e9nom et du nom \u00e0 MailChimp. Pour cela, vous devez configurer les champs de l&rsquo;adresse e-mail, du pr\u00e9nom et du nom dans le formulaire.<\/li>\n<\/ol>\n<div class=\"imessage-name\">\n    \t\t<div class=\"hts-messages hts-messages--alert   hts-messages--withicon \"   >\r\n    \t\t\t    \t\t\t    \t\t\t\t<p>\r\n    \t\t\t\t\tRemarque: Les seuls champs que vous pouvez connecter \u00e0 MailChimp sont le pr\u00e9nom, le nom et l&rsquo;e-mail. L&rsquo;int\u00e9gration ne fonctionnera que si vous configurez des champs du m\u00eame nom que sur le formulaire de contact. Un champ pourra \u00eatre laiss\u00e9 vide si vous s\u00e9lectionnez \u00ab\u00a0Laisser ce champ vide\u00a0\u00bb dans le menu d\u00e9roulant.    \t\t\t\t<\/p>\r\n    \t\t\t    \t\t\t\r\n    \t\t<\/div><!-- \/.ht-shortcodes-messages -->\r\n    \t\t\n<\/div>\n<div class=\"imessage-name\">    \t\t<div class=\"hts-messages hts-messages--info   hts-messages--withicon \"   >\r\n    \t\t\t    \t\t\t    \t\t\t\t<p>\r\n    \t\t\t\t\t Conseil: Si vous avez configur\u00e9 votre int\u00e9gration MailChimp et que vous souhaitez essayer votre formulaire avec une adresse e-mail de test, sachez que MailChimp peut bloquer ces adresses sans pr\u00e9avis (par exemple, test@test.com). Pour tester votre int\u00e9gration MailChimp, nous vous recommandons donc d&rsquo;utiliser une vraie adresse e-mail.    \t\t\t\t<\/p>\r\n    \t\t\t    \t\t\t\r\n    \t\t<\/div><!-- \/.ht-shortcodes-messages -->\r\n    \t\t<\/div>\n<h2 id=\"constant\">Int\u00e9gration \u00e0 Constant Contact<\/h2>\n<p>Cette int\u00e9gration est similaire \u00e0 celle de MailChimp, mais permet aux propri\u00e9taires de site de cr\u00e9er des listes de diffusion dans leur compte Constant Contact.<\/p>\n<p>Vous devez poss\u00e9der un compte Constant Contact. Une fois que vous disposez d&rsquo;un compte, cr\u00e9ez une liste de diffusion sur votre compte Constant Contact&nbsp;o\u00f9 les coordonn\u00e9es seront recueillies.<\/p>\n<ol>\n<li value=\"1\">Cliquez sur \u00ab\u00a0Constant Contact\u00a0\u00bb, puis sur \u00ab\u00a0Se connecter \u00e0 Constant Contact\u00a0\u00bb.<\/li>\n<li value=\"2\">Connectez-vous avec vos identifiants Constant Contact.<\/li>\n<li value=\"3\">S\u00e9lectionnez votre liste Constant Contact dans le menu d\u00e9roulant.<\/li>\n<li value=\"4\">Configurez les champs de votre formulaire. Outre l&rsquo;adresse e-mail, vous pouvez automatiquement envoyer le pr\u00e9nom, le nom et le num\u00e9ro de t\u00e9l\u00e9phone \u00e0 Constant Contact. Pour cela, l&rsquo;utilisateur doit configurer les champs de l&rsquo;adresse e-mail, du pr\u00e9nom et du nom dans le formulaire de contact. L&rsquo;adresse e-mail et le message texte sont ajout\u00e9s par d\u00e9faut.<\/li>\n<\/ol>\n<h2 id=\"webhooks\">Int\u00e9grations de webhooks<\/h2>\n<p>De nombreux services de cloud et en ligne proposent des int\u00e9grations par l&rsquo;interm\u00e9diaire de chemins appel\u00e9s webhooks.&nbsp; Les webhooks envoient des notifications \u00e0 une adresse Web sp\u00e9cifique appel\u00e9e l&rsquo;URL de point de terminaison. Vous pouvez connecter le formulaire de contact pour g\u00e9n\u00e9rer un \u00e9v\u00e9nement lors de l&rsquo;envoi d&rsquo;un formulaire compl\u00e9t\u00e9.<\/p>\n<p>Pour connecter le&nbsp;formulaire de contact \u00e0 un autre service \u00e0 l&rsquo;aide de webhooks, il vous suffit de cr\u00e9er une URL de point de terminaison personnalis\u00e9e avec le service de votre choix et de la coller dans le champ d&rsquo;int\u00e9gration des webhooks du formulaire de contact. Une fois que vous avez ajout\u00e9 l&rsquo;URL d&rsquo;un webhook, une requ\u00eate POST sera envoy\u00e9e au point de terminaison avec les donn\u00e9es du corps au format JSON d\u00e8s que le formulaire de contact est compl\u00e9t\u00e9 sur le site Web. Voici un exemple de donn\u00e9es au format JSON qui seront envoy\u00e9es&nbsp;:<\/p>\n<p>{\u00ab\u00a0Submission Date\u00a0\u00bb:\u00a0\u00bb06\/02\/2016 10:23:54&Prime;,\u00a0\u00bbForm Title\u00a0\u00bb:\u00a0\u00bbContact Us\u00a0\u00bb,\u00a0\u00bbName\u00a0\u00bb:\u00a0\u00bbJohn Smith\u00a0\u00bb,\u00a0\u00bbEmail\u00a0\u00bb:\u00a0\u00bb<a href=\"mailto:test@example.com\">test@example.com<\/a>\u00ab\u00a0,\u00a0\u00bbPhone\u00a0\u00bb:\u00a0\u00bb(555).555.1212&Prime;,\u00a0\u00bbMessage\u00a0\u00bb:\u00a0\u00bbWebhook Form Submission!\u00a0\u00bb}<\/p>\n<div class=\"imessage inote\">\n<div class=\"imessage-name\">    \t\t<div class=\"hts-messages hts-messages--alert   hts-messages--withicon \"   >\r\n    \t\t\t    \t\t\t    \t\t\t\t<p>\r\n    \t\t\t\t\tRemarque: Les valeurs \u00ab Submission Date \u00bb (date d&rsquo;envoi) et \u00ab Form Title \u00bb (titre du formulaire) seront toujours renseign\u00e9es. Les autres champs (field_name: value) sont bas\u00e9s sur les champs configur\u00e9s dans le formulaire.    \t\t\t\t<\/p>\r\n    \t\t\t    \t\t\t\r\n    \t\t<\/div><!-- \/.ht-shortcodes-messages -->\r\n    \t\t<\/div>\n<\/div>\n<h3>Cr\u00e9er une URL de point de terminaison<\/h3>\n<p>Les points de terminaison sont configur\u00e9s sur des services tiers (par exemple, Zapier ou Slack) ou un autre serveur que vous contr\u00f4lez. Ces points de terminaison sont sp\u00e9cifiquement configur\u00e9s pour recevoir des notifications du webhook.<\/p>\n<h3>Id\u00e9es d&rsquo;int\u00e9gration<\/h3>\n<ul>\n<li value=\"1\"><i>Zapier<\/i>&nbsp;: Associez les donn\u00e9es du formulaire de contact \u00e0 Zapier pour profiter de possibilit\u00e9s illimit\u00e9es. Connectez-vous \u00e0 pratiquement tous les services de cloud modernes, notamment les services de gestion de la relation client comme Salesforce, Sugar CRM, Zoho, etc.<\/li>\n<li value=\"2\"><i>Slack<\/i>&nbsp;: Une application de messagerie efficace, \u00e0 laquelle vous pouvez vous connecter pour recevoir des notifications d\u00e8s que des donn\u00e9es de formulaire sont envoy\u00e9es.<\/li>\n<li value=\"3\"><em>Int\u00e9gration personnalis\u00e9e<\/em>&nbsp;: Cr\u00e9ez vos propres webhooks personnalis\u00e9s pour les int\u00e9grer au formulaire de contact. Par exemple, vous pouvez enregistrer les envois dans une base de donn\u00e9es, ou vous connecter \u00e0 des applications personnalis\u00e9es ou \u00e0 des services de tiers.<\/li>\n<\/ul>\n<h4>Exemple de configuration de webhooks\/d&rsquo;URL de point de terminaison sur Slack<\/h4>\n<ol>\n<li value=\"1\">Dans l&rsquo;application Slack, ouvrez le menu d\u00e9roulant principal du compte, puis cliquez sur \u00ab\u00a0Configuration des applications\u00a0\u00bb.<\/li>\n<li value=\"2\">Une nouvelle page du site Web de Slack s&rsquo;affiche. Dans le coin sup\u00e9rieur droit, cliquez sur le bouton \u00ab\u00a0Cr\u00e9er\u00a0\u00bb.<\/li>\n<li value=\"3\">Cliquez sur \u00ab\u00a0Cr\u00e9er une int\u00e9gration personnalis\u00e9e\u00a0\u00bb.<\/li>\n<li value=\"4\">S\u00e9lectionnez \u00ab\u00a0Incoming Webhooks\u00a0\u00bb (Webhooks entrants).<\/li>\n<li value=\"5\">S\u00e9lectionnez un canal existant ou cr\u00e9ez un nouveau canal o\u00f9 vos messages seront publi\u00e9s.<\/li>\n<li value=\"6\">Copiez votre \u00ab\u00a0URL Webhooks\u00a0\u00bb<b>.<\/b><\/li>\n<li value=\"7\">R\u00e9glez les param\u00e8tres et les options \u00e0 votre convenance, puis cliquez sur \u00ab\u00a0Enregistrer les param\u00e8tres\u00a0\u00bb.<\/li>\n<li value=\"8\">Ouvrez ensuite l&rsquo;\u00e9diteur de formulaire de contact et collez l&rsquo;URL de vos webhooks dans le champ Webhooks.<\/li>\n<li value=\"9\">Cliquez sur \u00ab\u00a0Termin\u00e9\u00a0\u00bb. Pr\u00e9visualisez votre site, remplissez puis envoyez le formulaire de contact pour tester l&rsquo;int\u00e9gration.<\/li>\n<\/ol>\n<p>Vous recevrez un message sur Slack chaque fois que des informations seront envoy\u00e9es via votre formulaire de contact.<\/p>\n<h2 id=\"fichiers\">Fichiers joints<\/h2>\n<p>Il est possible d&rsquo;envoyer des fichiers dans un formulaire de contact si vous y ajoutez un champ d\u00e9di\u00e9 aux pi\u00e8ces jointes. Les liens vers les fichiers t\u00e9l\u00e9charg\u00e9s sont disponibles dans le fichier de t\u00e9l\u00e9chargement des formulaires envoy\u00e9s, ainsi que dans chacune des int\u00e9grations de formulaire (Webhooks et Google Sheets, par ex.).<\/p>\n<div class=\"imessage inote\">\n<div class=\"imessage-name\">    \t\t<div class=\"hts-messages hts-messages--alert   hts-messages--withicon \"   >\r\n    \t\t\t    \t\t\t    \t\t\t\t<p>\r\n    \t\t\t\t\tRemarque: Les visiteurs du site ne peuvent pas charger de fichiers sup\u00e9rieurs \u00e0 10 Mo.    \t\t\t\t<\/p>\r\n    \t\t\t    \t\t\t\r\n    \t\t<\/div><!-- \/.ht-shortcodes-messages -->\r\n    \t\t<\/div>\n<div><\/div>\n<\/div>\n<ol>\n<li value=\"1\">Cliquez sur un formulaire de contact pour afficher l&rsquo;\u00e9diteur de contenu.<\/li>\n<li value=\"2\">Sous l&rsquo;onglet Champs, cliquez sur \u00ab\u00a0Ajouter un champ\u00a0\u00bb et s\u00e9lectionnez \u00ab\u00a0Fichier joint\u00a0\u00bb&nbsp;dans la liste d\u00e9roulante Type de champ.<\/li>\n<li value=\"3\">Pour modifier le nom du champ, saisissez \u00ab\u00a0le texte de l&rsquo;espace r\u00e9serv\u00e9\u00a0\u00bb.<\/li>\n<li value=\"4\">Un lien permettant de t\u00e9l\u00e9charger des fichiers s&rsquo;ajoute alors \u00e0 votre formulaire.<\/li>\n<\/ol>\n<\/div>\n<\/div>\n<div class=\"article-attachments\"><\/div>\n<\/div>\n<\/section>\n<footer>\n<div class=\"article-footer\"><\/div>\n<\/footer>\n","protected":false},"excerpt":{"rendered":"<p>Vous pouvez \u00e9tendre la port\u00e9e de votre formulaire de contact en l&rsquo;int\u00e9grant \u00e0 Google Sheets, Mailchimp, Constant Contact ou \u00e0 une application tierce utilisant des webhooks. Pour ajouter des int\u00e9grations, faites un clic droit sur le \u00ab\u00a0formulaire de contact\u00a0\u00bb, cliquez sur \u00ab\u00a0Modifier le contenu\u00a0\u00bb puis sur l&rsquo;onglet \u00ab\u00a0Int\u00e9gration\u00a0\u00bb. DANS CET&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[56,77],"ht-kb-tag":[],"acf":[],"_links":{"self":[{"href":"https:\/\/www.easyhost.be\/fr\/help\/wp-json\/wp\/v2\/ht-kb\/2274"}],"collection":[{"href":"https:\/\/www.easyhost.be\/fr\/help\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.easyhost.be\/fr\/help\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.easyhost.be\/fr\/help\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.easyhost.be\/fr\/help\/wp-json\/wp\/v2\/comments?post=2274"}],"version-history":[{"count":2,"href":"https:\/\/www.easyhost.be\/fr\/help\/wp-json\/wp\/v2\/ht-kb\/2274\/revisions"}],"predecessor-version":[{"id":2734,"href":"https:\/\/www.easyhost.be\/fr\/help\/wp-json\/wp\/v2\/ht-kb\/2274\/revisions\/2734"}],"wp:attachment":[{"href":"https:\/\/www.easyhost.be\/fr\/help\/wp-json\/wp\/v2\/media?parent=2274"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.easyhost.be\/fr\/help\/wp-json\/wp\/v2\/ht-kb-category?post=2274"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.easyhost.be\/fr\/help\/wp-json\/wp\/v2\/ht-kb-tag?post=2274"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}