Ajouter un border color à un input lorsqu'il est renseigné dans Webflow

outils :

Introduction

Webflow ne permet pas de modifier l'état 'non vide/renseigné" d'un input nativement.

Vous pouvez uniquement modifier les états :

  • Hover
  • Pressed
  • Focused

L'attribution d'une couleur spécifique à un input peut avoir plusieurs avantages en termes de design d'interface et d'expérience utilisateur :

  1. Visibilité : Une couleur spécifique peut aider à distinguer un champ de saisie des autres éléments, rendant ainsi le formulaire plus intuitif et facile à naviguer.
  2. Feedback : La couleur peut servir de feedback immédiat. Par exemple, un changement de couleur peut indiquer si l'information saisie est valide ou non (vert pour correct, rouge pour une erreur).
  3. Esthétique : Une palette de couleurs bien choisie peut contribuer à l'harmonie visuelle de l'interface et à une expérience utilisateur agréable.

Il est important de veiller à ce que les choix de couleurs soient accessibles et ne créent pas de problèmes pour les utilisateurs avec une vision des couleurs réduite ou différente. Comme toujours, l'agence Webflow Gemeos a une solution pour vous !

Tutoriel

1. Ajoutez ce morceau de Javascript

Vous pouvez ajouter ce custom code dans un embed, avant la balise <body> au niveau de votre page, ou même au niveau de votre projet (dans les paramètres) si vous souhaitez appliquer le rendu pour tous les inputs de votre site.

 <script>
// Ajoutez cet événement sur chaque input de votre formulaire
document.querySelectorAll('input').forEach(input => {
input.addEventListener('input', function() {
// Vérifie si l'input contient du texte
if (this.value.length > 0) {
// Change la couleur de la bordure si l'input n'est pas vide
this.style.borderColor = '#93CDEA'; // Vous pouvez choisir la couleur que vous voulez
} else {
// Réinitialise la couleur de la bordure si l'input est vide
this.style.borderColor = ''; // Remet la couleur de bordure par défaut
}
});
});
</script>

2. Personnalisez la couleur du border de votre input

Modifiez la couleur "#93CDEA" présente dans le code ci-dessous par le code hexadécimal de la couleur souhaitée.

3.Publiez votre page et testez le résultat

Photo de l'auteur
Sandro D.
Mis à jour le
6/7/2024
Growth Marketer, expert Webflow et touche à tout. Je m'occupe des opérations commerciale, veille au bon déroulement des projets et m’occupe des problématiques liées au marketing (SEO, Tracking, Copywriting, etc)
Accueil
>
Gemeos Académie
>
Ajouter un border color à un input lorsqu'il est renseigné dans Webflow
Illustration croce
Ces tutoriels pourraient vous intéresser

Nos tutoriels de la même catégorie

Voir tous nos tutoriels
Illustration traits
Nous utilisons les meilleurs outils

développés avec les meilleurs outils et les meilleurs pratiques

Gemeos ne vous propose pas simplement un site web, mais une expertise sur les meilleurs outils pour vous garantir un retour sur investissement optimal. 

Figma

Pour le design de votre site web

Webflow

Pour l’intégration de votre site web

Client-first

Pour organiser vos projets

Wized

Pour ajouter des fonctionnalité à vos projets

Make

Pour l’automatisation de vos flux de travail