Ajout d'un formulaire de contact

Présentation

Use the Contact Form widget to add a complete web form to your website. The contact form allows you to provide visitors with a variety of input areas; specifically text, dropdown, radio buttons, checkboxes, date, time, email, and phone numbers. You can use the form for email newsletter opt-ins, customer questions, or simply to gather feedback from your site visitors.

Guide

Setting up the Contact Form 

1. Add the contact form widget onto your responsive website. To learn more about adding widgets to your website, see Adding Widgets. Once the widget has been placed, the Content Editor will appear.

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. Add new fields by clicking the 'Add field' button.

contactform1_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. 

5. In the Submission actions section, set the confirmation and error messages to display when visitors submit the form. Use the Rich Text Editor to add color, emphasis (bold, italics and underline), and bullets to text in the message boxes.

6. 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.

contactform4_en-US.png

Setting up your GDPR-Friendly Contact Form

To obtain consent from your visitors upon contact form submission, simply add a new field to your contact form following the instructions above and pick either the Opt-in or Free text option.

Add Opt-in field

Adding the Opt-in field will add a checkbox confirming your visitor’s consent to share form responses. This field will be required to submit the form response.

gdpr_friendly_contact_form1-en_us.png

The default text is “By checking, I agree to share my form responses” but you can replace this with custom text if you like.

Add free text field

You may choose to add a different notification using free text. In this case, the field will simply appear as a notification below the fields of your contact form.gdpr_friendly_contact_form2-en_us.png

Please note: There is no default GDPR or privacy-related placeholder text in the free text field, as this is a multi-purpose field, so you need to place your custom text.

Delete form responses

To delete responses received via a contact form, please go to the site dashboard, click the hamburger icon next to the site where the form appeared and select Form Responses.

gdpr_friendly_contact_form3-en_us.png

Alternatively, you can open the Manage Form Responses field in the Content tab of your left-side editor menu.

gdpr_friendly_contact_form4-en_us.png

La page Réponses de formulaire qui s'ouvre vous permet de supprimer n'importe quelle réponse à un formulaire sur ce site. Vous pouvez rechercher des réponses pertinentes dans la zone de recherche Rechercher des informations sur les visiteurs. Assurez-vous de rechercher le nom, la formule ou les caractères exacts.

Clicking on the relevant form tab opens a table which includes:

  • the date of the form response submission
  • the input from each of the form fields
  • the option to delete the form response

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.
contactform5_en-US.png

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

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.

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

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.

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.
  • You can also connect a couple of forms to the same spreadsheet, in this case, make sure that the fields and order in the form are identical to fit the info submitted.
  • 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 nouveau formulaire, 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

  1. Cliquez sur l'onglet Integrations (Intégrations) dans la zone des paramètres généraux du formulaire de contact.
  2. Développez l'option MailChimp et choisissez CONNECT TO MAILCHIMP (SE CONNECTER À MAILCHIMP).
  3. Connectez-vous avec vos identifiants MailChimp.
  4. Sélectionnez votre liste de contacts MailChimp dans le menu déroulant.

contactform13_en-US.png

Configure your form fields. In addition to the email address, the website builder can automatically send first name and last name fields to MailChimp. You must setup the email / first name / last name fields within the form.

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

  1. Cliquez sur l'onglet Integrations (Intégrations) dans la zone des paramètres généraux du formulaire de contact.
  2. Développez l'option Contact Constant et choisissez CONNECT TO CONTACT CONSTANT (SE CONNECTER À CONSTANT CONTACT).
  3. Connectez-vous avec vos identifiants Constant Contact.
  4. Sélectionnez votre liste Constant Contact dans le menu déroulant.

contactform18_en-US.png

Configure your form fields. In addition to the email address, the website builder can automatically send first name, last name, and phone number to Constant Contact. The user is required to set up the email / first name / last name fields within the contact form. Email address and text message are added by default.

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.

To connect the contact form to another service using webhooks, you simply need to create a custom endpoint URL with your desired service, and paste it into the Webhooks integration field in the contact form. Once you've added a webhook URL, the contact form will send a POST request to the end point with the data in the body in JSON format, when the contact form is submitted on the website. Here's an example of the JSON data that will be sent:

{"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.

contactform20_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.

Custom Integration - Create your own custom Webhooks to integrate with the contact form. For example, save submissions into a database or connect to custom apps or 3rd party services.

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

  1. Dans l'application Slack, ouvrez le menu déroulant principal du compte, puis cliquez sur Apps & Integrations (Applications et intégrations).contactform21_en-US.png
  2. Le site Web Slack s'ouvre. Dans le coin supérieur droit, cliquez sur le bouton Build (Créer).
  3. Cliquez sur Make a Custom Integration (Créer une intégration personnalisée).
  4. Sélectionnez Incoming Webhooks (Webhooks entrants).
  5. Sélectionnez un canal existant ou créez un nouveau canal où vos messages seront publiés.
  6. Copiez votre URL Webhooks.
  7. Réglez les paramètres et les options à votre convenance, puis cliquez sur Save Settings (Enregistrer les paramètres).
  8. Then head back and paste your Webhooks URL into Webhooks field. Click Done to complete the setup.
  9. Prévisualisez votre site et soumettez le formulaire de contact pour tester l'intégration.

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.

Design

Open the Design Editor by clicking the design tab on the top left corner or by right-clicking the widget and selecting 'Edit Design' to change the button layout, items, frame and spacing. 

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.

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).

contactform31_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.

Espacement 

Click the Spacing tab to make edits to the padding and margins of the contact form. Learn more about spacing here.

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