Comment créer un formulaire de contact de site Web gratuit avec Google Forms

Added 2018-04-24

Gérer un site Web ou un blog peut être amusant, mais offrir aux internautes un moyen de vous contacter n’est pas toujours facile ni simple. Heureusement, Google offre une solution de formulaire de contact de site Web parfaite: vous pouvez intégrer un formulaire Google sur une page et collecter tous les commentaires de vos lecteurs dans une fiche Google.

La configuration est simple. Si vous êtes prêt à créer un formulaire de contact amélioré pour votre site Web, commençons!

Création de votre formulaire de contact dans Google Forms

En fait, Google propose un formulaire prédéfini de "Coordonnées" dans la galerie de modèles lorsque vous vous connectez pour la première fois. votre compte Google Forms .

Le formulaire demande des informations standard telles que nom, adresse, numéro de téléphone, adresse électronique et un champ dans lequel l'utilisateur peut saisir ses commentaires.

Vous pouvez personnaliser ce formulaire en modifiant les informations que vous demandez.

Vous pouvez également changer si cette information est requise ou non.

Si c'est non requis , l'utilisateur peut laisser ce champ vide. Si ça est requis , l'utilisateur ne peut pas soumettre le formulaire tant qu'il n'a pas entré quelque chose dans ce champ.

Puisque vous utilisez ce formulaire en tant que formulaire de contact de votre site Web, vous souhaitez vous assurer que l'utilisateur a bien saisi quelque chose dans le champ des commentaires. Assurez-vous donc que cet élément est réglé sur Champs obligatoires .

Maintenant que vous avez personnalisé le contenu du modèle de formulaire de commentaire de Google pour répondre à vos besoins, il est temps de personnaliser le comportement du formulaire lorsque les utilisateurs l'utilisent.

Configuration du formulaire de contact de votre site Web

Si vous cliquez sur le Réglages  icône, dans le Général  onglet, vous pouvez contrôler le comportement de ce formulaire lorsque les utilisateurs le soumettent depuis votre site Web.

Par exemple, vous pouvez demander au formulaire d’envoyer un duplicata des réponses de l’utilisateur à l’adresse e-mail fournie.

Vous pouvez également activer ou désactiver leur capacité à modifier leurs réponses après les avoir envoyées.

Sous le Présentation  onglet, vous pouvez personnaliser la réponse que vos utilisateurs verront après avoir envoyé le formulaire sur votre site Web.

Faites-en quelque chose de significatif, car il sera affiché à chaque visiteur qui soumet ce formulaire.

Par exemple, il est bon de leur dire combien de temps il leur faudra attendre (vous pouvez même fournir un numéro de téléphone ici s'ils ont besoin d’une réponse plus urgente).

Tout dépend de la manière dont vous utilisez le formulaire et du type de contact que vous souhaitez fournir à vos visiteurs.

Trouver le code d'intégration

Maintenant que votre formulaire est prêt, il est temps de l'intégrer à votre site.

La première étape consiste à obtenir le lien intégré pour votre formulaire. Ce n’est pas très simple, car aucune icône d’incorporation ne s’affiche directement sur la page de l’éditeur de formulaire.

Pour accéder au code intégré, vous devez cliquer sur le bouton Envoyer  bouton en haut à droite de l'éditeur de formulaire.

Cette page affiche le code HTML incorporé que vous devrez copier et coller dans votre site. Il est important de définir ici les paramètres de largeur et de hauteur appropriés afin que le formulaire intégré s’intègre parfaitement dans la page de destination.

Vous aurez peut-être besoin de jouer avec quelques tailles, mais ne vous inquiétez pas. Vous pouvez toujours revenir ici, modifier la taille, puis copier et coller à nouveau le nouveau code intégré.

Intégrer le formulaire de contact sur votre site Web

Si vous avez un site Web ou un blog, l’approche standard consiste à créer un Contact  élément de menu dans votre en-tête. Cela permet aux visiteurs de vous contacter le plus facilement possible.

Certains sites utilisent une autre approche, comme placer ce lien dans le pied de page ou même sur la page À propos de nous.

Sur mon site, l'élément de menu Contact déplace la vue vers une zone située après les Témoignages. C'est là que je souhaite intégrer mon formulaire de contact.

Avec un site WordPress, le thème que vous utilisez aura généralement une zone avec un formulaire de contact que vous pouvez personnaliser. Par exemple, avec le thème Onetone, il y a un champ «Contenu de la section» sur la page principale qui inclut le code du formulaire de contact existant.

Vous pouvez mettre ce code en surbrillance et le remplacer par votre nouveau formulaire de contact Google.

Pourquoi utiliser un formulaire de contact de Google est préférable

Pourquoi ne pas simplement utiliser le formulaire de contact existant qui vient avec un thème? Il y a plusieurs raisons pour lesquelles utiliser Google Forms est préférable:

• Les formulaires PHP utilisent généralement POST ou SMTP pour envoyer des courriers électroniques et, dans les deux cas, vous devez savoir comment configurer le serveur de messagerie pour qu'il fonctionne.
• Au lieu d'envoyer des commentaires par courrier électronique, le formulaire de contact de Google collecte tous les messages dans une feuille Google. Cela évite l'encombrement de la boîte de réception.
• Vous pouvez modifier le formulaire à tout moment à l'aide de l'interface graphique de Google Form plutôt que de modifier le code.

Une fois intégré à la page Web, votre formulaire de contact ressemblera à ceci.

Comme vous pouvez le constater, cette première tentative n’est pas parfaite. Le thème de coloration actuel du formulaire Google ne se mélange pas très bien avec le thème de la page Web.

Il est temps de peaufiner un peu plus la conception de Google Form.

Mise à jour et personnalisation du formulaire de contact

La beauté de cette approche réside dans le fait qu’une fois qu’il est intégré à votre site, vous pouvez redéfinir le formulaire à votre guise sans avoir à toucher à votre page Web.

Par exemple, pour modifier le jeu de couleurs du formulaire existant, accédez à l'éditeur de formulaire Google et cliquez sur l'icône correspondante. icône de la palette de couleurs  dans le coin supérieur droit.

Étant donné que mon site a un thème basé sur le noir plus foncé, un thème de formulaire de contact gris devrait bien se fondre.

Dès que vous enregistrez le nouveau formulaire Google dans l'éditeur, le formulaire est mis à jour sur le site Web, comme vous pouvez le voir ici.

Maintenant que la conception et l’intégration sont terminées, il est temps de vérifier si le formulaire de contact fonctionne réellement comme vous le souhaitez!

Test de votre formulaire de contact Google

Vous devez toujours effectuer un test avec tout nouveau formulaire que vous placez sur votre site Web.

Dans ce cas, le formulaire de contact Google répond avec le texte de réponse personnalisé que vous avez défini lors de la conception du formulaire.

Vous pouvez accéder à tous les commentaires de vos visiteurs sur la même page où vous avez conçu le formulaire.

Il suffit de cliquer sur le Réponses  lien en haut de la forme.

Ici vous pouvez voir les commentaires individuels et les informations de contact des utilisateurs. Vous avez également la possibilité de cliquer sur l'icône Google Sheets dans le coin supérieur droit de la fenêtre. Cela créera une nouvelle feuille Google pour stocker tous les commentaires entrants des utilisateurs.

Toutefois, si vous envisagez simplement de répondre manuellement à chaque nouveau commentaire entrant, vous pourrez probablement utiliser l'affichage dans la page de l'éditeur de Google Forms.

Si vous souhaitez enregistrer des commentaires au format tableur, plusieurs options sont disponibles. Cliquez simplement sur l'icône des trois points en haut à droite de la vue Réponses pour les voir.

Vous pouvez télécharger toutes les réponses au format CSV, ou même les imprimer sur votre imprimante ou sur un document PDF. C'est également à cet endroit que vous pouvez configurer les notifications lorsqu'un nouveau commentaire provient de votre site Web.

Passez à Google Forms au prochain niveau

L'utilisation de Google Forms pour traiter les commentaires vous donne beaucoup plus de flexibilité et de fonctionnalités que l'utilisation d'un formulaire Web standard.

Sans codage de votre part, les commentaires sont consignés dans une feuille pratique. Vous pouvez activer ou désactiver des éléments tels que les notifications par courrier électronique ou si les commentaires peuvent être modifiés après la soumission.

Un inconvénient de cette approche est que l’incorporation utilise une iframe, qui insère une barre de défilement dans la fenêtre.

Mais si vous donnez à votre formulaire un design qui se mélange bien avec votre thème, la barre de défilement n’a pas l’air si mauvais. C’est aussi un compromis équitable compte tenu des nombreuses fonctionnalités que vous obtenez en retour.