Styling a Smaller Contact Form 7
A clean design for Contact Form 7
CSS code to close up space and create a smaller Contact Form 7.
This keeps mobile friendly input areas – and there’s code to style the buttons.
(Be sure to donate to the author.)
.wpcf7 p {
line-height: 15px;
font-size: 12px;
padding-top: 2px;
paddig-bottom:2px;
}
.your-message textarea {
height: 200px;
width: 450px;
}
.wpcf7 input, .wpcf7 textarea{
min-height: 2em;
width: 60%;
padding:5x;
color:#000000;
font-family:Arial, Helvetica, sans-serif;
font-size:1.25em;
line-height: 1.5em;
padding-top: 2px;
paddig-bottom:2px;
margin-top: 2px;
margin-bottom: 2px;
}
.wpcf7 input.wpcf7-submit{
color: #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-size: 14px;
padding-top: 11px;
padding-bottom: 10px;
padding-left: 35px;
padding-right: 35px;
}
/* On hover */.wpcf7 input.wpcf7-submit:hover{
background-color:#004481;
cursor: pointer;
text-decoration: none;
}