Comment intégrer des formulaires dans Webflow ?

Les formulaires sont un élément essentiel pour interagir avec tes visiteurs et collecter des informations importantes. Webflow te permet d'intégrer facilement des formulaires sur ton site Web. Dans cet article, nous allons te montrer comment créer et intégrer un formulaire Webflow, ainsi que des alternatives pour utiliser des formulaires tiers.

Intégrer des formulaires sur son site Webflow

Auteur

Allan Mostafa

Co-fondateur de CORIACE

Webdesigner depuis 7 ans et Growth Marketer tapit dans l'ombre, Allan est le couteau suisse de Coriace

Publié le

April 5, 2024

• Temps de lecture : 2 min

Rejoindre

Les avantages des formulaires Webflow

Personnalisation des formulaires

Webflow te permet de personnaliser facilement les formulaires en fonction de tes besoins. Tu peux modifier les couleurs, les polices et les champs de formulaire pour qu'ils correspondent à l'identité visuelle de ton site.

Collecte et gestion des données

Webflow offre une solution intégrée pour collecter et gérer les données des formulaires. Tu peux facilement consulter, exporter et gérer les données collectées depuis le tableau de bord de Webflow. Pour cela rends-toi dans la l’onglet “Form” et descend jusqu’à la zone “Form Data”.

Créer un formulaire Webflow étape par étape

Étape 1 : Ajouter un élément de formulaire

Pour commencer, accède à l'éditeur Webflow et sélectionne l'élément "Form Block" dans le panneau "Add Elements". Glisse-dépose l'élément de formulaire à l'emplacement souhaité sur ta page.

Étape 2 : Personnaliser les champs de formulaire

Clique sur l'élément de formulaire pour modifier les champs existants ou en ajouter de nouveaux. Tu peux choisir parmi différents types de champs, tels que texte, e-mail, téléphone, zone de texte ou encore des sélecteurs, des checkbox ou encore des boutons de type radio.

Étape 3 : Configurer les paramètres du formulaire

Dans le panneau "Settings", configure les paramètres du formulaire, tels que le nom du formulaire, l'adresse e-mail de notification et l'action de soumission. Assure-toi de sauvegarder tes modifications.

Étape 4 : Ajouter un bouton d'envoi

Ajoute un bouton à ton formulaire en sélectionnant l'élément "Submit Button" dans le panneau "Add Elements" et en le glissant-déposant à l'intérieur du bloc de formulaire. Modifie le texte du bouton et personnalise son apparence en fonction de ton design.

Étape 5 : Paramétrer la page de remerciement

Après la soumission du formulaire, tu peux rediriger tes visiteurs vers une page de remerciement. Crée une nouvelle page dans Webflow et personnalise son contenu. Ensuite, configure l'action de soumission du formulaire pour rediriger les utilisateurs vers cette page.

Étape 6 : Tester le formulaire

Avant de publier ton site, assure-toi de tester le formulaire pour vérifier que tout fonctionne correctement. Remplis le formulaire et vérifie que les données sont correctement collectées et que la page de remerciement s'affiche.

Intégrer des formulaires tiers

Utiliser des outils tels que Typeform ou JotForm

Si tu préfères utiliser un outil externe pour créer tes formulaires, il est possible d'intégrer des solutions comme Typeform ou JotForm dans ton site Webflow. Il te suffit de copier le code d'intégration fourni par l'outil et de l'ajouter à ta page Webflow à l'aide de l'élément "Embed".

Intégrer un formulaire Mailchimp

Pour ajouter un formulaire d'inscription à ta liste de diffusion Mailchimp, suis les instructions fournies par Mailchimp pour générer le code d'intégration. Copie ce code et colle-le dans un élément "Embed" sur ton site Webflow.

Conseils pour optimiser tes formulaires

Utiliser la validation en temps réel

La validation en temps réel permet d'informer les utilisateurs des erreurs potentielles lorsqu'ils remplissent le formulaire. Cela améliore l'expérience utilisateur et augmente les chances d'obtenir des soumissions complètes et correctes.

Rendre les champs obligatoires clairs

Indique clairement quels champs sont obligatoires en ajoutant un astérisque (*) ou en utilisant le mot "obligatoire" à côté du champ. Cela évite la confusion et garantit que les utilisateurs remplissent toutes les informations requises.

Ajouter des placeholders

Utilise des placeholders pour donner des exemples de saisie aux utilisateurs. Cela les aide à comprendre ce qui est attendu dans chaque champ et peut réduire les erreurs de saisie.

Conclusion

Intégrer des formulaires sur un site Webflow est simple et offre de nombreux avantages. Suis les étapes décrites dans cet article pour créer et personnaliser tes formulaires, et n'hésite pas à explorer des solutions tierces si tu as besoin de fonctionnalités supplémentaires. En optimisant tes formulaires, tu augmenteras les chances d'obtenir des soumissions de qualité et d'améliorer l'expérience utilisateur de ton site.

FAQ

Quels sont les avantages des formulaires Webflow ?

‍Les formulaires Webflow offrent une personnalisation facile, une intégration transparente et une gestion intégrée des données collectées. Ils permettent également de créer des formulaires adaptés à l'identité visuelle de ton site.

Comment ajouter un formulaire Webflow à mon site ?

‍Pour ajouter un formulaire Webflow, accède à l'éditeur Webflow, sélectionne l'élément "Form Block" et glisse-dépose-le à l'emplacement souhaité sur ta page. Personnalise les champs de formulaire et configure les paramètres selon tes besoins.

Puis-je intégrer des formulaires tiers, tels que Typeform ou Mailchimp, sur mon site Webflow ?

‍Oui, tu peux intégrer des formulaires tiers en copiant le code d'intégration fourni par l'outil externe et en l'ajoutant à ta page Webflow à l'aide de l'élément "Embed".

Comment puis-je optimiser mes formulaires pour améliorer l'expérience utilisateur ?

‍Pour optimiser tes formulaires, utilise la validation en temps réel, indique clairement les champs obligatoires et ajoute des placeholders pour guider les utilisateurs lors de la saisie.

Comment tester mon formulaire avant de publier mon site Webflow ?

‍Pour tester ton formulaire, remplis-le et soumets-le en mode aperçu ou en mode édition. Vérifie que les données sont correctement collectées et que la page de remerciement s'affiche après la soumission.