Improving user experience on your website often involves paying attention to the smallest details. One such detail is the styling of contact form input fields, especially their focus state.
Enhancing the focus state with distinct border styling can significantly improve usability by making it clear where the user's attention should be.
Open the Contact Form module's settings by clicking on the Gear icon
Go to the Advanced Tab → Custom CSS → Free Form CSS
Paste in this CSS code
selector input:focus,
selector textarea:focus {
border: 1px solid lightgreen;
}
The values can be fully customized for your own needs.
1px is the thickness of the border. It can be 2px, 3px, etc.
lightgreen is the color of the border. Choose your own color codes from here.
The result can be seen in the screenshot below:
