CORNERSTONE Contact Form

Hello I put this code and it doesn’t see good:
.wpcf7-form {
color: #fff;
}
.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar {
background-color: transparent !important;
border-bottom: 1px solid #fff!important;
border-top: 0px!important;
border-left: 0px!important;
border-right: 0px!important;
width: 100% !important;
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
font-size: 18px;
color: #fff !important;
padding: 16px !important;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 40px!important;
font-family: ‘Droid Sans’, Helvetica, Arial, Lucida, sans-serif;
}
.wpcf7-submit {
color: #fff !important;
margin: 8px auto 0;
cursor: pointer;
font-size: 18px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
padding: 8px 20px;
line-height: 1.7em;
background: #288c93;
border: 1px solid #AAE1D4;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
font-family: ‘Droid Sans’, Helvetica, Arial, Lucida, sans-serif; !important;

}
.wpcf7-submit:hover {
background-color: #288c93;
border-color:#57e6e6;
padding: 8px 20px !important;
color: #fff!important;
}
.wpcf7-form-control.wpcf7-submit {
border-radius: 10px;
}
div.wpcf7 {
font-family: ‘Droid Sans’, Helvetica, Arial, Lucida, sans-serif;
text-align: center;}
.wpcf7-textarea {
font-family: ‘Droid Sans’, Helvetica, Arial, Lucida, sans-serif;
width: 100%;
box-sizing: border-box;
color: inherit;
padding: 24px;
position: relative;
line-height: 1.5em;
font-size: 18px;
margin-bottom: 40px;
color: #eee;
}
.one-half,
.one-third {
position: relative;
margin-right: 4%;
float: left;
margin-bottom: 20px;

}
.one-half { width: 48%; }
.one-third { width: 30.66%; }
.last {
margin-right: 0 !important;
clear: right;
}

The web is https://actividades.laforetlanguages.com/
Thank you.
Regards

Hello @FERLAF,

Thanks for writing in!

Your form is not aligned properly because you have added this custom css:

.select, textarea, input[type="text"]{
    font-size: 20px;
}

Please have this updated and use this instead:

.select, textarea, input[type="text"],
input[type="email"], input[type="tel"] {
    font-size: 20px;
}

The provided CSS code were given above and will be a good starting point for your customizations and if you are interested you can learn more about CSS selectors and details here.

Rest Regards.

Thank you. I added this code but it is not working. Thanks
.wpcf7-form {
color: #fff;
}
.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar {
background-color: transparent !important;
border-bottom: 1px solid #fff!important;
border-top: 0px!important;
border-left: 0px!important;
border-right: 0px!important;
width: 100% !important;
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
font-size: 18px;
color: #fff !important;
padding: 16px !important;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 40px!important;
font-family: ‘Droid Sans’, Helvetica, Arial, Lucida, sans-serif;
}
.wpcf7-submit {
color: #fff !important;
margin: 8px auto 0;
cursor: pointer;
font-size: 18px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
padding: 8px 20px;
line-height: 1.7em;
background: #288c93;
border: 1px solid #AAE1D4;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
font-family: ‘Droid Sans’, Helvetica, Arial, Lucida, sans-serif; !important;

}
.select, textarea, input[type=“text”],
input[type=“email”], input[type=“tel”] {
font-size: 20px;
}
.wpcf7-submit:hover {
background-color: #288c93;
border-color:#57e6e6;
padding: 8px 20px !important;
color: #fff!important;
}
.wpcf7-form-control.wpcf7-submit {
border-radius: 10px;
}
div.wpcf7 {
font-family: ‘Droid Sans’, Helvetica, Arial, Lucida, sans-serif;
text-align: center;}
.wpcf7-textarea {
font-family: ‘Droid Sans’, Helvetica, Arial, Lucida, sans-serif;
width: 100%;
box-sizing: border-box;
color: inherit;
padding: 24px;
position: relative;
line-height: 1.5em;
font-size: 18px;
margin-bottom: 40px;
color: #eee;
}
.one-half,
.one-third {
position: relative;
margin-right: 4%;
float: left;
margin-bottom: 20px;

}
.one-half { width: 48%; }
.one-third { width: 30.66%; }
.last {
margin-right: 0 !important;
clear: right;
}

Hello @FERLAF,

I have inspected your page and I could not find the suggested code.

Please double check all of your custom code and make sure that it is valid and correct. You may use https://www.cleancss.com/css-beautify/ to check your css codes.

If nothing is helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

To know how to create a secure note, please check this out: https://theme.co/docs/getting-support

Best Regards.

Thank you for your message

Hi @FERLAF,

Thank you for the login, on the custom CSS you show above, you have errors on these lines:

font-family: ‘Droid Sans’, Helvetica, Arial, Lucida, sans-serif; !important;

Notice your single quote ‘Droid Sans’, it different from the normal one 'Droid Sans'

Another issue with that line is the sans-serif; !important;

Please remove that semicolon ; next to the sans-serif and just leave the semicolon next to the !important

You can always check your custom CSS here.

Remember to clear all your caching features (plugin, server-side, CDN, and browser’s cache) after changes/updates.

Hope it helps,
Cheers!

Thank you.

You are most welcome!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.