Add a border color to an input when it is filled in Webflow

Tools:

Introduction

Webflow does not allow you to modify the “not empty/filled in” state of an input natively.

You can only change the states:

  • Hover
  • Pressed
  • Focused

Assigning a specific color to an input can have several advantages in terms of interface design and user experience:

  1. Visibility : A specific color can help distinguish an input field from other elements, making the form more intuitive and easy to navigate.
  2. Feedback : Color can be used for immediate feedback. For example, a color change can indicate whether the information entered is valid or not (green for correct, red for an error).
  3. Aesthetics : A well-chosen color palette can contribute to the visual harmony of the interface and to a pleasant user experience.

It is important to ensure that color choices are accessible and do not create problems for users with reduced or different color vision. As always, the Webflow agency Gemeos has a solution for you!

Tutorial

1. Add this piece of Javascript

You can add this custom code in an embed, before the tag <body>on your page, or even at the level of your project (in the settings) if you want to apply the rendering for all the inputs on your 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. Customize the color of the border of your input

Change the color”#93CDEA“present in the code below by the hexadecimal code of the desired color.

3.Publish your page and test the result

Author photo
Sandro D.
Updated on
6/7/2024
Growth Marketer, Webflow expert and a jack of all trades. I take care of commercial operations, ensure the smooth running of projects and take care of issues related to marketing (SEO, Tracking, Copywriting, etc.)
Are you stuck with your current site?
Let's talk ?
Welcome
>
Gemeos Academy
>
Add a border color to an input when it is filled in Webflow
These tutorials might interest you

Our tutorials in the same category

See all our tutorials
Illustration traits
We use the best tools

Your site is developed using the best tools and best practices

Gemeos doesn't just offer you a website, but expertise in the best tools to guarantee you the best possible return on your investment.

Figma

To design your custom website and optimize its conversion rate

Webflow

For pixel-perfect, optimized integration of your website

Client-first

Organizing your project to perfection

Wized

To add advanced features to your project

Make

Automate your workflows and save maximum time