> ## Documentation Index > Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt > Use this file to discover all available pages before exploring further. # Ajouter un élément de sondage ou de formulaire > Configurez les éléments de sondage et de formulaire dans le Widget Studio, créez un formulaire d'inscription à une newsletter et choisissez où les réponses sont collectées. Les éléments de sondage et de formulaire collectent les réponses des visiteurs. Les éléments de sondage, comme **Short answer** et **NPS**, recueillent des retours pour des sondages. Les éléments de formulaire, comme **Dropdown** et **Checkbox**, recueillent des saisies pour des formulaires, notamment des dates, des heures et des bascules. Un même formulaire peut combiner des éléments des deux groupes, et un élément **Button** envoie les réponses. Les réponses comptent, car vous agissez en conséquence. Une inscription à une newsletter a besoin d'une adresse valide, et un sondage a besoin de réponses que vous pouvez comparer. Le Widget Studio vous permet de vérifier chaque réponse selon une règle, et il peut afficher ou masquer d'autres éléments en fonction de la réponse. ## Éléments de sondage Les éléments de sondage apparaissent dans la section **Survey** du panneau **Add element**. ![Panneau Add element avec la section Survey ouverte, affichant Button, Short Answer, Long Answer, Multiple Choice, NPS, Scale et Hidden input](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-forms/forms-survey-add-element-step-1-zoom2.png) * **Button :** Envoie le sondage lorsqu'un visiteur clique dessus. Choisissez **A button is clicked** sous **When is the survey submitted?** pour l'utiliser comme déclencheur. * **Short answer :** Recueille une saisie textuelle courte auprès des visiteurs. * **Long answer :** Recueille des retours plus longs et ouverts. * **Multiple choice :** Prend en charge les cases à cocher, la sélection unique ou multiple, un champ facultatif « Other » et la randomisation des réponses. * **NPS :** Recueille les données du Net Promoter Score, avec des questions de suivi facultatives. * **Scale :** Affiche une échelle à l'aide d'emojis, d'étoiles, de cœurs ou de chiffres. * **Hidden input :** Un champ de formulaire invisible qui stocke des métadonnées envoyées avec le formulaire, sans les afficher au visiteur. Chaque élément se configure à l'aide de paramètres et d'options de style dédiés dans le Widget Studio. ## Éléments de formulaire La section **Form** contient ces éléments : * **Input :** Champ de saisie entièrement personnalisable qui peut recueillir des données de type chaîne de caractères auprès des visiteurs. * **Date :** Champ qui demande une date au visiteur. Le visiteur clique dessus pour ouvrir un panneau de sélection de date. * **Time :** Champ qui demande une heure au visiteur. Le visiteur clique dessus pour ouvrir un panneau de sélection d'heure. * **Toggle :** Bascule à deux états possibles, par exemple **ON** et **OFF**. * **Checkbox :** Case à cocher à laquelle vous pouvez ajouter un élément **Text**. * **Radio button :** Bouton radio auquel vous pouvez ajouter un élément **Text**. * **Dropdown :** Menu déroulant entièrement personnalisable dans lequel vous pouvez ajouter des options sélectionnables. * **Text area :** Zone de texte entièrement personnalisable avec un texte indicatif (placeholder). * **Range input :** Curseur entièrement modifiable qui permet au visiteur de sélectionner une valeur dans une plage. * **Error message :** Champ de texte qui affiche un message précis lorsque le formulaire contient une erreur. * **Multi step form** Utilisez des éléments de formulaire lorsque votre formulaire a besoin d'une date, d'une heure ou d'une bascule. La section **Survey** ne contient aucun élément pour ces champs. ## Configurer les éléments de sondage Sélectionnez un élément de sondage sur le canevas pour ouvrir ses paramètres. ### Button ![Onglet Settings de l'élément Button avec le texte du bouton, Advanced Settings, les options Style, et le bouton affiché sur le canevas](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-csat-nps-and-survey/add-a-survery-element-to-your-widget/button.png) #### General settings * **Button text :** * Saisissez le texte de votre bouton dans le champ de texte. * Utilisez les boutons situés devant le champ de texte pour : * Modifier votre texte avec l'IA. * Accéder aux options de style. * Modifier la police de votre texte. * Modifier l'alignement de votre texte. * Modifier la couleur de votre texte. * Ajouter un emoji. * Cliquez sur le **three-dots menu** pour : * Supprimer la mise en forme. * Agrandir l'éditeur de texte. * **Style :** Modifiez le type et la couleur d'arrière-plan du bouton. * **Animation :** Sélectionnez une animation d'entrée ou de sortie pour votre bouton. #### Advanced settings Dans **Advanced Settings**, vous pouvez définir : * **Default state :** Indique si le bouton apparaît par défaut. > [!NOTE] > > Si vous désactivez le bouton alors que vous avez précédemment activé **Make required** sur un sondage, le bouton se réactive automatiquement dès que les visiteurs ont répondu à tous les éléments obligatoires du même écran. * **Redirection URL :** L'URL vers laquelle le bouton redirige les visiteurs. * **Open in new tab :** Active ou désactive l'ouverture de l'URL de redirection dans un nouvel onglet. #### Design Deux onglets apparaissent dans le menu **Design** : **General** et **Style**. ##### General Dans l'onglet **General**, vous pouvez définir : * **Alignment :** Modifiez l'alignement du bouton. * **Reposition and resize :** Vous pouvez positionner votre bouton sur les axes **X** et **Y**, ou définir sa largeur et sa hauteur en pixels ou en pourcentage. * Cliquez sur **Activate translate settings** pour accéder aux options de translation. Vous pouvez décaler votre bouton depuis sa position actuelle sur l'axe X ou Y d'une valeur définie en pixels ou en pourcentage. * **Devices synchronization :** Sélectionnez un appareil et choisissez comment le bouton se synchronise avec les autres appareils. * **Fully synchronized :** Le bouton synchronise toutes ses propriétés avec l'appareil maître. * **Partially synchronized :** Le bouton synchronise toutes ses propriétés avec l'appareil maître, sauf si vous modifiez une propriété sur un autre appareil. * **No synchronization :** Le bouton ne synchronise aucune propriété avec l'appareil maître. Définissez les propriétés du bouton sur cet appareil séparément. * **Hide :** Le bouton n'apparaît pas sur l'appareil. * **Padding :** Ajoutez une marge intérieure entre les bordures du bouton et son texte. * **CSS and classes :** Ajoutez du CSS et des classes pour styliser votre bouton. ##### Style Dans l'onglet **Style**, vous pouvez définir : * **State :** Les options sont **enabled**, **hover** ou **off**. * **Text :** Définissez la hauteur de ligne du texte et appliquez les transformations souhaitées. * **Background :** Modifiez le type ou la couleur d'arrière-plan du bouton. * **Border :** Ajoutez une bordure sur tous les côtés du bouton ou une bordure personnalisée. * **Shadow :** Ajoutez une ombre et modifiez sa couleur ou sa position. ### Short answer and long answer ![Onglet Settings de l'élément Short Answer avec Label, Placeholder, Pre-filled value et Advanced Settings, avec le champ affiché sur le canevas](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-csat-nps-and-surveys/add-a-survey-element-to-your-widget/Capture-decran-2025-05-19-a-15.24.42-1536x914.png) #### General settings * **Label/Question :** L'invite ou la question principale. * **Placeholder (optional) :** Texte affiché avant la saisie du visiteur, qui disparaît dès qu'il commence à taper. * **Pre-filled value (optional) :** Insère une réponse prédéfinie dans le champ. * **Default state :** Détermine si le champ est activé ou désactivé au chargement. #### Advanced settings * **Label position :** Positionne le libellé devant ou derrière le champ de saisie. * **Character limit :** Nombre maximal de caractères autorisés. * **Make required :** Oblige les visiteurs à répondre à la question avant l'envoi. Un `*` est ajouté automatiquement au libellé. L'activation de **Make required** affiche la section **Validation rule**, qui permet de définir des contraintes de saisie supplémentaires. * **Validation rule:** Vérifie la saisie selon une règle, par exemple **Not empty** ou **Length**. Pour découvrir chaque option et son fonctionnement, consultez [Valider la saisie Short answer](https://docs.kameleoon.com/fr/user-manual/assets/widgets/create-a-widget-with-the-widget-studio/create-forms/add-rules-to-your-form-fields.md). * **Error message :** Message personnalisé affiché lorsque la validation échoue. Configurez le style du message d'erreur dans **Design** > **Answers** en sélectionnant **Invalid state**. ### Multiple choice ![Onglet Settings de l'élément Multiple Choice avec le format de réponse Checkboxes, un champ Question, Answer 1 et Answer 2, et un lien Add an answer](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-csat-nps-and-surveys/add-a-survey-element-to-your-widget/multiple-choice.png) #### General settings * **Question :** Le texte de la question affiché devant les réponses. * **Answers :** Ajoutez, supprimez ou réorganisez les choix de réponse. Cliquez sur **Add an answer** pour créer d'autres options. #### Advanced settings * **Multiple selection :** Permet aux visiteurs de sélectionner plusieurs réponses. Si l'option est désactivée, les visiteurs ne peuvent sélectionner qu'une seule réponse. * **Add "Other" :** Ajoute un champ de texte libre intitulé « Other » pour que les visiteurs puissent saisir une réponse personnalisée. * **Randomize answers :** Mélange aléatoirement l'ordre des réponses proposées pour chaque visiteur afin de réduire le biais de sélection. * **Make required :** Si l'option est activée, les visiteurs doivent sélectionner au moins une réponse pour envoyer le sondage. Un `*` est ajouté automatiquement après le libellé de la question (même style que **Question** dans l'onglet **Design**). ### Scale ![Onglet Settings de l'élément Scale avec Scale type défini sur Stars, Scale item count défini sur 5, et un aperçu de cinq étoiles sur le canevas](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-csat-nps-and-surveys/add-a-survey-element-to-your-widget/Capture-decran-2025-05-19-a-15.44.30-1-1536x916.png) #### General settings * **Scale type :** Emojis, Stars, Hearts ou Numbers. * **Scale item count :** Nombre de valeurs sur l'échelle (par exemple, 1 à 5). * **Question :** L'invite principale. #### Scale labels * **Label position :** Affiche les libellés devant les éléments de l'échelle, derrière eux, ou masque les libellés. * Vous pouvez personnaliser les libellés de chaque élément de l'échelle. #### Advanced settings * **Make required :** Oblige les visiteurs à répondre avant l'envoi. ### NPS ![Onglet Settings de l'élément NPS avec les champs de question, une question de suivi définie sur All users et un aperçu de score de 0 à 10 sur le canevas](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-csat-nps-and-surveys/add-a-survey-element-to-your-widget/Capture-decran-2025-05-19-a-15.44.01-1-1536x915.png) #### Question structure * La formulation de la question NPS est en partie fixe, afin de garantir l'uniformité. Vous ne pouvez modifier que certaines parties de la question. Pour changer la langue, accédez à l'onglet **Translation** et définissez une langue par défaut. #### Fields * **How likely are you to recommend (X) to (Y)?** * Vous pouvez modifier les champs produit/service et cible. * **Follow-up question (optional) :** * Afficher pour **All users** ou uniquement pour : * Promoters (score 9-10) * Passives (score 7-8) * Detractors (score 0-6) * Permet d'afficher un contenu de suivi conditionnel. * **Make required :** Marquez comme obligatoire uniquement le **initial NPS score**. La question de suivi est toujours facultative. ## Configurer les éléments de formulaire Sélectionnez un élément de formulaire sur le canevas pour ouvrir ses paramètres. Les éléments de formulaire comportent deux onglets : **General** et **States**. L'onglet **General** contient les paramètres de l'élément. Pour un **Dropdown**, il comprend **Initial state**, **Required** et **Placeholder**. ![Paramètres de l'élément Dropdown dans l'onglet General, affichant Initial state, Required, Placeholder et l'option Latest products](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-forms/forms-legacy-dropdown-settings-step-1-zoom2.png) L'onglet **States** définit les styles de chaque état de l'élément, comme l'état par défaut. Pour un **Dropdown**, il comprend les styles de police, de couleur d'arrière-plan, de bordure, d'ombre et d'accessibilité. ![Paramètres de l'élément Dropdown dans l'onglet States, avec Choose state défini sur default et les sections Font, Background Color, Border, Shadow et Accessibility](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-forms/forms-legacy-dropdown-states-step-1-zoom2.png) ## Collecter les données du sondage Vous pouvez collecter les données du sondage dans Kameleoon, où vous pouvez les exporter au format .csv, ou les envoyer à un service externe par une requête HTTP. Définissez ce paramètre dans l'onglet **Survey Settings**. 1. Ouvrez l'onglet **Survey Settings** dans le panneau Content. 2. Activez **Collect survey data**. 3. Sous **When is the survey submitted?**, sélectionnez le moment où les réponses sont envoyées. Sélectionnez **A button is clicked** et choisissez l'élément bouton, ou sélectionnez **The widget is closed** ou **An answer is clicked**. 4. Sous **How are responses collected?**, sélectionnez **Kameleoon** pour stocker les réponses dans Kameleoon, ou sélectionnez **Externally (HTTP Request)** pour les envoyer à une URL. 5. Si vous avez sélectionné **Externally (HTTP Request)**, saisissez un **Request name**, sélectionnez une **Method** (GET ou POST), saisissez l'**Action URL** et, si vous le souhaitez, cliquez sur **Add header request** pour ajouter un en-tête. 6. Cliquez sur **Save**. Pour exporter les réponses depuis Kameleoon, consultez [Exportation de données d'enquête](https://docs.kameleoon.com/fr/user-manual/assets/widgets/create-a-widget-with-the-widget-studio/create-csat-nps-and-surveys/survey-data-export.md). Pour envoyer les réponses vers une feuille de calcul, consultez [Envoyer les réponses au sondage vers Google Sheets](https://docs.kameleoon.com/fr/user-manual/assets/widgets/create-a-widget-with-the-widget-studio/create-csat-nps-and-surveys/send-survey-responses-to-google-sheets.md). ## Créer un formulaire d'inscription à une newsletter Le Widget Studio inclut des modèles **Newsletter** à partir desquels vous pouvez commencer. Pour créer un formulaire d'inscription à une newsletter à partir de zéro, ajoutez ses éléments dans l'ordre suivant. 1. Cliquez sur **Add element** et sélectionnez **Short answer** dans la section **Survey**. Utilisez cet élément pour l'adresse e-mail. 2. Cliquez sur **Add element** et sélectionnez **Dropdown** dans la section **Form**. 3. Dans les paramètres de **Dropdown**, cliquez sur **+Add option** et saisissez **Latest products**. ![Panneau de l'élément Dropdown, onglet General, avec Required désactivé, un Placeholder et l'option Latest products](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/design-your-form-step-2-2x.png) 4. Cliquez sur **Add element** et sélectionnez un second **Dropdown**. Dans la barre latérale gauche, masquez ce second menu déroulant jusqu'à ce qu'un visiteur sélectionne **Latest products**. Pour configurer l'événement qui l'affiche, consultez [Ajouter une logique conditionnelle](https://docs.kameleoon.com/fr/user-manual/assets/widgets/create-a-widget-with-the-widget-studio/add-conditional-logic.md). ![Onglet Content du Widget Studio avec le menu de l'élément Dropdown ouvert, affichant Edit, Rename, Duplicate in, Hide et Delete](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/design-your-form-step-3-2x.png) 5. Cliquez sur **Add element** et sélectionnez **Checkbox** dans la section **Form**. Utilisez cet élément pour les conditions générales. 6. Cliquez sur **Add element** et sélectionnez **Button** dans la section **Survey** pour envoyer le formulaire. Ensuite, définissez les règles qui vérifient les réponses. Consultez [Valider la saisie Short answer](https://docs.kameleoon.com/fr/user-manual/assets/widgets/create-a-widget-with-the-widget-studio/create-forms/add-rules-to-your-form-fields.md).