Le guide complet pour tout comprendre et bien les utiliser

Les formulaires sont souvent le point de contact le plus important d’un site.
Un mauvais formulaire fait fuir.
Un bon formulaire transforme un visiteur en contact.

Sur Framer, tout est déjà intégré nativement.
Pas besoin d’outil externe pour 90 % des usages.

Dans ce guide, on va voir comment créer un formulaire propre, efficace et bien configuré sur Framer, étape par étape.

1. Ajouter un formulaire sur Framer

Framer propose un Form Builder natif, directement accessible dans le menu d’insertion.

1. Insert

2. Forms

3. Form Builder

Une fois ajouté à la page, tu obtiens un formulaire prêt à être configuré, avec un bouton d’envoi et un premier champ.

Astuce
Le Form Builder est un vrai composant. Tu peux le placer dans une stack, le styliser, l’animer et le rendre responsive comme n’importe quel autre élément Framer.

2. Les différents types de champs disponibles

Chaque champ peut être ajouté individuellement.
Framer gère tous les cas classiques.

Types de champs disponibles

• Text

• Text Area

• Email

• Number

• Phone Number

• URL

• Date

• Time

👉 Chaque champ correspond à un usage précis
👉 Le bon type améliore la validation automatique
👉 Et évite les erreurs de saisie côté utilisateur

Bon réflexe
Utilise toujours le type Email pour un email, même si ça semble évident.
Ça améliore le taux de complétion et la qualité des leads.

3. Name, Placeholder et Required

Chaque champ possède trois paramètres essentiels.

Name

C’est le nom interne du champ.
C’est ce nom qui sera envoyé dans l’email, le webhook ou Google Sheets.

👉 Utilise des noms clairs
👉 Sans accents
👉 Sans espaces inutiles

Exemple
Nom, Email, Message, Type de demande

Placeholder

C’est le texte visible dans le champ avant saisie.

Il doit :

• guider l’utilisateur

• donner un exemple concret

• rassurer

Exemple :

• Arnaud

• contact@email.com

• Explique ton besoin ici

Required

Quand activé, le champ devient obligatoire.

👉 À utiliser avec parcimonie
👉 Trop de champs obligatoires fait chuter les conversions
👉 Garde uniquement l’essentiel

4. Le champ Dropdown pour qualifier les demandes

Le dropdown est parfait pour filtrer les demandes dès le formulaire.

Exemples de cas d’usage :

• Type de projet

• Budget

• Service demandé

• Urgence

Chaque option se configure avec :

• Value

• Title

• Enabled

• Default

Astuce conversion
Un bon dropdown réduit les allers retours et fait gagner du temps dès le premier contact.

5. Où vont les informations après l’envoi

C’est ici que Framer est très fort.
Tout est déjà prévu, sans intégration compliquée.

Méthodes d’envoi disponibles

• Email

• Webhook

• Google Sheets

Email

Tu reçois chaque soumission directement par mail.
Parfait pour un site vitrine ou un freelance.

Webhook

Idéal pour automatiser avec Make, Zapier, Notion, CRM, etc.

Google Sheets

Parfait pour stocker toutes les réponses automatiquement dans un tableau.

Astuce
Google Sheets est souvent le meilleur compromis entre simplicité et suivi.

6. Redirection après soumission

Après l’envoi, tu peux rediriger l’utilisateur vers :

• une page de remerciement

• une page de confirmation

• un lien Calendly

• une ressource gratuite

👉 C’est une étape clé de l’expérience utilisateur
👉 Et une opportunité de guider vers l’étape suivante

7. Tracking et suivi des formulaires

Framer permet d’ajouter un ID de tracking au formulaire.

Tu peux ainsi :

• suivre les conversions dans Google Analytics

• créer des events personnalisés

• mesurer le taux de complétion

• optimiser les performances de la page

Conseil
Même un simple formulaire mérite d’être tracké.
Les données t’apprennent toujours quelque chose.

Résumé rapide

Avec Framer, tu peux créer des formulaires :

• sans plugin

• sans code

• sans outil externe

• entièrement personnalisables

• prêts pour la production

C’est l’un des éléments les plus sous estimés de Framer, alors qu’il peut clairement faire la différence sur un site.

Si tu as besoin d'aide pour la mise en page de ton formulaire tu peux regarder : Ce guide sur les Layouts
Si tu veux utiliser les tailles intelligemment pour le rendre responsive, tu peux regarder : Ce guide sur les tailles

Créer mon compte Framer Gratuitement