Contact Form 7 CSS Markup
Contact Form 7 CSS Markup
Snippet options
Download: Download snippet as contact-form-7-css-markup.less.
Copy snippet: For this you need a free my code stock.com account.
Embed code : You will find the embed code for this snippet at the end of the page, if you want to embed it into a website or a blog!
.wpcf7 {
margin-top: 30px;
form.wpcf7-form {
width: 260px;
margin: 0 auto;
p {
span.required {
color: red;
}
}
/* Bootstrap Plugin CF7*/
.form-group {
label {
.block;
span.required {
color: red;
}
}
input[type="text"] {
width: 100%;
font-size: 16px;
border: 1px solid white;
padding: 5px 0 5px 15px;
margin-bottom: 15px;
color: #666;
.square;
.noShadow;
.allTrans;
}
input[type="text"]:focus {
border-color: blue;
}
input[type="email"] {
width: 100%;
font-size: 16px;
border: 1px solid white;
padding: 5px 0 5px 15px;
margin-bottom: 15px;
color: blue;
.square;
.noShadow;
.allTrans;
}
input[type="email"]:focus {
border-color: blue;
}
textarea {
width: 100%;
max-width: 263px;
height: 120px;
font-size: 16px;
border: 1px solid white;
padding: 5px 0 5px 15px;
color: blue;
.square;
}
textarea:focus {
border-color: basecolor;
}
input[type="submit"] {
width: 100%;
.block;
padding: 10px 15px;
background: blue;
color: white;
.noBorder;
.square;
.allTrans;
}
input[type="submit"]:hover {
background: red;
}
}
}
}
Create a free my code stock.com account now.
my code stok.com is a free service, which allows you to save and manage code snippes of any kind and programming language. We provide many advantages for your daily work with code-snippets, also for your teamwork. Give it a try!
Find out more and register nowYou can customize the height of iFrame-Codes as needed! You can find more infos in our API Reference for iframe Embeds.