The purpose of this plugin: You can style Contact Form 7 forms, like changing colors, shapes, shadows, backgrounds, … without any knowledge of CSS.
How to add style in contact form 7 to match your design? With the WOW Styler.
This video is my first Styler intro video and contains quick start and quick style tutorials. How to add a style, match with your website style and add background images.
For deeper handling information and tricks look at the video inside the plugins tutorial section.
Please make sure you read the latest changes and benefits from our WP.org changelog to get the most out of the CF7 styling plugin.
This is the story about how to add style in contact form 7 by our new plugin
Melanie and Tobias (me) started using CF7 Forms and we asked ourselves how to add style in contact form 7? We did some research on existing styling contact form 7 wordpress plugins like Contact Form 7 Skins, Contact Form 7 Style. Our main goal was to design a contact form and use this design for other forms, starting from a default template or from the scratch.
What we have seen frustrated us. We thought there must be better ways styling contact forms and thus invented an much easier contact form 7 styler.
This is the beginning of the story about how we got the idea of creating a new plugin to add styles in contact form 7.
How I turned Melanie, an old Contact Form 7 CSS hard coder, into using the WOW Styler for CF7
“why do I have to pay for a plugin license or develop one when you can style everything in the browser and then copy the code into page with the CF7 form?”
And here is why:
- You need a CSS plugin to add contact form 7 css per page and not to style and have all forms look the same style across the whole website.
- And you can not place two forms with different styles in one page/post.
- When it comes to set a background image and align it on the right top angle it needs a bunch of CSS knowledge to do it. Do you have it?
- Styling is getting even harder when you style a form which is inside a page builder as this could stripe out all your own CSS.
Now Melanie decided to pay a part for the WOW styler development and now she is using it on all her own and her customers websites.
You like to know how to add style in contact form 7 for FREE?
You can use the free trial version with all features!
OR you do it like Melanie and her customers as they are using the premium version for free, because Styler Premium is free when running on a website with an active WP2LEADS Pro version.
Now you know our story and how to use it for free
LET´S GET STARTED BY DOWNLOADING PLUGIN OR SEARCHING FOR “WOW STYLER” IN YOURS WP PLUGINS SECTION
Vlad (Developer), Melanie (Online Marketer since decades) and Tobias (Plugin Innovator) created an completely new plugin with following features.
- Theme independent styling, changing theme will not reset style
- Wide Themes, page builder and browsers compatibility
- Live preview of your form style during designing it. You can see your themed form and the live form at the same time within the split view
- If your theme provides CF7 styles you can additionally design your form with the styler
- The Contact Form 7 style plugin is under constant improvement and support. Feel free to submit your wishes to us!
- Comes for all forms with beautiful default style scheme (thanks to Vlad)
- WOW Styler you just enable “load in body” to get the style active, especially in page builder/themes that would stripe out your CSS. Therefore, it works with all themes and page builders.
- Style all forms from the scratch or alter the default scheme with a lot of settings (all settings listed below)
FEATURES on LIFETIME PREMIUM OR with ACTIVE WP2LEADS PRO VERSION
Thank you, Melanie, for the idea to style Contact Form 7 for free with active WP2LEADS license:
- Style each form individually and attach style to any form
- Align radio buttons and checkboxes
- Add a different background to each form
- Create as many style schemes in CF7 as needed.
- Load styles in body-tag to show style when CSS is striped out by a page builder/theme. That makes it possible to style CF7 forms in nearly every place.
Quick start ideas how to add style in contact form 7 forms
- Change colors of the default scheme to meet your corporate identity
- Change the background of each form and save it as an different scheme like „default scheme + smiling sun“
- Use the 14 days Pro trial, with all features, with a few clicks, available in plugin, via sub menu.
ADVANTAGES when you STYLE CONTACT FORM 7 with WOW STYLER
- Change the Contact form 7 templates with ease.
- With this CF7 Customizer you can easily create individual designs for your registration form or contact form with just a few clicks.
- The Contact Form 7 styler works across contact form styles coming with your theme. This means you can be sure that the WOW Stylers design really works in all themes and page builders.
- If you would like to have an individual contact form 7 styler that will give you a live preview for contact form 7, then the CF7 skin of this form customizer will inspire you.
- Contact Form 7 style plugin is a contact form customizer that works wonderfully with other contact form 7 add-ons. Perfect collaboration between WordPress form customizer and contact form templates.
- For some reason you may don’t like your current CF7 style anymore, you can easily return it to the standard of your CF7 templates with one click.
- The contact form 7 designer as CF7 customizer fulfills every desire
- Saving your designs in contact form 7 templates saves you a lot of time.
- The immediate feedback saves you time. The live split view makes it intuitive and easy to use.
- If you where searching for beautiful contact form designs but could not find something which you can quickly adapt to your websites styling then maybe you´ll find here what you are looking for. Just alter the default style by changing the colors to fit to your websites cooperate design.
- And with the premium version you can also skin all forms with the same template and you can change only background images per form, to create an eye catcher styled contact form 7 form and just save the new created style scheme with a new name like “default CI + teddy bear background” and you are done.
Let me summarize it.
If you are looking for an easy way to use Contact Form 7 style plugin, which gives you the freedom to style Contact Form 7, saving your own styles, having a split view which is saving your time and which is always supported by humans instead of machines, you should click now the Download Button
My favorite functionality
When you look at the form in front, you can click on the link to directly start styling the current form in the styler.
73 possible form settings in 12 categories:
2.Form Background Image & Colors
3.Form Padding, Margin & Border(Customizable Padding, Margin & Border)
4.Input Fields Text and Colors
5.Input Fields Padding & Margin
6.Checkboxes & Radiobuttons
7.Button Size, Text & Colors(button styling)
8.Button Border & Shadow
10. Style headers
11. Add image to form
12. Contact Form 7 fields two columns
For more just ask us in support forum
For all 73 style settings look in the FAQ section
Let’s get your forms styled
- Step 1: Install/activate Contact Form 7 style plugin
- Step 2: Go to CF7 Styler which is in the “Contact” sub menu
**Pst. If you like some example forms which are already connected to [Klick Tipp an German E-Mail and SMS Marketing Provider] (https://www.klick-tipp.com/15194) Get WP2LEADS too.
If you are using WP2LEADS with an active Pro Version the Contact Form 7 Styler Premium version is free for you.