Comment modifier le texte d'espace réservé par défaut d'un élément de liste déroulante

Personnaliser le texte d'espace réservé par défaut d'un élément de liste déroulante peut contribuer à rendre vos formulaires plus clairs, plus professionnels et plus faciles à comprendre pour les clients.

Au lieu d'utiliser un texte d'espace réservé générique, vous pouvez afficher des étiquettes plus significatives telles que :

• Sélectionnez votre pays
• Choisissez une taille
• Sélectionnez votre métier
• Choisissez une option de livraison

Pourquoi personnaliser le texte d'espace réservé aux menus déroulants ?

La mise à jour du texte d'espace réservé de votre menu déroulant contribue à améliorer :

• Clarté de la forme
• Expérience de l'utilisateur
• Taux de remplissage des formulaires
• Professionnalisme de la marque
• Conseils aux clients

Des libellés clairs et génériques aident les visiteurs à comprendre exactement quelles informations ils doivent sélectionner avant de soumettre un formulaire.

Ceci est particulièrement utile pour :

• Formulaires de contact
• Formulaires d'inscription
• Formulaires d'enquête
• Formulaires de personnalisation des produits
• Formulaires en plusieurs étapes

Avant de commencer

Avant de suivre ce tutoriel, assurez-vous d'avoir déjà :

• Une page créée dans GemPages
• A Élément déroulant ajouté à votre page
• Accès à l'éditeur GemPages

Étape 1 : Sélectionnez l'élément de liste déroulante

Ouvrez votre page dans l'éditeur GemPages.

Faites un clic droit sur l'élément déroulant où vous souhaitez modifier le texte d'espace réservé => Code personnalisé.

Étape 2 : Ouvrez l’onglet Script

Ouvrez le scénario Onglet. C'est ici que vous pouvez ajouter du code JavaScript personnalisé pour l'élément sélectionné.

Étape 3 : Ajouter le script personnalisé

Collez le code suivant dans l'onglet Script :

document.addEventListener("DOMContentLoaded", () => {

  const currentElement = document.getElementsByClassName('{{rootClassName}}');

  élément_actuel[0]

    .querySelector('option[désactivée].gp-hidden')

    .innerText = 'Profession';

});

NOTE IMPORTANTE

Remplacez « Profession » par le texte d'espace réservé que vous souhaitez afficher.

Exemple :

'Sélectionnez votre pays'

or

« Choisissez votre taille »

Résultat: