contact form 7
Below instruction, How to Customise Existing Contact Form 7
Step 1: Go to your website or blog and log in it.
Step 2: On the dashboard you need to find out the Appearance and click on Editor, then you will be reached to the Stylesheet (style.css).
Step 3: Now copy this below CSS Code and Paste anywhere in the stylesheet area, then press Update File button.
/*——[Start Contact Form CSS Code]—————————————*/
/* =Forms -------------------------------------------------------- */
label {display: inline-block;font-weight: 700;padding: 2px 0;}
legend {padding: 2px 5px;}
fieldset {border: 1px solid #ccc;margin: 0 0 1.5em;padding: 1em 2em;}
select,
input[type="text"],
input[type="password"] {
-moz-box-sizing: border-box;
-moz-border-radius: 2px;
-webkit-box-sizing: border-box;
-webkit-border-radius: 2px;
-webkit-box-shadow: 0 1px 0 #fff, inset 0 1px 1px rgba(0,0,0,0.05);
-moz-box-shadow: 0 1px 0 #fff, inset 0 1px 1px rgba(0,0,0,0.05);
box-shadow: 0 1px 0 #fff, inset 0 1px 1px rgba(0,0,0,0.05);
background: #f4f4f4;
box-sizing: border-box;
border: 1px solid #ccc;
border-bottom-color: #ccc;
border-radius: 2px;
margin: 0;
outline: none;
padding: 6px 8px;
vertical-align: middle;
width: 100%;
}
input[type="email"],
area, email {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-border-radius: 4px;
-webkit-box-shadow: 0 1px 0 #fff, inset 0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: 0 1px 0 #fff, inset 0 1px 2px rgba(0,0,0,0.05);
box-shadow: 0 1px 0 #fff, inset 0 1px 2px rgba(0,0,0,0.05);
background: #f4f4f4;
box-sizing: border-box;
background: #f4f4f4;
border: 1px solid #E1E1E1;
border-bottom-color: #E1E1E1;
border-radius: 4px;
height: auto;
overflow: auto;
margin: 0;
outline: none;
padding: 8px 10px;
width: 100%;
}
select {height: auto; width: 70%;}
area, textarea {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-border-radius: 4px;
-webkit-box-shadow: 0 1px 0 #fff, inset 0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: 0 1px 0 #fff, inset 0 1px 2px rgba(0,0,0,0.05);
box-shadow: 0 1px 0 #fff, inset 0 1px 2px rgba(0,0,0,0.05);
background: #f4f4f4;
box-sizing: border-box;
background: #f4f4f4;
border: 1px solid #E1E1E1;
border-bottom-color: #E1E1E1;
border-radius: 4px;
height: auto;
overflow: auto;
margin: 0;
outline: none;
padding: 8px 10px;
width: 100%;
}
input, select {cursor: pointer;}
area:focus,
input:focus,
textarea:focus {background: #fff;}
input[type='text'],
input[type='password'] {cursor: text;}
/* =IE Forms ---------------------------------------------------- */
.ie7 area,
.ie7 select,
.ie7 textarea,
.ie7 input[type="text"],
.ie7 input[type="password"] {width: 96%;}
/* =Buttons ----------------------------------------------------- */
button,
a.button,
input[type='reset'],
input[type='button'],
input[type='submit'] {
-moz-border-radius: 2px;
-moz-box-shadow: 0pt -1px 0pt rgba(0, 0, 0, 0.075) inset, 0pt 1px 0pt rgba(255, 255, 255, 0.3) inset, 0pt 1px 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0pt -1px 0pt rgba(0, 0, 0, 0.075) inset, 0pt 1px 0pt rgba(255, 255, 255, 0.3) inset, 0pt 1px 2px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 2px;
background-color: #E5E5E5; /* Snow 3 */
background-image: -webkit-gradient(linear, left top, left bottom, from(#F6F5F5), to(#E5E5E5));
background-image: -webkit-linear-gradient(top, #F6F5F5, #E5E5E5);
background-image: -moz-linear-gradient(top, #f6f5f5, #E5E5E5);
background-image: -ms-linear-gradient(top, #f6f5f5, #E5E5E5);
background-image: -o-linear-gradient(top, #f6f5f5, #E5E5E5);
background-image: linear-gradient(top, #f6f5f5, #E5E5E5);
box-shadow: 0pt -1px 0pt rgba(0, 0, 0, 0.075) inset, 0pt 1px 0pt rgba(255, 255, 255, 0.3) inset, 0pt 1px 2px rgba(0, 0, 0, 0.1);
border: 1px solid #ccc;
border-radius: 2px;
color: #707070;
cursor: pointer;
display: inline-block;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f6f5f5, endColorstr=#E5E5E5);
font-size: 12px;
font-weight: 700;
margin: 0;
padding: 6px 10px;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
vertical-align: middle;
white-space: nowrap;
}
button:hover,
a.button:hover,
input[type='reset']:hover,
input[type='button']:hover,
input[type='submit']:hover {
background-color: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cdc9c9));
background-image: -webkit-linear-gradient(top, #fff, #cdc9c9);
background-image: -moz-linear-gradient(top, #fff, #cdc9c9);
background-image: -ms-linear-gradient(top, #fff, #cdc9c9);
background-image: -o-linear-gradient(top, #fff, #cdc9c9);
background-image: linear-gradient(top, #fff, #cdc9c9);
border: 1px solid #ccc;
color: #707070;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#cdc9c9);
}
/*——[End Contact Form CSS Code]—————————————*/
Now you have done this work and you can enjoy it. Read also How to add Contact Form on Wordpress?
