Skip to main content

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.

Written by Paula Andrea Ivanoff

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?