Vous etes : 15 Tuto's en recherche de créativité. 108 197 Tutoriels

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

Durée de la vidéo :18:58

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

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.

https://wplearninglab.com/

Connect with us:

WP Learning Lab Channel: http://www.youtube.com/subscription_center?add_user=wplearninglab

Facebook: https://www.facebook.com/wplearninglab

Twitter: https://twitter.com/WPLearningLab

Google Plus: http://google.com/+Wplearninglab

Pinterest: http://www.pinterest.com/wplearninglab/

"Contact Form 7 CSS Styling (Part 2) – Style Input Fields, Thank You Message, Placeholder Text vous a satisfait ?"

Donner votre avis

1 Star2 Stars3 Stars4 Stars5 Stars

Tutoriel aléatoire disponible sur tutotube.fr


* Rafraichir la page pour avoir une autre liste de tutoriel a decouvrir. Rafraichir

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.