Code snippets using custom CSS styles need to be added to your site. This tutorial will give you multiple options on how to add these code snippets to your site.
CSS is a powerful tool for styling your site, as well as your forms. There are 3 main approaches to adding custom CSS to your site:
Using the WordPress Customizer
WordPress CSS editor (Found in the left WordPress menu under Appearance » Customize » Additional CSS).
Since WordPress version 4.5, WordPress has given us a built-in tool to add any custom CSS styles to your theme or any plugin you have installed which makes this a popular choice for adding your CSS.
If you deactivate your theme, your custom CSS will be removed as any custom CSS added here is attached to the theme itself.
Using a specific plugin for adding CSS
Using a specific plugin created solely for this purpose is an extremely easy way to add custom CSS to your site.
Using CSS Hero
If you’d prefer to not touch any code, we also have built-in integration with CSS Hero.
Creating a child theme
Create a Child Theme to add your custom CSS.
If you’re planning on editing any of your theme files, it’s always best to create a child theme first so you don’t lose any changes if your theme needs to install an update.
When adding any kind of custom code to your site, it’s important to make sure you protect your code. So no matter what approach you choose, it’s a good idea to always back up your site first. That way, you’ll have access to older versions of site files and the database if needed.
For additional information on custom CSS for WPForms, check out the following tutorials:
- Adding Custom CSS to Your WPForms
- How to Style WPForms With Custom CSS (Beginner’s Guide)
- Customizing the Style of Individual Form Fields
- How to Customize the Submit Button
- Troubleshooting CSS Not Working
Q: How does this help me with adding custom CSS for WPForms?
A: This tutorial isn’t specificly for WPForms custom CSS, but for any custom CSS you may want to add for your theme or any other plugin.