9 Essential WordPress Security Tips to Protect Your Website
February 16, 2024The difference between "." and "#"
https://www.geeksforgeeks.org/difference-between-and-selector-in-css/
W3Schools CSS for buttons
https://www.w3schools.com/css/css3_buttons.asp
Don't want to watch the video?
I included step-by-step instructions below!
I included step-by-step instructions below!
Step 1: Add an ID
Typically when Contact Form 7 forms are generated, it doesn't include an ID.
You can create an ID by clicking one of the buttons above the editor and adding an ID or you can simply type one in as I did with the screenshot above.
Whatever you are editing on CF7 - IT NEEDS an ID.
Step 2: Edit Custom CSS
Using your theme's "Custom CSS" use the "#" instead of "." to call your newly created ID.
In my case, made my button ID "button", so I would start my CSS with "#button"
#button { color: white; background-color: #f15a22; }
If you'd like to change more than just color (I'm sure you do) and you aren't completely familiar with CSS, the best reference for CSS is W3Schools.com. It's free and they have an awesome sandbox if you want to test out your code before you deploy it on your website.
Step 3: Press Save, That's It!
Holy cow, it was that easy the entire time!
I know, I felt silly when I found this solution as well, all of those days just upgrading to Gravity Forms or Formstack because I thought there was no control over color or size or anything of that nature.
I hope you found this useful, We work on projects like this all of the time and plan on posting our unique roadblock fixes and more technology/marketing content. If that's something you are interested, sign up for the newsletter below! Thanks!