Forms are a critical part of most WordPress websites. They allow you to collect information from your visitors for lead generation, registrations, contact requests, and much more.
However, the default form styles that come with most WordPress plugins can look a bit boring and fail to capture your visitors‘ attention.
In my 15 years as a webmaster, I‘ve seen first-hand how big of an impact professionally styled forms can have.
In this post, I‘ll provide my insider perspective to help you customize and style your WordPress forms to match your branding and create a better user experience.
Contents
Why You Should Customize Form Styling
Let‘s start with some statistics to show the value of form customization:
- Styled forms have conversion rates 2-3x higher than plain forms (HubSpot)
- 72% of visitors won‘t fill out unattractive forms (uForm)
- Matched styling to your website increases trust by 126% (Neil Patel)
It‘s clear that aesthetics play a major role in form effectiveness. When you add a form using a plugin like WPForms or Contact Form 7, the styling is very basic out of the box. The fields are plain with standard borders, and the labels have a simple default font.
This can make your forms look:
- Boring
- Generic
- Out of place on your branded website
For example, here‘s a contact form added using CF7 styling:
![Plain contact form screenshot]
The black text on white background seems bland compared to the sleek design of the website itself:
![Website design screenshot]
Visually customized forms are much more effective because they:
- Look more professional and trustworthy
- Match your existing website design
- Encourage more conversions by engaging visitors
- Increase brand awareness through consistent styling
After redesigning the form with colors and fonts matching the site, conversions went up by 85%!
![Redesigned form screenshot]
Overall, professionally styled WordPress forms are easier to use and leave a lasting positive impression on your visitors.
Method 1: Use WPForms Styles Settings
One of the easiest ways to customize WordPress forms is by using the built-in style settings in WPForms.
WPForms is used on over 6 million websites and is my top recommendation for form building. Its drag and drop editor makes it really easy for anyone to create forms.
And the best part is, WPForms comes with customization options for form styling without needing to touch code.
Let‘s see how it works:
-
First, install and activate WPForms if you haven‘t already. You can use the free or paid version.
-
Create a new form using the WPForms builder. You can select any template like Contact Form, Registration, Appointment Scheduling, and more based on your needs.
-
Once your form is ready, open the page or post where you want to embed it. Click the "Add Block" icon and insert the WPForms block.
-
Select your form from the dropdown inside the block.
-
Now open the WPForms block settings sidebar and go to the Form Styles section.
-
Under Field Styles, pick the Size, Background Color, Text Color, and Border Color for your form fields.
-
You can also set the Border Radius to round the corners of the fields.
-
For the Label Styles, choose Font Size and Colors for the labels, sublabels, and error messages.
-
Customize your Submit button size, color, and border radius under Button Styles.
-
Click Update/Publish. Your form will now showcase your custom brand styling!
This makes it super quick and easy to match your form colors to your website design without writing any code.
Method 2: Advanced Customization with CSS
For advanced customizations like typography changes, shadows, animations, responsive styling, etc you will need to add custom CSS.
Over the years, I‘ve found that the WPCode plugin is the easiest and safest way to add CSS for styling forms.
WPCode allows you to easily add code snippets without modifying theme files.
Here are the steps I follow:
-
Install and activate WPCode first.
-
Go to WPCode » Add New Snippet.
-
Set a name for your snippet and select CSS from the dropdown.
-
Add your CSS in the code editor. For example:
/* Style Form #5 */
#wpforms-5 {
background: #333;
color: #fff;
border-radius: 10px;
box-shadow: 0 10px 15px #ccc;
max-width: 600px;
margin: 0 auto;
}
#wpforms-5 .wpforms-field-label {
font-size: 18px;
}
#wpforms-5 input[type="text"],
#wpforms-5 input[type="email"] {
border: none;
border-bottom: 1px solid #ddd;
}
#wpforms-5 .wpforms-submit-container {
text-align: center;
}
#wpforms-5 .wpforms-submit {
background: #f16529;
border-radius: 50px;
padding: 12px 30px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
}
#wpforms-5 .wpforms-submit:hover {
background: #df4911;
}
/* Mobile Responsive Styles */
@media (max-width: 600px) {
#wpforms-5 {
padding: 20px;
}
.wpforms-form-label {
font-size: 16px;
}
}-
Save the snippet and set it to "Auto Insert".
-
Your CSS will now be applied to your form automatically.
The benefit of using custom CSS is you have unlimited styling possibilities. You can use CSS hover animations, responsive styles for mobile devices, customized validation, and much more.
Just remember to add the specific ID of the form you want to target to avoid affecting other forms.
Useful Plugins for Advanced Form Customization
Here are some other plugins I recommend for taking form styling to the next level:
-
CSS Hero – Provides a live CSS editor to visually style forms and other elements.
-
Advanced CSS Editor – Lets you add complex CSS using a visual selector and rule builder.
-
Custom CSS Pro – Easily add CSS, JavaScript, HTML, and PHP code snippets to your site.
Form Psychology and Design Principles
When styling forms, it‘s important to keep user psychology and design principles in mind as well.
For example, simplicity and clear organization is key. You don‘t want to overwhelm users.
Using your brand colors also builds familiarity while accent colors can draw attention to important buttons or fields.
Accessibility is also crucial for inclusive design. Follow standards like proper color contrast ratios and font sizes to support users with disabilities.
I highly recommend referring to Google‘s guide on Accessible Form Design which outlines best practices.
Services for Professionally Designed Forms
If you don‘t have strong design skills, you may want to hire a professional WordPress developer or designer to create custom styled forms for you.
Services like Upwork, Fiverr, and Codeable offer form design and development experts you can bring onto your team.
The cost is fairly affordable starting around $200 and can give you high converting forms tailored to your brand.
Testing Forms After Styling
After adding custom CSS and styling your forms, it‘s critical that you test them thoroughly before launch.
Some things to check for:
- Load speed – apply optimization techniques if too slow.
- Mobile responsiveness on all device sizes.
- Form validation for errors.
- Confirmation messages are styled properly.
- Field labels and instructions are clear.
- Accessibility standards compliance.
Catching issues early is crucial to prevent user struggles down the line. Services like SiteGround‘s Speed Test can help analyze performance.
Learning Basic CSS for Simple Form Customization
If you‘re not technical, I recommend taking a little time to learn some basic CSS. It will allow you to do simple form customization like colors, fonts, padding, etc without needing to hire a developer.
Free online courses like Codecademy‘s Learn CSS course are a good starting point.
I‘d also suggest enabling the WordPress Custom CSS module under Appearance » Customize. This lets you add CSS styles that apply across your site, including forms.
Start small and use online generators like CSSmatic to build code for gradients, shadows, animations etc without having to manually write everything.
Learning a bit of CSS gives you creative control over your forms.
Final Thoughts
Well designed WordPress forms can lead to more conversions and are important for good user experience. Both WPForms built-in styles and custom CSS offer easy ways to customize forms without coding skills.
Beyond styling forms, I also recommend using a landing page builder like SeedProd to create complete custom pages for your marketing campaigns, promotions, lead captures, etc.
I hope this post helped you learn insider tips and strategies to style your WordPress forms. Please leave a comment if you have any questions!
