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

Temps de lecture : 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
Editor X
É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.

É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 la liste déroulante à un autre dataset qui se connecte à un champ dans une autre collection.

Éditeur Wix
Editor X
Éditeur Studio
  1. Dans votre Éditeur, cliquez sur l'élément déroulant que vous venez d'ajouter. 
  2. Cliquez sur l'icône Connecter au Système de gestion de contenu (CMS )
  3. Connectez-vous à un ensemble de données qui se rapporte à la collection où vous stockerez les soumissions : 
    • Si vous n'avez pas de dataset sur la page : 
      1. Cliquez sur + Ajouter un dataset sur la droite. Choisissez ensuite la collection à laquelle vous connectez, saisissez le nom du dataset et cliquez sur Créer.  
      2. Cliquez sur Collecter le contenu.
    • Si vous avez déjà un dataset sur la page :
      1. Cliquez sur Collecter le contenu
      2. Cliquez sur le menu déroulant Choisir un dataset et sélectionnez le dataset concerné. Autrement, cliquez sur Ajouter un dataset pour en créer un nouveau, puis choisissez la collection à laquelle vous connectez, saisissez le nom du dataset et cliquez sur Créer.
  4. Cliquez sur le menu déroulant Valeur connectée à et sélectionnez Ajouter un nouveau champ
    1. Saisissez un nom de champ pour le nouveau champ de collection. 
    2. Sélectionnez le type de champ dans la liste déroulante. Le type de champ détermine le type de données que vous pouvez stocker dans le champ
    3. Cliquez sur Ajouter
  1. Cliquez sur le curseur Connecter les éléments de la liste pour choisir où gérer les choix de l'élément :
    • 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 les choix pour l'élément séparément du CMS. 

Étape 3 | Paramétrer les modes de dataset

Étant donné que les datasets contrôlent la connexion entre vos collections et les éléments de votre page, assurez-vous que chaque dataset est dans le bon mode. Pour le dataset connecté à votre collection de soumissions, définissez le mode sur Écriture. Cela permet aux sélections du menu déroulant d'« écrire » ou d'être ajoutées à votre collection lors de l'envoi. 

Si vous avez connecté les éléments de la liste déroulante à une autre collection via un nouveau dataset, le dataset doit automatiquement être correctement paramétré sur Lecture et écriture. Cependant, si vous vous êtes connecté à un dataset existant, assurez-vous de le paramétrer sur Lecture et écriture ou Lecture. Cela permet à l'élément de saisie de la liste déroulants de « lire » ou d'afficher les éléments de la collection afin qu'il puisse les utiliser dans les options de la liste. 
Éditeur Wix
Editor X
Éditeur Studio
  1. Dans le panneau de droite, cliquez sur Paramètres du dataset sous le premier menu déroulant Choisir un dataset . Ce dataset se connecte à la collection dans laquelle vous stockerez les soumissions. 
  1. Cliquez sur le menu déroulant Mode dataset et sélectionnez Écrire.
  1. (Si vous avez connecté des éléments de liste au CMS) Paramétrez le mode du dataset connecté aux éléments de la liste :
    1. Cliquez sur Retour à l'élément déroulant en haut du panneau. 
    2. Cliquez Paramètres du dataset sous le dataset sélectionné dans la section Connexions de listes
    3. Cliquez sur le menu déroulant Mode dataset et sélectionnez Lecture ou Lecture et écriture.
    4. (Facultatif) Cliquez sur + Ajouter un filtre si vous souhaitez créer un filtre pour empêcher certains éléments d'apparaître dans la liste de choix. 
    5. (Facultatif) Cliquez sur + Ajouter un nouveau tri si vous souhaitez choisir l'ordre dans lequel les éléments apparaissent dans la liste des choix. 

Étape 4 | Paramétrer les autorisations de la collection

Paramétrez les autorisations pour la collection dans laquelle vous stockerez les soumissions. Vous pouvez choisir parmi des paramètres d'autorisation prédéfinis, tels que les Envois de formulaires, qui permettent aux visiteurs d'ajouter du contenu. Si nécessaire, vous pouvez personnaliser les autorisations pour contrôler qui peut ajouter, modifier, visualiser et supprimer les éléments de la collection. 
Éditeur Wix
Editor X
Éditeur Studio
  1. Cliquer sur le Système de gestion de contenu (CMS)  à gauche de l'Éditeur.
  2. Cliquez sur Vos collections.
  3. Survolez la collection pour collecter les formulaires reçus et 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. Cliquez dans le menu Que souhaitez-vous stocker dans cette collection ? et sélectionnez Envois de formulaires. Si nécessaire, vous pouvez choisir une autre option et cliquer sur les menus déroulants pour ajuster qui peut voir, ajouter, supprimer et mettre à jour du contenu. En savoir plus sur la définition des autorisations de collection
Capture d'écran de la configuration des autorisations et de la confidentialité de la collection.
  1. Cliquez sur Enregistrer .

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

Vous devez créer un moyen pour les visiteurs de soumettre leurs choix après les avoir sélectionnés dans l'élément déroulant. Ajoutez un bouton ou une image et connectez-le au même dataset qui se connecte à la collection de vos soumissions. Configurez ensuite l'action de clique pour le bouton ou l'image sur Soumettre. Cela permet à la sélection déroulante d'«écrire» ou de créer un nouvel élément dans la collection des soumissions en cliquant sur le bouton d'envoi. 

Si vous connectez d'autres éléments d'entrée au même dataset, le bouton d'envoi envoie également leurs entrées à la collection. 
Éditeur Wix
Editor X
É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. 
  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. 
  1. Cliquez sur le bouton et sélectionnez l'icône Design  pour personnaliser l'apparence de votre bouton soumettre

Étape 6 | 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
Editor X
É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.
  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. 

Cela vous a-t-il aidé ?

|