Code by Day | Explore By Weekend

Divi Code Snippet Club by Pee-Aye Creative

How To Add A Scrollbar To The Divi Contact Form

This code snippet from the Divi Code Snippet Club will allow you to add a scrollbar to the Divi Contact Form Module's message box.

The height of the Divi Contact Form Module message box is pretty small by default, but we changed that in another tutorial here in the Divi Code Snippet Club. I wanted to share with you another really cool way to increase the user experience of the contact form when messages get long. I’m going to show you how to add a scrollbar to the Divi Contact Form.

Head on over to the Divi>Theme Options and copy and paste the following snippet into the Custom CSS box at the bottom.

/*add scrollbar to long contact form messages*/
.et_pb_contact_message.input {
    overflow-y: auto!important;
}

Now any contact form will automatically get a scrollbar when the text gets longer than the height of the message field. This is helpful for conversion rate and tells the visitor that their information is a good thing.

Of course, if you only want to affect one contact form on your website you can add your own class to the module and at the beginning of your code like this:

/*add scrollbar to long contact form messages*/
.pa-message-scrollbar .et_pb_contact_message.input {
    overflow-y: auto!important;
}
0
Last updated Jul 10, 2020 @ 7:54 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 4,700 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart