How To Add A Scrollbar To The Divi Contact Form

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;
}