header-logo
Développez vos compétences.
Obtenez des conseils pour la conception Web, le marketing et plus encore.
Découvrez comment augmenter le trafic de votre site naturel provenant des moteurs de recherche.
Créez un site personnalisé à l'aide de notre plateforme complète.
Trouvez un spécialiste pour vous aider à atteindre vos objectifs.
placeholder-preview-image

Système de gestion de contenu (CMS) : Configurer un formulaire personnalisé à l'aide d'éléments de saisie déroulants

27 min
Créez des formulaires personnalisés qui permettent aux visiteurs d'utiliser les saisies du menu déroulant pour soumettre leurs sélections directement dans vos collections du système de gestion de contenu (CMS). Cet article vous guide tout au long du processus d'ajout d'un élément de saisie déroulant et d'un bouton d'envoi. Vous allez connecter les deux éléments à un dataset qui permettra d'enregistrer les soumissions des visiteurs dans votre collection du CMS. 

Après avoir terminé ces étapes, vous pouvez développer votre formulaire en ajoutant plus d'éléments de saisie et en les connectant au même dataset. 
Capture d'écran d'un élément de saisie de menu déroulant utilisé sur un site en ligne.
Avant de commencer :
Assurez-vous d'ajouter le Système de gestion de contenu (CMS) sur votre site si vous ne l'avez pas déjà fait. 

Étape 1 | Ajouter l'élément déroulant

Accédez à la page de votre Éditeur où vous souhaitez créer un formulaire personnalisé, puis ajoutez l'élément liste déroulante.

Éditeur Wix
Éditeur Studio
  1. Accédez à votre éditeur.
  2. Accédez à la page à laquelle vous souhaitez ajouter des éléments de saisie.
  3. Cliquez sur Ajouter des éléments  à gauche de l'éditeur.
  4. Cliquez sur Saisie.
  5. Cliquez sur Menu déroulant.
  6. Cliquez et faites glisser le menu déroulant que vous souhaitez utiliser sur la page. 
Capture d'écran de l'ajout de l'élément déroulant dans l'Éditeur.
Suggestion :
Ajoutez plus d'éléments de saisie pour chaque type d'informations que les visiteurs doivent envoyer. Les éléments de saisie que vous ajoutez déterminent les types de champs auxquels ils peuvent se connecter et le type de données qu'ils peuvent enregistrer. 

Étape 2 | Se connecter au système de gestion de contenu (CMS)

Connectez votre menu déroulant à un dataset qui se connecte à une collection du système de gestion de contenu (CMS) dans lequel vous stockerez les soumissions. 

Pour les options qui apparaissent dans la liste déroulante, vous pouvez les ajouter manuellement ou utiliser des éléments d'une autre collection du CMS. Pour utiliser des éléments du CMS, connectez les options de la liste déroulante à un autre ensemble de données qui se connecte à un champ d'une autre collection.
Éditeur Wix
Éditeur Studio
  1. Dans votre éditeur, ajoutez un ensemble de données qui se connecte à une collection où vous enregistrerez les soumissions :
    1. Cliquez sur CMS  à gauche. 
    2. Cliquez sur Ajouter éléments de contenu
    3. Cliquez sur Ensemble de données du formulaire.
    4. Cliquez sur le menu déroulant Choisir une collection et sélectionnez une collection pour stocker les données reçues. 
    5. Donnez un nom à l'ensemble de données (ex. « Envois »). 
    6. Cliquez sur Créer.
  2. Cliquez sur l'élément déroulant et sélectionnez Collecter le contenu dans le panneau Connecter le menu déroulant à droite.
Capture d'écran de la sélection « Collecter du contenu » dans le panneau Connecter le menu déroulant.
  1. Cliquez sur le menu déroulant Choisir un ensemble de données et sélectionnez votre ensemble de données « Envois ».
  2. Connectez l'élément de saisie liste déroulante à un nouveau champ de collection pour stocker ses soumissions :
    1. Cliquez sur le menu déroulant Valeur connectée à et sélectionnez Ajouter un nouveau champ:
    2. Saisissez Nom de champ du nouveau champ de collection. 
    3. (Codage uniquement) Saisissez la Clé de champ qui identifie ce champ dans le code de votre site. Elle ne peut pas être modifiée plus tard. 
    4. Cliquez sur le menu déroulant Type de champ et sélectionnez le type de champ en fonction du type de données que vous souhaitez collecter.
      Suggestion : Pour les types de champs « Référence », sélectionnez la collection référencée dans le menu déroulant.
    5. Cliquez sur Ajouter.
Capture d'écran de la connexion d'un élément de saisie liste déroulante à un nouveau champ de collection.
  1. Cliquez sur le curseur Afficher les options d'une collection pour choisir où gérer les choix du menu déroulant :
    • Activé : Utilisez le champ d'une autre collection du CMS pour les choix. Connectez le dataset correspondant et choisissez les champs à utiliser dans la liste déroulante Libellés et valeurs connectés à.
    • Désactivé : Cliquez sur Gérer les choix pour créer des choix statiques pour l'élément séparément du CMS. 
Capture d'écran de la connexion des options de liste d'un élément de saisie liste déroulante.
  1. (Si vous avez ajouté d'autres éléments de saisie) Connectez les saisies à votre dataset « Formulaires » :
    1. Cliquez sur l'élément de saisie correspondant. 
    2. Cliquez sur l'icône Connecter au CMS  .
    3. Répétez les étapes 3 à 4 ci-dessus pour connecter la saisie à votre dataset « Envois ». 
    4. Répétez cette étape pour chaque élément de saisie que vous souhaitez ajouter à votre formulaire CMS personnalisé. 
Qu'en est-il des modes ensemble de données ?
  • Si vous avez ajouté un « ensemble de données de formulaire », il est déjà configuré correctement en mode « Écriture ». Ce mode permet au dataset d'ajouter de nouveaux éléments à votre collection « Envois » en fonction des envois de l'élément de saisie liste déroulante.
  • Si vous avez connecté les options de liste que les visiteurs sélectionnent dans l'élément déroulant, assurez-vous que cet ensemble de données distinct est en mode « Lecture » ou « Lecture et écriture ».
  • Si vous avez besoin que votre formulaire CMS mette à jour les éléments de la collection existants, configurez le dataset « Envois » en mode « Lecture et écriture ». Assurez-vous que les autorisations de collection permettent également aux personnes ayant les rôles concernés de mettre à jour le contenu. 

Étape 3 | Configurer les autorisations de collection

Configurez les autorisations pour la collection où vous stockerez les soumissions. Vous pouvez choisir le paramètre prédéfini Collecter le contenu qui permet aux visiteurs d'ajouter du contenu, puis spécifiez qui peut l'ajouter. Vous pouvez également choisir les autorisations avancées pour contrôler qui peut consulter, ajouter, mettre à jour et supprimer les éléments de la collection. 
Éditeur Wix
Éditeur Studio
  1. Cliquer sur le Système de gestion de contenu (CMS)  à gauche de l'Éditeur.
  2. Cliquez sur Vos collections.
  3. Survolez votre collection « Envois », cliquez sur l'icône Plus d'actions .
  4. Cliquez sur Autorisations et confidentialité
Capture d'écran de la sélection des autorisations et des paramètres de confidentialité pour une collection du système de gestion de contenu (CMS).
  1. Choisissez les autorisations à utiliser pour la collection :
  2. Choisissez le type d'autorisations que vous souhaitez utiliser pour votre collection :

Étape 4 | Créer un bouton d'envoi

Vous devez créer un moyen pour les visiteurs d'envoyer les réponses aux éléments de saisie qu'ils ont saisies ou sélectionnées. Créez un bouton « Envoyer » en ajoutant un bouton ou une image normale et en le connectant à l'action de cliquer « Envoyer ». Lorsque les visiteurs cliquent sur le bouton « Envoyer », les valeurs de votre saisie déroulante et de toutes les autres saisies que vous connectez à votre ensemble de données « Envois » sont enregistrées dans votre collection. Selon le mode Ensemble de données et les autorisations de votre collection, les valeurs sont soit ajoutées en tant que nouveaux éléments, soit utilisées pour mettre à jour des éléments existants.
 
Vous pouvez également créer des boutons distincts pour les actions d'ensemble de données suivantes : 
  • Nouveau : Ajoutez ou mettez à jour les éléments de la collection (en fonction du mode dataset) et réinitialise les saisies pour accepter les nouvelles valeurs. 
  • Revenir : Réinitialisez les valeurs dans les éléments de saisie qui n'ont pas encore été soumis. 
  • Supprimer : Supprimez les éléments sélectionnés de votre collection (mode « Lecture et écriture » uniquement). 
  • Page suivante/ Page précédente : Si vous affichez les éléments que les visiteurs modifient dans une galerie ou un répéteur, vous pouvez ajouter ces boutons pour permettre aux visiteurs de naviguer sur des "pages" d'éléments. Si vous avez créé votre formulaire sur une page d'élément dynamique, utilisez la page dynamique suivante / page dynamique précédente à la place. 
Éditeur Wix
Éditeur Studio
  1. Cliquez sur Ajouter des éléments  à gauche de l'éditeur.
  2. Cliquez sur Bouton.
  3. Cliquez et faites glisser le bouton que vous souhaitez utiliser comme bouton d'envoi sur la page. Vous pouvez utiliser l'un des types de boutons suivants : Boutons à thème, Boutons texte et icône, Boutons icône, ou Boutons image.
    Suggestion : Vous pouvez également ajouter une image et l'utiliser comme bouton d'envoi. 
Capture d'écran de l'ajout d'un bouton dans l'éditeur Wix.
  1. Cliquez sur Modifier le texte et l'icône et saisissez le texte que vous souhaitez afficher sur le bouton (par exemple « Soumettre »). 
  2. Cliquez sur l'icône Connecter au Système de gestion de contenu (CMS ) .
  3. Cliquez sur le menu déroulant Choisir un dataset et sélectionnez le dataset connecté à votre collection de soumissions. 
  4. Cliquez sur le menu déroulant L'action de cliquer connecte à et sélectionner Soumettre
  5. (Facultatif) Ajoutez des messages de réussite et d'échec qui s'affichent lorsque les soumissions sont envoyées avec ou sans succès :
    1. Cliquez sur + Ajouter un message de réussite puis cliquez sur + Ajouter un message d'échec.
    2. Cliquez et faites glisser les deux messages à l'endroit où vous souhaitez qu'ils apparaissent. Ils peuvent se chevaucher car les messages ne s'affichent pas en même temps.
    3. Cliquez sur Modifier le texte sur chaque message pour modifier les messages.
  6. Sélectionnez le bouton et cliquez sur l'icône Connecter au système de gestion de contenu (CMS ) . Cliquez ensuite sur le menu déroulant En cas de succès, accédez à et sélectionnez une option :
    • Rester sur cette page : Le visiteur reste sur la même page après avoir envoyé le formulaire.
    • Un lien : Le visiteur est redirigé vers une autre page après avoir envoyé le formulaire. Cliquez sur Choisir sous Choisir un lien et configurez le lien. 
Capture d'écran de la configuration d'un bouton « Envoyer ».
  1. Cliquez sur le bouton et sélectionnez l'icône Design  pour personnaliser l'apparence de votre bouton soumettre

Étape 5 | Personnaliser l'élément déroulant

Définissez le titre, le texte de l'espace réservé et d'autres options dans les paramètres du menu déroulant. Personnalisez l'aspect et la convivialité des éléments dans le panneau Design et ajustez l'alignement, l'espacement et le remplissage dans le panneau Mise en page. 
Éditeur Wix
Éditeur Studio
  1. Dans votre Éditeur, cliquez sur l'élément déroulant. 
  2. Cliquez sur Paramètres et modifiez ce qui suit :
    • Titre du champ : Saisissez un titre qui apparaîtra en haut de l'élément déroulant.
    • Afficher le texte initial : Sélectionnez le texte initial que les visiteurs voient avant de cliquer sur l'élément déroulant :
      • Aucun : Les visiteurs voient une boîte vide avant de cliquer sur l'élément déroulant.
      • Texte de l'espace réservé : Utilisez votre propre texte sur l'élément déroulant (par exemple « Choisissez votre couleur »). Saisissez le texte dans le champ Texte espace réservé
      • Élément du menu déroulant : Affichez un élément de la liste déroulante. Si vous avez connecté la liste au CMS, l'élément qui apparaît est le premier choix déroulant que les visiteurs peuvent sélectionner. Si vous n'avez pas connecté les éléments de la liste au CMS, cliquez sur Sélectionnez un élément de votre liste pour choisir l'élément qui apparaît. 
      • Saisie semi-automatique : Cliquez sur le curseur pour déterminer ce qui se passe lorsque les visiteurs saisissent pour rechercher dans le menu déroulant :
        • Activé : Seuls les choix qui correspondent au texte saisi apparaissent dans la liste déroulante. 
        • Désactivé : Tous les choix apparaissent dans la liste déroulante. 
    • Type de liste déroulante : Choisissez une option :
      • Personnalisé : Personnalisez l'élément déroulant dans le panneau Design. Sur mobile, le type de liste est toujours défini sur Navigateur.
      • Navigateur : Utilisez le thème par défaut du navigateur sur l'élément déroulant.
    • Ce champ est : Cochez la case Obligatoire pour exiger que les visiteurs sélectionnent un élément dans cette liste déroulante avant que leur soumission puisse être soumise.
Capture d'écran des paramètres de l'élément de saisie liste déroulante.
  1. Cliquez sur l'icône Mise en page  pour ajuster l'alignement du texte, ainsi que la marge intérieure et l'espacement de l'élément. 
  2. Cliquez sur l'icône Design  pour choisir un design prédéfini, puis sélectionnez Personnaliser le design pour ajuster davantage l'apparence de l'élément déroulant. 
  3. (Facultatif) Cliquez sur l'icône Animation  pour ajouter une animation à l'élément déroulant. 
Prêt à être mis en ligne ?
Cliquez sur Aperçu en haut à droite de votre Éditeur pour tester votre nouveau formulaire déroulant personnalisé. Lorsque tout va bien et fonctionne parfaitement, cliquez sur Publier pour mettre en ligne les modifications. 

Si vous avez activé Sandbox, synchronisez votre collection Sandbox avec la collection live pour mettre en ligne les modifications de la base de données. 

FAQ

Cliquez sur une question ci-dessous pour obtenir les réponses aux questions les plus courantes sur la connexion des éléments du menu déroulant au système de gestion de contenu. 
Capture d'écran d'un élément de saisie de menu déroulant utilisé sur un site en ligne.
Capture d'écran de l'ajout de l'élément déroulant dans l'Éditeur.
Capture d'écran de la sélection « Collecter du contenu » dans le panneau Connecter le menu déroulant.
Capture d'écran de la connexion d'un élément de saisie liste déroulante à un nouveau champ de collection.
Capture d'écran de la connexion des options de liste d'un élément de saisie liste déroulante.
Capture d'écran de la sélection des autorisations et des paramètres de confidentialité pour une collection du système de gestion de contenu (CMS).
Capture d'écran de l'ajout d'un bouton dans l'éditeur Wix.
Capture d'écran de la configuration d'un bouton « Envoyer ».
Capture d'écran des paramètres de l'élément de saisie liste déroulante.