Best Web Hosting

Contact Form 7 CSS Styling (Part 2) - Style Input Fields, Thank You Message, Placeholder Text - Best Webhosting

Thanks! Share it with your friends!

URL

You disliked this video. Thanks for the feedback!

Sorry, only registred users can create playlists.
ULTRAFAST, CHEAP, SCALABLE AND RELIABLE! WE STRONGLY RECOMMEND ACCU WEB HOSTING COMPANY
Contact Form 7 CSS Styling (Part 2) - Style Input Fields, Thank You Message, Placeholder Text

Watch Wordpress WPLearningLab Video: Contact Form 7 CSS Styling (Part 2) - Style Input Fields, Thank You Message, Placeholder Text.
Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL
Contact Form 7 CSS Styling (Part 2) - Style Input Fields, Thank You Message, Placeholder Text https://youtu.be/9e-JbYgYBSs

Resources mentioned in the video:

Join our private Facebook group today! https://www.facebook.com/groups/wplearninglab

CF7 CSS Part 1: https://www.youtube.com/watch?v=bKarC0QO5og&t=0s&list=PLlgSvQqMfii5Q05RFNFaZhTbPomLfZssV&index=2

Blog post with the CSS code: https://wplearninglab.com/contact-form-7-css-style-almost-anything

4 places to put CSS: https://www.youtube.com/watch?v=vLSUWT9MNlA

Chrome Dev Tools: https://www.youtube.com/watch?v=tP_kXBJWPhQ

Google Chrome add-on: https://www.youtube.com/watch?v=CegkzTkcQq0

Contact Form 7 CSS is a must because the default styles are not pretty. So if you want forms to match your website you'll need to style them.

You can find all the new CSS styles on the blog post, but I'll put them below as well:

/* Turn an input box into an input line */

.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=tel] {
border:none;
box-shadow:none;
border-radius:0;
border-bottom:1px solid #999;
}





/* Change input field styles when click into (on focus) */

.wpcf7 input[type=text]:focus, .wpcf7 input[type=email]:focus, .wpcf7 input[type=tel]:focus {
background-color:yellow;
border:none;
}
.wpcf7 input[type=text]:active, .wpcf7 input[type=email]:active, .wpcf7 input[type=tel]:active {
background-color:gold;
}





/* Change the width a drop down menu */

.wpcf7 .wpcf7-select {
width:100%; /* you can use pixels, em, rem, % to determine the width */
font-size:20px;
}






/* Make checkboxes and radio boxes align vertically instead of horizontally */

span.wpcf7-list-item {display: block;
}





/* Placeholder text styles */

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: red;
font-size:30px;
}
::-moz-placeholder { /* Firefox 19+ */
color: red;
font-size:30px;
}
:-ms-input-placeholder { /* IE 10+ */
color: red;
font-size:30px;
}
:-moz-placeholder { /* Firefox 18- */
color: red;
font-size:30px;
}





/* Thank you message styles */

.wpcf7-response-output {
border:1px solid gray;
background-color:#ececec;
font-size:30px;
color:black;
border-radius:5px;
-webkit-border-radius: 5px;
padding: 20px !important;
}

Exclusive for WPLearningLab viewers, up to 50% off hosting: https://wplearninglab.com/wordpress-hosting-offer/

Stop brute force attacks before they happen with this workshop: https://wplearninglab.com/brute-force-eliminator-workshop

Grab your free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL

Download your exclusive 10-Point WP Security Checklist: http://bit.ly/10point-wordpress-hardening-checklist

Subscribe to this awesome channel here: http://www.youtube.com/subscription_center?add_user=wplearninglab

Published:
Category: Wordpress WPLearningLab
109 Views

Related Videos

  • Popular Easily Add Contact Form 7 Placeholder Text To Any Input Field | Contact Form 7 Tutorials Part 14

    Easily Add Contact Form 7 Placeholder Text To Any Input Field | Contact Form 7 Tutorials Part 14

    by Best Webhosting Added 110 Views / 0 Likes

    Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL Easily Add Contact Form 7 Placeholder Text To Any Input Field | WP Learning Lab Contact Form 7 placeholder text makes your contact form much more user-friendly. You can use placeholder text to give the user more information or you can use it to replace field labels. By eliminating field labels you can substantially reduce the space your form takes up. So if you need to cons

  • WordPress. How To Set/Change Placeholder Text For Contact Form Fields

    WordPress. How To Set/Change Placeholder Text For Contact Form Fields

    by Best Webhosting Added 86 Views / 0 Likes

    This tutorial will show you how to change placeholder text for contact form fields in WordPress. Want to Build WordPress Site in 5 Hours? Subscribe to this course: http://www.templatemonster.com/website-5-days.php?utm_source=youtube&utm_medium=link&utm_campaign=wptuts264 Enjoy Premium WordPress templates at our website: http://www.templatemonster.com/wordpress-themes.php?utm_source=youtube&utm_medium=link&utm_campaign=wptuts264

  • Contact Form 7 CSS to Style CF7 Submit Button, Inputs, Fields and Dropdown | CF7 Tuts Part 2

    Contact Form 7 CSS to Style CF7 Submit Button, Inputs, Fields and Dropdown | CF7 Tuts Part 2

    by Best Webhosting Added 93 Views / 0 Likes

    Contact Form 7 CSS to Style CF7 Submit Button, Inputs https://youtu.be/bKarC0QO5og Check out https://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: https://www.youtube.com/watch?v=9e-JbYgYBSs&t=0s&list=PLlgSvQqMfii5Q05RFNFaZhTbPomLfZssV&index=3 Download your exclusive 10-Point WP Security Checklist: http://bit.ly/10point-wordpress-hardening-checklist Styling contact

  • Popular Adding Contact Form 7 Hidden Fields With Dynamic Data | Contact Form 7 Tutorials Part 6

    Adding Contact Form 7 Hidden Fields With Dynamic Data | Contact Form 7 Tutorials Part 6

    by Best Webhosting Added 114 Views / 0 Likes

    Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL Download our exclusive 10-Point WP Hardening Checklist: http://bit.ly/10point-wordpress-hardening-checklist Adding Contact Form 7 Hidden Fields With Dynamic Data | WP Learning Lab Adding hidden fields with dynamic contact to contact form 7 is easy when you install the contact form 7 modules plugin. If you don't install that plugin you will need to create the functionality u

  • Popular Adding Hidden Fields Using The Contact Form 7 Modules Plugin | Contact Form 7 Tutorials Part 11

    Adding Hidden Fields Using The Contact Form 7 Modules Plugin | Contact Form 7 Tutorials Part 11

    by Best Webhosting Added 111 Views / 0 Likes

    Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL Contact Form 7 - Adding Hidden Fields Using The Contact Form 7 Modules Plugin | WP Learning Lab Download your exclusive 10-Point WP Security Checklist: http://bit.ly/10point-wordpress-hardening-checklist The ability to create hidden fields is one of the major things missing from Contact Form 7. Luckily there's a nice little plugin that will add that ability to CF7 and as a

  • Popular Html5 Css3 Contact Form Design with Floating Placeholder On Focus - Move placeholder text on focus

    Html5 Css3 Contact Form Design with Floating Placeholder On Focus - Move placeholder text on focus

    by Best Webhosting Added 101 Views / 0 Likes

    Please LIKE our NEW Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/

  • Popular Easily Add All Fields To The Contact Form 7 Email | Contact Form 7 Tutorials Part 3

    Easily Add All Fields To The Contact Form 7 Email | Contact Form 7 Tutorials Part 3

    by Best Webhosting Added 103 Views / 0 Likes

    Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL Easily Add All Fields To The Contact Form 7 Email | WP Learning Lab At first, few people realize that once you've created your Contact Form 7 form, you also need to create the email that goes along with it. They usually figure it out when the email the form sends doesn't include the custom fields they added. If you add more fields to your form, you also need to add them to

  • Popular Contact Form 7 Skins To Change Style - No CSS required | Contact Form 7 Tutorials Part 13

    Contact Form 7 Skins To Change Style - No CSS required | Contact Form 7 Tutorials Part 13

    by Best Webhosting Added 107 Views / 0 Likes

    Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL Download our exclusive 10-Point WP Hardening Checklist: http://bit.ly/10point-wordpress-hardening-checklist Contact Form 7 Skins To Change Style - No CSS required | WP Learning Lab Exclusive for WPLearningLab viewers, up to 50% off hosting: https://wplearninglab.com/wordpress-hosting-offer/ Changing the appearance of your contact form 7 forms is easy with this Contact Form

  • HOW TO ADD PLACEHOLDER TEXT IN CONTACT FORM 7 WORDPRESS PLUGIN? Beginners Tutorial

    HOW TO ADD PLACEHOLDER TEXT IN CONTACT FORM 7 WORDPRESS PLUGIN? Beginners Tutorial

    by Best Webhosting Added 26 Views / 0 Likes

    In today's video tutorial you'll learn how to add and setup a placeholder text into your contact form 7 fields in a simple, fast and effective method. How To Create A WordPress Contact / Map Page https://visualmodo.com/knowledgebase/wordpress-contact-page/ How To Embed Contact Form in Slider Revolution WordPress Plugin? https://www.youtube.com/watch?v=HfVRYDZF4xc How To Change the Button Text In Contact Form 7 WordPress Plugin? https://www.youtube.com

  • CSS Button Style For Submit Button CSS In Contact Form 7 | Contact Form 7 Tutorials Part 17

    CSS Button Style For Submit Button CSS In Contact Form 7 | Contact Form 7 Tutorials Part 17

    by Best Webhosting Added 88 Views / 0 Likes

    Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL CSS Button Style For Submit Button CSS In Contact Form 7 https://youtu.be/MXWqEhtOvFA Download your exclusive 10-Point WP Security Checklist: http://bit.ly/10point-wordpress-hardening-checklist CSS button styles will help your buttons and forms look much more enticing. A good looking submit button will attract more of your visitors attention. Subscribe to this awesome chann

  • How To Change The Placeholder Text Color Of An Input

    How To Change The Placeholder Text Color Of An Input

    by Best Webhosting Added 97 Views / 0 Likes

    This tutorial shows how to change the placeholder text color of an input of any form. Enjoy More Templates at Our Website: http://www.templatemonster.com/best-sellers/?utm_source=youtube&utm_medium=link&utm_campaign=gentuts8

  • CSS Input Label Animation | Floating Placeholder Text @Online Tutorials

    CSS Input Label Animation | Floating Placeholder Text @Online Tutorials

    by Best Webhosting Added 14 Views / 0 Likes

    Click For More : https://www.youtube.com/c/OnlineTutorials4Designers/videos?sub_confirmation=1 ------------------ Enroll My Course : Next Level CSS Animation and Hover Effects https://www.udemy.com/course/css-hover-animation-effects-from-beginners-to-expert/?referralCode=90A9FFA7990A4491CF8D CSS Infinity Course : https://www.udemy.com/course/infinity-creative-css-animation-course/?referralCode=7AC20462B284B24ECCFF Another Course : Build Complete Real

RECOMMENDED WEB HOSTING

FASTCOMET

Fastcomet

HOSTGATOR

HOSTGATOR

BLUEHOST

BLUEHOST

SITEGROUND

SITEGROUND

A2 HOSTING

A2 HOSTING

HOSTINGER

HOSTINGER

DREAMHOST

DREAMHOST

ACCU WEBHOSTING

ACCU WEBHOSTING

MILESWEB

MILESWEB

HOSTPAPA

HOSTPAPA
RSS