Vous souhaitez partager votre formulaire sur votre site Web ? Typeform inclut plusieurs options d'intégration dans le format qui vous convient le mieux. Cet article couvre les modes d'intégration et les options de design - pour en savoir plus sur les options d'intégration avancées, cliquez ici.
Vous cherchez un autre moyen de partager votre formulaire ? Découvrez d'autres options de partage ici.
Attention ! L'intégration de formulaires sur des sites Web utilisant le protocole HTTP non sécurisé et non chiffré n'est pas prise en charge. Assurez-vous d'intégrer votre formulaire sur un site Web HTTPS, où le flux de données entre le client et le serveur est sécurisé par chiffrement. Si vous n'avez pas encore de site Web HTTPS, vous pouvez obtenir un certificat SSL auprès de votre hébergeur.
Pour commencer, connectez-vous à votre compte Typeform, ouvrez le formulaire que vous souhaitez intégrer, cliquez sur le panneau Partager, puis cliquez sur Intégrer dans une page Web. Vous pouvez ensuite voir nos options d'intégration sur la droite.
Ci-dessus, vous pouvez voir les options d'intégration : Standard, Pleine page, Popup, Curseur, Popover et Onglet latéral. (Les développeurs front-end peuvent également consulter notre Intégration SDK.) Vous pouvez basculer entre chacune de ces options dans le panneau Partager jusqu'à ce que vous décidiez laquelle vous souhaitez essayer.
Attention ! Vous n'avez pas besoin de réintégrer un formulaire existant lorsque vous apportez des modifications au formulaire lui-même, mais assurez-vous de cliquer sur Publier les modifications pour que vos mises à jour apparaissent dans la version intégrée.
Poursuivez votre lecture pour en savoir plus sur chacune des options d'intégration.
Incrustation standard
Un formulaire intégré standard se chargera sur votre site Web à l'endroit où vous décidez de le placer. Vous pouvez voir un aperçu de votre formulaire intégré dans le panneau central.
Vous pouvez modifier la hauteur et la largeur de votre formulaire, et vous pouvez également choisir de masquer l'en-tête des groupes de questions.
Cliquez sur Commencer l'intégration pour générer votre code d'intégration. Lisez la suite pour en savoir plus sur vos options d'intégration et vos paramètres.
Conseil ! Si vous quittez le panneau Partager avant de cliquer sur Démarrer l'intégration, vous perdrez vos paramètres d'intégration.
Transparence
Vous pouvez rendre l'arrière-plan de votre formulaire totalement transparent, ou même opaque. Choisissez une valeur comprise entre 0 % et 100 % : 0 % est totalement opaque et 100 % est totalement transparent. Utilisez le curseur pour sélectionner votre transparence
Ce GIF montre trois transparences subtilement différentes. Essayez d'expérimenter avec votre site !
Masquer l'en-tête du type
L'en-tête apparaît lorsque vous avez un groupe de questions ou une question longue que vous devez faire défiler pour répondre, comme une question à choix multiple. Un exemple est mis en avant ci-dessous.
Pour désactiver cette option, il suffit de basculer l'interrupteur sur Activé.
Une fois vos paramètres d'intégration choisis, vous pouvez récupérer le code en cliquant sur le bouton Commencer l'intégration . Cliquez sur Copier et collez simplement ce code dans le code de votre page Web pour intégrer le formulaire.
Si vous utilisez Wordpress, Squarespace, Webflow ou Shopify pour intégrer votre formulaire, vous pouvez sélectionner votre générateur de site web dans le menu déroulant pour obtenir des instructions d'intégration spécifiques.
Intégration pleine page
Cliquez sur Pleine page pour voir à quoi ressemblera votre formulaire, puis cliquez sur Commencer l'intégration pour obtenir le code. Il n'existe pas de paramètres pour l'intégration pleine page, bien que vous puissiez désactiver les en-têtes de question. Voici un exemple.
Popup
Au milieu de votre écran, vous pouvez voir un aperçu de l'apparence de votre popup. Cliquez sur le bouton Essayez-moi ! pour voir votre popup en action.
Le menu Design vous permet de modifier l'apparence de votre popup.
Vous pouvez choisir d'utiliser une popup Grande, Moyenne ou Petite via le menu déroulant Taille de la popup :
Vous pouvez ensuite modifier le texte du bouton, la couleur du bouton, la taille de la police, l'arrondi des coins, les coins arrondiset masquer l'en-tête.
Saisissez le texte de votre choix dans le champ Texte du bouton, jusqu'à 24 caractères, pour modifier ce qui apparaît sur le bouton.
Cliquez sur la liste déroulante Couleur pour choisir la couleur de votre bouton. Vous pouvez utiliser les deux panneaux de couleur pour choisir manuellement ou saisir un code couleur hexadécimal spécifique.
Le curseur Rayon de bordure vous permet de donner au bouton des coins plus ou moins arrondis. 0 % vous donne des bords carrés, tandis que 100 % vous donne des bords semi-circulaires.
Voici à quoi cela ressemblera à 0 %, 50 % et 100 %.
Cliquez sur Remplacer le bouton par du texte pour afficher du texte au lieu d'un bouton. Vous pouvez choisir le texte et la taille de la police à l'aide du curseur. N'oubliez pas que la police de votre texte est choisie dans l'onglet Design.
Vous pouvez choisir de masquer l'en-tête (uniquement affiché lorsque vous utilisez un groupe de questions). Voici ce que vous voyez avec l'en-tête activé.
Et avec l'en-tête masqué.
Curseur
Vous pouvez ici définir tout ce qui est détaillé dans la section Fenêtre contextuelle (voir ci-dessus), et également choisir si votre formulaire doit apparaître depuis la droite ou la gauche de votre site.
Popover
Dans ce mode, vous pouvez modifier le bouton popover sur lequel les utilisateurs cliqueront pour ouvrir votre formulaire. Choisissez la couleur du bouton pour l'adapter à votre site et téléchargez une icône personnalisée si vous le souhaitez.
Onglet latéral
Pour ce mode, vous pouvez modifier le texte de l'onglet, qui indique Essayez-moi ! par défaut. Vous pouvez également ajouter une icône personnalisée.
Récupérez votre code intégrer
Une fois vos paramètres d'intégration choisis, cliquez simplement sur le bouton Commencer l'intégration . Copiez le code et collez-le dans l'éditeur de code de votre page Web. Si vous utilisez Wordpress, Squarespace, Webflow ou Shopify pour intégrer votre formulaire, vous pouvez sélectionner votre générateur de site web dans le menu déroulant pour obtenir des instructions d'intégration spécifiques.
Astuce ! Le code d'intégration en direct de Typeform contient généralement la chaîne data-tf. Vous pouvez rechercher cette chaîne dans le code de votre site si vous avez besoin de localiser et de supprimer l'intégration plus tard.
Attention ! Veuillez utiliser le code exact fourni par cette fonctionnalité d'intégration – nous ne pouvons pas garantir que les formulaires fonctionneront correctement si vous utilisez votre propre code d'intégration personnalisé.
Créez différentes configurations d'intégration
Vous pouvez créer plusieurs codes d'intégration avec différents types d'intégration pour un même formulaire. Par exemple, vous pouvez créer un code d'intégrer avec le type d'intégrer « Popup » pour votre page de destination, puis créer un nouveau code d'intégrer avec le type d'intégrer « Standard » pour votre site web.
Cliquez sur Nouvelle intégration pour créer un nouveau code d'intégration en direct, puis sélectionnez le type d'intégration et apportez les modifications souhaitées aux paramètres de design.
Cliquez sur Nom d'intégration pour modifier le nom de votre nouvelle intégration.
Cliquez sur Appliquer les modifications pour enregistrer vos changements. Vous pouvez ensuite copier votre code et le coller dans l'éditeur de code de votre page Web.
Tous vos codes d'intégration en direct apparaîtront sur le côté gauche de l'écran.
Pour afficher votre code d'intégration à tout moment, cliquez sur l'icône de code d'intégration.
Pour supprimer votre code d'intégration, cliquez sur l'icône de la corbeille.
Attention ! La suppression de votre code d'intégration supprimera également le code d'intégration de toute page sur laquelle vous l'avez intégré.
Vous pouvez modifier le type d'intégration et les paramètres à tout moment, même après l'avoir intégré à votre site Web. Cliquez sur Appliquer les modifications pour enregistrer vos ajustements ; toutes les modifications seront appliquées automatiquement. Il n'est pas nécessaire d'intégrer à nouveau votre formulaire après avoir modifié vos paramètres d'intégration.
Options avancées
Découvrez les options d'intégration avancées, comme les options de lancement personnalisées, dans cet article.
Tailles de texte pour les formulaires intégrés
Lorsque vous intégrez un formulaire, nos robots redimensionnent automatiquement le texte pour l'adapter aux espaces plus restreints.
Selon l'espace disponible, le texte d'un formulaire sera affiché dans les tailles suivantes : Grand (par défaut), Moyen ou Petit.
Les règles permettant de déterminer les différentes tailles sont basées sur les conditions suivantes :
- Si la largeur du formulaire > 800 px = Grand
- Si la largeur du formulaire < 800 px = Moyen
- Si la largeur du formulaire < 550 px = Petit
- Si la hauteur du formulaire < 450 px = Petit
Si vous consultez votre formulaire sur un appareil mobile et que vous voyez un symbole vous invitant à tourner votre écran, il est probable que votre formulaire soit intégré avec une taille trop grande pour être visualisé sur mobile. Dans ce cas, vérifiez la largeur et la hauteur de l'intégration. Pour améliorer votre expérience sur mobile, vous pouvez également vérifier le contenu du formulaire et segmenter les longs blocs de texte en questions plus courtes si possible.
Champs cachés avec formulaires intégrés
Vous intégrez un formulaire à l'aide de champs cachés ? Pas de problème ! Lorsque vous avez configuré des champs cachés, ils seront automatiquement inclus dans votre code d'intégration. Cet article explique comment les utiliser.
Formulaires intégrés sur mobile
Par défaut, Typeform affiche les formulaires intégrés sur mobile sous forme de fenêtres contextuelles en plein écran pour améliorer l'expérience utilisateur. Ces fenêtres contextuelles contiennent un écran de démarrage fictif avec le nom du formulaire et un bouton de lancement.
Vous pouvez cliquer sur l'icône Mobile pour voir à quoi ressemblera votre formulaire intégré sur mobile en utilisant différents modes d'intégration.
Vous trouverez ci-dessous un exemple de ce à quoi ressemble une intégration pleine page sur mobile.
Lors de l'intégration de votre formulaire sur mobile, vous pouvez également activer l'option Plein écran sur mobile sous l'onglet Design du panneau Partager.
L'activation de cet interrupteur permettra à vos répondants de lancer votre formulaire sous forme de fenêtre contextuelle plein écran sur mobile, tout en générant automatiquement un écran de démarrage fictif.
Vous pouvez remplacer la fenêtre contextuelle par une petite modification de votre code de site. Après avoir intégré le formulaire, localisez l'emplacement de l'intégration dans le code. Après l'attribut « data-tf-live », ajoutez l'extrait « data-tf-inline-on-mobile ». Votre code devrait ressembler à ceci.
<div data-tf-live="ABCDEF" data-tf-inline-on-mobile></div>
Cela affichera votre formulaire sous forme d'intégration en ligne sur mobile. L'écran de démarrage par défaut n'apparaîtra plus ; à la place, les répondants verront l'écran de bienvenue de votre formulaire, s'il en possède un.
Il est recommandé de régler la hauteur de votre intégration sur Auto pour les intégrations mobiles en ligne.