Comment créer un formulaire de contact sur Webflow ?

Si tu cherches à créer un formulaire de contact pour ton site Webflow, ne cherche pas plus loin. Dans cet article, on va te montrer étape par étape comment créer un formulaire de contact pour ton site Web en utilisant Webflow. On va couvrir les différentes étapes de la création d'un formulaire de contact, y compris la création de formulaires, l'ajout de champs de formulaire, la personnalisation des messages de confirmation et l'intégration de ton formulaire de contact sur ton site Web.

Auteur

Aurélien Gallier

Co-fondateur de CORIACE

Senior Webdesigner et expert Webflow, Framer et Figma, Aurélien incarne le visage de Coriace

Publié le

5/4/24

• Temps de lecture : 2 min

Rejoindre

Étape 1 : Création d'un formulaire de contact

La première étape pour créer un formulaire de contact sur ton site Web Webflow consiste à créer un nouveau formulaire. Pour cela, connecte-toi à ton compte Webflow et sélectionne le projet dans lequel tu souhaites créer le formulaire de contact.

Clique sur le bouton "Ajouter un élément" dans le menu de gauche de l'éditeur Webflow.
Sélectionne l'option "Forms"(formulaire) dans la liste des éléments.
Fais glisser et dépose le formulaire sur la page où tu souhaites afficher le formulaire de contact.

Étape 2 : Ajout de champs de formulaire

Une fois que tu as créé le formulaire, tu peux ajouter des champs de formulaire pour collecter les informations dont tu as besoin. Voici comment ajouter des champs de formulaire à ton formulaire de contact :

Ouvre le panneau des éléments.
Rends toi dans l'onglet "Forms".
Sélectionne le type de champ que tu souhaites ajouter (par exemple, champ de texte, case à cocher, liste déroulante, etc.).
Personnalise le champ en ajoutant une classe et en ajoutant différentes propriété avec le panneau de style.

Étape 3 : Personnalisation des messages de confirmation

Une fois que le visiteur de ton site a rempli le formulaire de contact, il tombera sur un message de confirmation pour lui indiquer que son message a été envoyé avec succès. Tu peux personnaliser ce message en suivant ces étapes :

Clique sur le formulaire pour ouvrir ses options de configuration.
Sélectionne l'onglet "Success" dans le panneau de configuration du formulaire.
Personnalise le message de confirmation en ajoutant un texte personnalisé et du le style que tu souhaites.

Apprends à créer des formulaires efficaces avec la FunnelLab No-code Université

Créer un formulaire de contact sur ton site Web Webflow est facile avec les étapes que nous venons de te montrer. En suivant ces étapes simples, tu pourras ajouter un formulaire de contact professionnel à ton site Web en peu de temps. Assure-toi simplement de personnaliser le formulaire en fonction des besoins de ton entreprise et de tes clients. Si tu veux maîtriser toutes les subtilités fonctionnelles et design des formulaires dans Webflow, rejoins la FunnelLab No-code Université.

FAQ

Est-ce que je peux personnaliser l'apparence du formulaire de contact ?

Oui, tu peux personnaliser l'apparence du formulaire de contact en utilisant les options de conception de Webflow.

Est-ce que je peux ajouter des champs de formulaire supplémentaires ?

Oui, tu peux ajouter des champs de formulaire supplémentaires en utilisant les éléments disponible dans le panneau des éléments.

Comment puis-je recevoir les soumissions du formulaire de contact ?

Tu peux recevoir les soumissions du formulaire de contact par e-mail en configurant une adresse e-mail de destination dans les options de configuration du formulaire. Rends-toi dans les paramètres de ton projet, dans l’onglet “Forms”.

Est-ce que je peux ajouter des fonctionnalités supplémentaires au formulaire de contact ?

Oui, tu peux ajouter des fonctionnalités supplémentaires au formulaire de contact en utilisant des services tiers ou en personnalisant le code HTML du formulaire. Un bon moyen de la faire est d’ajouter du code Javascript à ton projet Webflow pour ajouter différentes fonctionnalités. Par exemple un moyen d’indiquer à l’utilisateur que le champs rempli est valide ou non.