A Micro-interaction That Really Helps
It is a great idea to highlight the field when a visitor is filling out a contact form. This gives the field a special focus, which is a small but very helpful micro-interaction. The default Divi Contact Form has a setting for the focus background color, but there is no option for this. Most modern forms use a focus border instead of just the background color, so in this tutorial, I will show you how to add focus input field borders to the Divi Contact Form module.
▶️ Please watch the video above to get all the exciting details! 👆
FYI: You can do this with a setting directly in the Divi Contact Form module with our popular Divi Contact Form Helper plugin! Take a look, it is so easy!
1. Add A Custom CSS Class To The Divi Contact Form
The first step in the tutorial is to add a custom CSS class to the Contact Form module. This is used to target the correct module with the code in order to only make this affect only a specific module.
To add the custom class, open the module settings and go to the Advanced tab. Go to the CSS IDs & Classes toggle. Place the class “pa-contact-form-focus-borders” in the CSS Class input field of the Contact Form module.
2. Add The Custom CSS Code Snippet
The second step is to add the custom CSS code to your website. This step is also very easy, and we are doing the work with only a few lines of CSS.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
/*add focus input field borders to the Divi Contact Form module*/
.pa-contact-form-focus-borders input:focus,
.pa-contact-form-focus-borders textarea:focus {
border: 2px solid #00d263;
}After adding and saving the code, your form fields would look like this when you click to type:
The code is very simple. It targets the custom class added to the module and uses the :focus pseudo class. The focus state is triggered when a user clicks within the field element. When that happens, the CSS for the border is applied.
You can customize the thickness and color according to your own preference.
Do It With A Setting!
Make life easier and use the Divi Contact Form Helper plugin instead, the ultimate Divi Contact Form upgrade with awesome features and settings!
The Divi Contact Form Helper plugin has design settings to quickly add the focus input borders. Using the plugin can save you loads of time and add lots of additional functionality. Be sure to check out all the other amazing features!
Excellent thank you again. Nice and easy as always. A nice little touch, put it straight on and using it.
That’s awesome!