Contact Form 7 CSS to Style CF7 Submit Button, Inputs • Contact Form 7 CSS to ...
Check out happyforms.me/, it's a cool new form builder that you may like better than CF7 (and it's free!): HappyForms.me
CF7 CSS styles part 2: • Contact Form 7 CSS Sty...
Download your exclusive 10-Point WP Security Checklist: bit.ly/10point-wordpress-harde...
Styling contact form 7 forms isn't that had once you know the right contact form 7 css.
In this tutorial I show you how to style the contact form submit button, various input fields, text area fields, URL fields, telephone fields, number fields and dropdown selection fields.
I have created a blog post will sample CSS and sample CSS selectors that you can copy and paste. Here's the link:
wplearninglab.com/contact-for...
I'll also paste the styles below:
/* Submit Button CSS Styles */
.wpcf7 input[type=submit] {
padding:15px 45px;
background:#FF0000;
color:#fff;
font-size:30px;
font-weight:bold;
border:0 none;
cursor:pointer;
-webkit-border-radius: 5px;
border-radius: 5px;
}
/* Label Text Styles */
.wpcf7 label {
padding: 0 0 10px 0;
font-size: 20px;
}
/* Text Input Field Styles */
.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=url], .wpcf7 input[type=tel], .wpcf7 input[type=number], .wpcf7 .wpcf7-select{
font-size:30px;
border: 1px solid red;
}
/* Textarea Field Styles */
.wpcf7 textarea {
width: 100%;
color: red;
font-size: 20px;
border-color:red;
}
/* Overall form styles */
.wpcf7 {
background-color:gray;
}
Remember that these styles need to go into your CSS stylesheet or if you are putting them right into the header of your site they need to be between style tags.
If you are lucky enough to have a theme that allows custom CSS, you can copy and paste them into there.
If you're not sure where to find a place where you can enter CSS, this tutorial may help you: • 4 Places To Edit WordP...
CSS is a very forgiving language, so if you make a change that makes something look really bad just undo your change, save and everything is back to normal.
I hope this information helps you! If you have any questions leave a comment below or ping me @WPLearningLab on Twitter.
--------------
If you want more excellent WordPress information check out our website where we post WordPress tutorials daily.
wplearninglab.com/
Connect with us:
WP Learning Lab Channel: kzitem.info_c...
Facebook: / wplearninglab
Twitter: / wplearninglab
Google Plus: google.com/+Wplearninglab
Pinterest: / wplearninglab
Негізгі бет Contact Form 7 CSS to Style CF7 Submit Button, Inputs, Fields and Dropdown | CF7 Tuts Part 2
Пікірлер: 217