Last Updated on January 13, 2020 by Neil Murray
This post highlights the approach you should take when creating custom CSS styling advice for CF7 forms in our articles.
How do I find a specific CF7 CSS class selectors? #
Use Chrome Dev Tools to select suitable CSS Selectors to customize your form. Google Chrome Dev Tools will show you what is happening on our site in great detail.
What you see depends
on the WP theme & other plugins used. Focus on CSS classes that CF7 adds. Then this advice will apply to all people regardless of theme & plugins they use.
You may need to start by disabling all the CSS added by the theme to this CF7 form only. After that
Refer to Styling Contact Form 7 Forms for general advice.
What is CF7’s default CSS structure like? #
You can see the CSS that CF7 adds here – might be a bit out of date
It’s important to
- Contact Form 7
- Contact Form 7 Skins
- CF7 Skins Add-ons
- Current WP theme
- Other active plugins.
You can easily check the latest version in Chrome Dev Tools > Source
How can I target specific CF7 form ID? #
Refer to Styling a Specific Contact Form 7 Form for detailed advice.
Make sure that any CSS code that you apply is specific to the CF7 form ID. Be extra careful to ensure that your CSS changes don’t affect any other CF7 forms on the site.
How specific should our CSS solution have to be? #
We need to make sure we have added sufficient CSS specificity so people can ‘
If you take a look at a typical CF7 Skins form on our site you can see how we tackle these issues.
Can I use a different class selector to achieve the solution? #
It’s pretty common for people who are experienced with CSS to use different class selectors.
There are so many classes available in CF7 that you can target the same element in a lot of different ways.
If you want to get pedantic & compare – the best CSS would be the one that uses the lowest CSS specificity level.
It’s always better to use the lowest level of CSS Specificity necessary to achieve the required result.