Captcha Styling for WP Forms

[jonathanrockett]

Hey Guys,

Doing some styling on a WP Forms element… I’ve found success for what I needed (full width submit button, color, hover, etc… I’d like to make the captcha full width as well - not sure how to call it out in the CSS. The page I’m working on is here:

http://clowndocumentary.com

The CSS I’ve used for the other elements is below.

Thanks so much!

div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-text input {
background-color: #fff;
box-sizing: border-box;
border-radius: 0px;
color: #333;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
display: block;
float: none;
font-size: 16px;
border: 0px solid #ccc;
padding: 6px 10px;
height: 38px;
width: 100%;
line-height: 1.3;
}

div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-name input {
background-color: #fff;
box-sizing: border-box;
border-radius: 0px;
color: #333;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
display: block;
float: none;
font-size: 16px;
border: 0px solid #ccc;
padding: 6px 10px;
height: 38px;
width: 100%;
line-height: 1.3;
}

div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-email input {
background-color: #fff;
box-sizing: border-box;
border-radius: 0px;
color: #333;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
display: block;
float: none;
font-size: 16px;
border: 0px solid #ccc;
padding: 6px 10px;
height: 38px;
width: 100%;
line-height: 1.3;
}

div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-textarea textarea {
background-color: #fff;
box-sizing: border-box;
border-radius: 0px;
color: #333;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
display: block;
float: none;
font-size: 16px;
border: 0px solid #ccc;
padding: 6px 10px;
height: 120px;
width: 100%;
line-height: 1.3;
}

div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-checkbox ul li .wpforms-field-label-inline {
display: inline;
vertical-align: baseline;
font-size: 16px;
font-weight: 400;
line-height: 1.3;
}

div.wpforms-container-full .wpforms-form button[type=submit] {
width: 100%; /* Make the button full-width /
background-color: #ff004f !important;
color: #fff !important;
font-size: 1em !important; / Size of text /
padding: 10px 15px !important; / Distance between text and border */
}

div.wpforms-container-full .wpforms-form input[type=submit]:hover,
div.wpforms-container-full .wpforms-form input[type=submit]:active,
div.wpforms-container-full .wpforms-form button[type=submit]:hover,
div.wpforms-container-full .wpforms-form button[type=submit]:active,
div.wpforms-container-full .wpforms-form .wpforms-page-button:hover,
div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
background-color: #be003a !important;
}

[christian]

Hi @jonathanrockett ,

I’m sorry but we cannot provide custom coding help especially with 3rd party plugins. That is outside the scope of our theme support. Please forward your request to a 3rd party developer to complete the styling for WP Forms.

Thank you for understanding.