Vous etes : 17 Tuto's en recherche de créativité. 107 494 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/

Tutotube
Author: Tutotube

Tutotube.fr ces actualités des meilleurs tutoriels vidéo Youtube. Retrouvez toute les rubriques sur le site , le savoir c'est le pouvoir !

"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

Mailchimp For WordPress [2018] Integration...
9 Visionnages
3 ans
1 Star2 Stars3 Stars4 Stars5 Stars

Voir la page
WordPress Tutorials - WPLearningLab
A WordPress Custom Post Type Allows You To Organize...
7 Visionnages
3 ans
1 Star2 Stars3 Stars4 Stars5 Stars

Voir la page
WordPress Tutorials - WPLearningLab
3 Ways To Embed A PDF On WordPress Posts And Pages
10 Visionnages
3 ans
1 Star2 Stars3 Stars4 Stars5 Stars

Voir la page
WordPress Tutorials - WPLearningLab
Contact Form 7 CSS Styling (Part 2) – Style...
35 Visionnages
2 ans
1 Star2 Stars3 Stars4 Stars5 Stars

Voir la page
WordPress Tutorials - WPLearningLab
Easy Google Fonts Plugin Makes It Easy To Add Google...
13 Visionnages
3 ans
1 Star2 Stars3 Stars4 Stars5 Stars

Voir la page
WordPress Tutorials - WPLearningLab
WordPress Image Compression Using The WP Smush.it...
16 Visionnages
4 ans
1 Star2 Stars3 Stars4 Stars5 Stars

Voir la page
WordPress Tutorials - WPLearningLab
Change WordPress Font-Size Using Theme Options or CSS...
7 Visionnages
3 ans
1 Star2 Stars3 Stars4 Stars5 Stars

Voir la page
WordPress Tutorials - WPLearningLab
Buddypress 2017 WordPress Tutorial – Build A...
3 Visionnages
3 ans
1 Star2 Stars3 Stars4 Stars5 Stars

Voir la page
WordPress Tutorials - WPLearningLab
Yoast SEO [2018] Setup & Installation,...
17 Visionnages
2 ans
1 Star2 Stars3 Stars4 Stars5 Stars

Voir la page
WordPress Tutorials - WPLearningLab
WordPress Duplicator plugin quickly moves or backups...
9 Visionnages
3 ans
1 Star2 Stars3 Stars4 Stars5 Stars

Voir la page
WordPress Tutorials - WPLearningLab
Wp-Cron.php May Be Slowing Your Site – Create A...
18 Visionnages
3 ans
1 Star2 Stars3 Stars4 Stars5 Stars

Voir la page
WordPress Tutorials - WPLearningLab
Contact Form 7 Skins To Change Style – No CSS...
4 Visionnages
4 ans
1 Star2 Stars3 Stars4 Stars5 Stars

Voir la page
WordPress Tutorials - WPLearningLab
BBPress WordPress Tutorial – Set up a Forum in...
5 Visionnages
3 ans
1 Star2 Stars3 Stars4 Stars5 Stars

Voir la page
WordPress Tutorials - WPLearningLab
Adding Contact Form 7 Hidden Fields With Dynamic Data...
14 Visionnages
3 ans
1 Star2 Stars3 Stars4 Stars5 Stars

Voir la page
WordPress Tutorials - WPLearningLab

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