Code by Day | Explore By Weekend

Last updated Dec 9, 2020 @ 3:12 pm
Contributors: Nelson Miller

Divi Contact Form Message Box Height

The height of the Divi Contact Form Module message box is pretty small by default, so I wanted to share with you a way to increase that. I first tried to add a min-height to the module’s advanced tab settings, but of course, that doesn’t work because we need to use the infamously Divi !important tag.

/*increase the contact form message box height*/
.et_pb_contact_message {
    min-height: 300px!important;
}

Now any contact form that you have on your site will have a taller message field for users to type their message. This is actually pretty important for conversions and giving the visitor the feeling that more 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:

/*increase the contact form message box height*/
.pa-contact-form-height .et_pb_contact_message {
    min-height: 300px!important;
}

Pin It on Pinterest

0

Your Cart