January 10, 2016

CSS Code To Customise Existing Contact Form 7

CSS Code To Customise the Existing Contact Form 7contact form 7
that currently you have been using plugin form for your website. The CSS code is support for the text, email, and message form and also support for the Summit button. If you create your own contact form; you may need to ask for the other CSS codes that will depend on what you created.

Wordpress Appearance and Theme Editor

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). 

Wordpress Appearance and Theme Editor

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?

Was this article helpful?

Thanks! Your feedback helps us to improve blogsupporter.com
Keo Sopherth Professional Blogger

Offer a blogger blog, WordPress website development tutorials, and simple search engine optimisation tip with love.

- Advertisement -
Advertise Here (330 x 280)
- Advertisement -
Advertise Here (330 x 280)

0 comments:

Your comment will be removed if it is a Spam or a comment with a link.