If you enjoyed this video don't forget to the like it and subscribe! Then check out this playlist about doing nearly everything with Contact Form 7: kzread.info/dash/bejne/qa1rkrmAc82ziZc.html

@fabnricioorellana

5 жыл бұрын

Very good explanation, already subscribed, how do you style different forms on a website?

Very useful tutorial, not only from how you helped but also from seeing how the selectors work and how you are getting around the problems when getting conflicts. Thanks!

@wplearninglab

6 жыл бұрын

You're welcome Greg and thanks for the feedback. I think leaving in the parts where I run into problems are good for learning. Even the pros run into problems :)

Thank you! This has been an absolute goldmine to me as I have always wondered how to style a CF7 contact form. Can't wait for part three. i have used most of this on a contact form that I was developing but fell at the last fence when styling the boxes for when a messaged is sent or there is an error. I am pretty sure there is a conflict somewhere, I just have to find it, but you tutorials have been of immense help.

THANK YOU! This helped a lot!

tks you. I did it at /* Thank you message styles */ Thanks your video

thanx for another Great Tutorial!

@wplearninglab

5 жыл бұрын

You're welcome, thanks for watching!

THANK YOU!

Thanks, helped me very much. But how can I address the elements in my dropdown-menu in css? .wpcf7-select li {...} didn't worked for me

What if I have 2 forms in the same page and want different color for the "labels" on those forms?

Good stuff bro. Do you or are you going to at some point, have a create a plugin tutorial?

Hi, how do I create a floating placeholder? The placeholder will float to the top after user enter value into the input field. Thanks

How do I change the font color of the text within the boxes? The current text is white but so is my background so my text blends in. I have already tried changing the font in WordPress but it changes all of the fonts including the description fonts.

Hi how to integrate a website card and payment gateway please help me its very nessecary customised amount for products and all

Thanks for the video. I am learning wordpress , at present I am working on contact form 7 . I am faceing issue when I click submit button after entering answer to quiz question (1 + 4 = ?) 5. It says wrong answer for quiz. But before entering the quiz answer when I click backspace key few times and then type the answer then I don't have any issue. Can you plz help me understand the issue ? My second question is regarding the auto response message for every email that is received on website. I added an image before the Message and it is working perfectly fine. I want to create a good design for auto response email where in I can design the template my self and it gives good visual experience to read the message ? I am using contact form 7 in wordpress . Any help from you will be appreciated. Thank-you Very much 🙏

How to design the file upload "Choose File" Button?

I am using a plugin to search for vehicle registration search but I don't have a clue on how to integrate it with the contact form 7. Can you give me some ideas on how to integrate the search result into the form so that, I can receive the result on my email. I will appreciate if u can. Thanks

non of this work on my them please check your code again for the latest update, if i fix this i will tell you though

Extremely Awesome VIdeo Please tell me how we do the same with ninja forms

nice tutorial. How to make the size of the box of CF7 smaller but still located at the centre of the page. I can make it smaller but it is located in the left.

@wplearninglab

5 жыл бұрын

Hi Dwi, To center an element in it's container you can use margin: 0 auto; This may do it for example, .wpcf7 {margin: 0 auto;} I hope that helps and thanks for watching! P.S. If you haven't yet, check out the WPLearningLab Facebook Group: facebook.com/groups/wplearninglab See you there!

Hi thanks for the tutorial, for some reason the turn an input box into input line isnt working for me. It isnt making any changes

@wplearninglab

6 жыл бұрын

Hi Adam, It could be a caching issue. Do you have a caching plugin installed? Have you tried a "hard refresh" (ctrl +shft + r)? Or have you tried loading the form incognito or in an different browser?

Thanks for your time to make this video. Very easy to follow and to undestand. I have one question! How would you change the background color for RED for required fields after user submit the form?

@wplearninglab

6 жыл бұрын

Hi Robert, Good question! I think you mean if someone submits the form and they don't fill out a required field. Then change the background of that field to red. If so, you can use the .wpcf7-validates-as-required class which every required input field has. Something like this should do it: .wpcf7-validates-as-required {background-color:red;} I hope that helps and thanks for watching!

@robertb7362

6 жыл бұрын

Thanks for your quick reply Sir. I try the code and automatically set the background RED after loaded the Form and before clicking the submit button. The idea would be to change the background color to RED for those required fields after the submit button. Is that something for AJAX?

@wplearninglab

6 жыл бұрын

Hey Robert, I gave you the incorrect css selector. Try this: .wpcf7-not-valid {background-color:red;} CF7 adds that class to the required fields that don't valid after submission. You don't need to do any validation yourself luckily :) Let me know if that works for you!

@robertb7362

5 жыл бұрын

I try the code but it didn't work. Thanks for the input anyway.

@wplearninglab

5 жыл бұрын

Hey Robert, Too bad it didn't work. I did during my testing. Maybe there's a conflict. You could try: .wpcf7-not-valid {background-color:red !important;}

Any way to have one colour for the placeholder and then when a user inputs text it changes colour?

@wplearninglab

5 жыл бұрын

Hi Marcos, yep, you can do that. On the post with the CSS ( wplearninglab.com/contact-form-7-css-style-almost-anything/ ) go to the heading "Contact Form 7 Style Placeholder". With that you can style the placeholder. Then use the CSS from the "Contact Form 7 CSS Style Input Fields" to style the letters that visitors type into the form. I hope that helps and thanks for watching!

You are a real teacher. I appreciate your efforts and learn a lot from your videos. I am facing a technical issue with Contact Form 7. The text field does not show the typed characters however the text area box works fine and form also gets submitted. Name, Email & Phone fields do not show the typed content in the field. Please guide.

@wplearninglab

5 жыл бұрын

Hi Waheed, The first thing I would do is make sure that all your plugins, theme and core files are up-to-date. If you type words into the name field, can you press Ctrl + A or CMD + A on your keyboard to highlight everything? When you do that, if there is text that is selected then the text color in the input is the same color as the background of the input. If that's the case the problem is a CSS issue and can be fixed by using CSS to change the color of the text. I hope that helps and thanks for watching!

I there a way to set line-height in the multiselect? I succesfully changed style of options in this filed, but "line-height" doesn't seem to work at all

@wplearninglab

4 жыл бұрын

Hi Maria, If you use your CSS selectors to select the individual options you can apply padding or height to them. Something like: .multiselect option {padding:10px 0;} or .multiselect option {height:20px;} .multiselect needs to be replaced with the class or ID of the multiselect element. You should be able to keep "option" in there as it is. Let me know if that helps!

@mariapankowska9750

4 жыл бұрын

Works beautifully! I did: #workshop-select option {height:26px;} Thanx!

How can I remove the field name above the placeholder, and have it just in the field placeholder

@wplearninglab

5 жыл бұрын

Hi Valentina, Good question. For any given field inside your form builder you likely have something that looks like this: Your Email (required) [email* placeholder "Please enter your email"] Delete everything except for the square brackets and what is inside the square brackets. That will remove the field name and have just placeholder text inside the field. The above code would now look like this: [email* placeholder "Please enter your email"] I hope that helps :) Let me know if you have any further questions. Thanks for watching!

ty

@wplearninglab

4 жыл бұрын

You're welcome Ahmed, thanks for watching!

Hi, I want to edit a select input type of a particular contact form without changing it for other contact forms. Please help me.

@wplearninglab

5 жыл бұрын

Hi Shashank, If you use a class name or ID that is only on that input field in that particular form then the CSS will only apply to that input field. You can add class names and ID's when you add the input field in the form builder. I hope that helps and thanks for watching!

@shashankborse

5 жыл бұрын

@@wplearninglab Can you show me an example please. Thank you so much 🙏

@igadiego1846

4 жыл бұрын

@@shashankborse An example would have been great indeed. Shashank is still waiting after one year. Me too :-)

How to change the dropdown placeholder-text color? I am only able to change all dropdown entries, but not the placeholder...

@gerwinkuijntjes4738

6 жыл бұрын

Micha Schlittenhardt using ::placeholder pseudo class

@schlittenhardtm

6 жыл бұрын

@@gerwinkuijntjes4738 thank you for your answer. I tried adding .wpcf7-select::placeholder {color: #ccc !important} to my css, but the drop-down placeholder just stays with the same color... Any idea what I did wrong?

@wplearninglab

6 жыл бұрын

Hi Micha, Sorry for the delay. Try this code and let me know how it goes: .wpcf7-select { background-color:#ffffff; /* it won't work without a background color set */ color:#028002; } Change #028002 to any color you want. This code will only change the select option, I've not yet been able to style the selection list when you click on the drop down.

@schlittenhardtm

5 жыл бұрын

Thank you for your response. The code works, but my problem is the following: I want to have the placeholder to be pink when I select an option from the drop-down, I want this option to show in black. I was only able to change these colors when the dropdown is open (first entry pink, the others black), but the idea is, that as long as the field was not selected by a user, it stays with a pink placeholder (so the user sees that there is still a field missing).

This was a great video , but it doesn't really show the rather simple modification I want to do: On a label, when it's required, I want to make the actual words "(Required)" to be in a smaller font and italics. In other words, I do not want to adjust the style of the entire text of the label - ONLY the parathesis and the single word. As easy as I thought this might be, it is driving me up a wall trying to figure out how to do it. Advice?

@cornerstonehoneybees2525

Жыл бұрын

Well, duh, I found it. I just used the "old school, 1990's style html code" directly in the label. (Required) and it worked perfectly.

how hide success message after 30 sec in contact form 7

@wplearninglab

6 жыл бұрын

Look up css3 transitions and transition-delay. You should be able to patch something together using those. I hope that helps and thanks for watching!

{"failed":"cURL error 7: Failed to connect to api.github.com port 443: Connection timed out"} i am showing this error plz help me how to solve it remove it

@how-to-why52

6 жыл бұрын

if any video so plz giv me

@wplearninglab

6 жыл бұрын

Where or when are you seeing this error? What did you do or try to do right before you got the error?

@wplearninglab

6 жыл бұрын

I don't have a specific video for that error. I've never encountered that error before.

@bassie204

6 жыл бұрын

Awsome video. Question tho is there anyway to completely restyle the upload button? Thx🦄👍

@wplearninglab

6 жыл бұрын

You should be able to. I haven't spent much time working on the upload button. But I'll figure it out and add the CSS to blog post as soon as I have it.

okay

@wplearninglab

5 жыл бұрын

Thanks Omor and thanks for watching! Let me know if you have any questions 🙂

YOUR VIDEO IS BEST BUT YOUR CAMERA IS SO BAD CHANGE YOUR CAMERA YOUR APPEARANCE NOT SHOW WELL

@wplearninglab

4 жыл бұрын

Hi Somali, thanks for your feedback. My new videos are better I think (I hope). Thanks for watching!