Customize the Lead Form Using CSS

The following CSS code can be added to a website and altered to match the Scout Leads Form to your company branding.

James Dixon avatar
Written by James Dixon
Updated over a week ago

To customize the Leads Form, paste the following code into your website's style sheet (.css file). Alter the CSS elements to create a custom experience on your website.

Note: Please consult your website's designer before making any changes to your website. We have added comments "/* */" to help guide you.

/*Input Fields (Except: State)*/
.container-wrap input[type="text"], .container-wrap input[type="phone"], .container-wrap input[type="tel"], .container-wrap input[type="email"], .container-wrap textarea, .container-wrap select {
/*Border Color*/
border: 3px solid #616C7B !important;
/*Input Area*/
height: 50px;
/*Input Area Background Color*/
background-color: white !important;
}


/*Button Settings*/
body[data-form-submit="regular"] .container-wrap input[type="submit"] {
/*Submit Button Size*/
padding: 6px 20px !important;
/*Submit Button Font*/
font-family: 'Love Ya Like A Sister', cursive !important;
font-size: 1.4rem !important;
/*Button Color (Not Always Needed)*/
/*background-color: black !important;*/
}


/*State*/
#jpjd-formwidget--app select {
/*Input Area*/
height: 50px !important;
/*Input Area Background Color for State*/
background-color: white !important;
}

/*Message Input Area*/
#message{
height: 140px !important;
}

.wpcf7-form-control.wpcf7-textarea {
height: 140px !important;
}

Did this answer your question?