How to Change the Submit Button Color of The WPForms WordPress Plugin?

In today's video tutorial we'll learn how to customize the free WPForms WordPress plugin submit button colors in a simple, fast and effective method.
Download WordPress themes and plugin free visualmodo.com/borderless/
Add Buttons To WP Posts & Pages: How To Use WordPress Block & Widget Editor Tutorial • Add Buttons To WP Post...
How To Use Yoast SEO WordPress Plugin To Optimize Blog Posts For Google Search? • How To Use Yoast SEO W...
Try it out here tome.app/invite/visualmodo-cl...
Would you like to alter the color of the submit button on your forms? All you need to alter the appearance of the submit button on the form is CSS, and this can be combined with your website's branding to create a unique design. In this lesson, we'll cover the fundamental CSS necessary to alter the color of buttons.
By default, WPForms styles the submit button's color to be a slightly gray background. However, you may want to alter the color to better coordinate with the colors of your website or company's branding. This can be accomplished with a concise CSS snippet. We will begin by creating a new form and adding our fields. To alter the color of the button, you will need to duplicate this CSS to your website. #wpforms #wordpress #tutorial
The following CSS will alter the color of the submit button's background to blue (#024488) with white text on all of the WPForms Submit buttons on your website.
Why doesn't this CSS suit me? Many potential causes could exist for your site's lack of change, including a caching issue or something that overwrote the CSS with the !important tag, even on the CSS rules.
.wpforms-form button[type=submit] {
background-color: #024488 !important;
border-color: #024488 !important;
color: #fff !important;
transition: background 0.3s ease-in-out;
}
.wpforms-form button[type=submit]:hover {
background-color: #022B57 !important;
}
⭐ Free Goods of the Week: Download these 6 free goods before it's too late! crmrkt.com/NloAlj
⭐ Buy Website Hosting Plan and Gain a Free Domain At bluehost.sjv.io/EaMeRe
⭐ Best VPN service namecheap.pxf.io/XYx5q3
⭐ Register Your Domains Hassle-Free namecheap.pxf.io/rnmrdB
⭐ Managed Cloud Hosting www.cloudways.com/en/?id=309377
I hope you guys enjoy this video, feel free to use the comments section below in case you have any questions, and don't forget to check out that Visualmodo website and subscribe to our channel for more web design and development training videos. Please check the links below for more content.
Website visualmodo.com/
Facebook / visualmodo
Instagram / visualmodo
Twitter / visualmodo

[@snowin5797]

Thanks Visual Modo. You're the Best !

[@visualmodo]

Thank you too!

[@amberalbergottie2166]

This was exactly what I needed! Thank you so much!!

[@visualmodo]

Thank you so much for your comment

[@Yander_van_der_wurff]

thank you so much i have been trying this it took me so long to figure out!!

[@visualmodo]

Glad I could help!

[@cyberculture4989]

Love your tips ❤

[@visualmodo]

Thanks for your comment!

[@arpon37]

Interesting and useful, thanks for the video!

[@visualmodo]

Thanks for your comment!

[@JasperHunt-hq7pu]

Brother, you have no idea how much that just helped me out. Really, thank you very much :)

[@visualmodo]

You're very welcome!

[@mayaken6660]

Excellent work!!!!

[@visualmodo]

Thank you!

[@cl.mydigitalking]

Thank you so much!! Love it!

[@visualmodo]

You are so welcome!

[@mizzbone4860]

This really helped! Thanks 🙂

[@visualmodo]

Thanks a lot!

[@Lehntastic]

Thank you, that helped me a lot!

[@visualmodo]

Glad it helped!

[@Harsh-Tech-Hub]

thank you , it's really helpful video

[@visualmodo]

Thanks for your comment! all the best

[@unicorp2849]

Amazing content!!! 😀😀😀😀

[@visualmodo]

Thanks! 😁

[@Bisonintheforest]

brother thank you so much

[@visualmodo]

Thank you so much for your comment!

[@studioskip]

THANK YOU SOOOO MUCH!

[@visualmodo]

You're welcome!

[@tongduro7375]

Geezer! Thank you

[@visualmodo]

You're welcome!

[@LynProwseBishop]

Magic Thanks 🤩

[@visualmodo]

You're welcome 😊

[@emindmnger8372]

Thanks!

[@visualmodo]

Thank you so much for your comment!

[@denisehomewood8342]

Thankyou so much :)

[@visualmodo]

You're welcome

[@karamah]

Works like a gem! Thank you so much

[@visualmodo]

You're welcome!

[@alansaiyan6772]

thank you.

[@visualmodo]

You're welcome

[@thewhistledown6937]

Thank you

[@visualmodo]

Thank you so much for your comment!

[@howtohermione2]

thank you :)

[@visualmodo]

Welcome!

[@PranavMaurya02]

thanks man i did it

[@visualmodo]

Thanks for your comment!

[@cesargomez6135]

Thx you solve me a day of serch

[@visualmodo]

Happy to help

[@LesleyPazdzioch]

You are my new best friend!

[@visualmodo]

Thanks for my comment!

[@nandaparb3179]

Very good and easy to follow WordPress tips!

[@visualmodo]

Glad it was helpful!

[@ferrykouemo3370]

Merci beaucoup

[@visualmodo]

You're welcome!

[@charukalakshitha3802]

superb...

[@visualmodo]

Thank you so much!

[@guizerawp9750]

me surpreendi quando percebi q era brasileiro, bom conteúdo me ajudou aqui haha

[@visualmodo]

Fico feliz em ajudar, tudo de melhor

[@len.2011]

TOP TOP TOP TOP!!!!

[@visualmodo]

Thank you so much!

[@user-cv5tu7vy8r]

can you also change the shape of the button? all my other buttons on website have rounded edges but the one on wp-forms have square edges

[@visualmodo]

Yes, you need to add a CSS code, 'border'

[@economestre]

Top 🔝

[@visualmodo]

Thank you!

[@pregeefranklin5512]

Thanks this helped.
But i am still having issues, the form i created is a two step form, where by the first button is a "next" button, and then the second button that appears after clicking on the next button is a "submit" button. the CSS code only changes the color for the submit button. how can i change the color of the next button?

[@visualmodo]

are you using WordPress blocks editor?

[@angelicagamarra3513]

How about change the background for a single contact form? editting CSS will set for all the cf7 on the site. ;) thank you

[@visualmodo]

Please try to follow ruclips.net/video/w7xhzbE_t30/видео.html

[@user-dv6vx1ov2h]

very good video. I could not find this explained anywhere. Now how do I change the color and size of that same button? Do you have a video or the CSS code for that?

[@visualmodo]

Thanks for your comment. The idea is the same one present in the video, Color is explained on the video already, and the Size, can be a CSS font-size: 35px and padding: 15px;

[@CorretoraSincera]

👏👏👏

[@visualmodo]

Thanks for your comment!

[@christinepoore3614]

this was very helpful, thank you! I was only able to change the color of the submit button on screen, I cannot change the "hover" color, it remains blue despite changing the hex code. and also do you know how to change the message on the next screen where it says your message has been sent? it is a bright green color. thank you :)

[@visualmodo]

Thanks for your comment, we'll do a video about it

[@visualmodo]

here ruclips.net/video/HJ9YmULiO6w/видео.html

[@idromano]

Valeu!

[@visualmodo]

Valeu demais pelo seu comentário!

[@KasunBro]

thanks

[@visualmodo]

Thank you do much!

[@SWEATVids]

Brilliant! Thank you so much!

[@visualmodo]

You're very welcome!

[@ruben_desmit]

How to do the exact same thing but then for the checkout, apply coupon and update cart buttons on the checkout page?

[@visualmodo]

Thanks for your question, I'll do a video about it

[@ruben_desmit]

@@visualmodo great! when?

[@MiMi-dc9qs]

Thank you so much !!! It actually works. Please share a link that allows us to safely tip you :)

[@visualmodo]

Thanks for your comment, There is a button on the video called 'Thanks' you can use it. all the best

[@user-ng9xc3st6k]

I Love You

[@visualmodo]

Thanks for commenting!

[@bhanujamitra2697]

This was super duper helpful, thank you so much!! :))

[@visualmodo]

Glad it was helpful!

[@conexaoguiada]

Caraca, assim que ouvi a voz já pensei: "é brasileiro" kkkk Eu reconheço o sotaque do meu povo. Mas depois vi que estava em português o conteúdo do vídeo kkkk

[@visualmodo]

Obrigado por notar, faz tempo que usa o WordPress?

[@taina313]

I copied and pasted the code and nothing happened to the color. I followed all of your steps, what else can i do?

[@visualmodo]

Are you using the 'important' css tag?

[@taina313]

@@visualmodo double checking now

[@visualmodo]

Good good

[@gabrieltillvitz4802]

You got brazilian accent.

[@visualmodo]

Yep, because I'm form Brasil. thanks for noticing All the best

[@mubasherjam]

you could have atleast pasted the code

[@visualmodo]

I tried buy RUclips blocked in the description, something about adding codes isn't allowed

[@mubasherjam]

@@visualmodo well, thanks for the information. If you are available right now i need to ask something

[@visualmodo]

I'm always here to reply your comments.

[@zmazu]

too complex

[@visualmodo]

Really?

[@robert.m.oficial]

Como alterar a largura e adicionar bordas arredondadas?

[@visualmodo]

Excelente pergunta, vou estudar um pouco e faço um video sobre.

[@CocoM2023]

Thanks!!

[@visualmodo]

Thanks for your comment!

[@jaredsdias]

👏👏👏

[@visualmodo]

Obrigado!

[@patriciagaleno2031]

👏👏👏

[@visualmodo]

Thanks for your comment!