Recently, I've been working on a website that requires spam protection for the contact form. To combat this issue, I decided to integrate reCAPTCHA into the form.
However, after completing the form and applying the necessary CSS styles, I noticed that the captcha was not displaying properly due to some style conflicts.
Below is a screenshot illustrating the problem:
CSS
#formContainer {
margin-left:auto;
margin-right:auto;
width: 500px;
height: auto;
border-radius: 3px;
border: 1px solid #ccc;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
form {
margin: 0 auto;
margin-top: 20px;
}
label {
color: #555;
display: inline-block;
margin-left: 18px !important;
padding-top: 10px;
font-size: 14px;
}
input, textarea{
outline:none;
}
input[type=text]{
color: #777;
padding-left: 10px;
margin: 10px;
margin-top: 12px;
margin-left: 18px;
width: 290px;
height: 35px;
}
input[type=text]#email{
margin-left:52px;
}
#formComments{
margin-left:18px;
height: 115px;
width:293px;
}
input[type=submit] {
float: right;
margin-right: 20px;
margin-top: 20px;
width: 80px;
height: 30px;
font-size: 14px;
font-weight: bold;
color: #fff;
background-color: #609941; /*IE fallback*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#609941), to(#609941));
background-image: -moz-linear-gradient(top left 90deg, #609941 0%,#609941 100%);
background-image: linear-gradient(top left 90deg, #609941 0%, #609941 100%);
border-radius: 30px;
border: 1px solid #66add6;
box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
cursor: pointer;
}
HTML
<div id="formContainer">
<iframe src="http://inspirafs.com/totalira/contactext.asp" frameborder="0" height="650" width="100%" scrolling="no">Sorry your browser does not support IFRAMES.</iframe>
</div>