WOW Style Contact Form 7byTobias Conrad

The purpose of this plugin: You can style Contact Form 7 forms, like changing colors, shapes, shadows, backgrounds, … without any knowledge of CSS.

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

She said

“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.

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 30 days Pro trial, with all features, with a few clicks, available in plugin, via sub menu. No payment details needed.

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: (for more just ask us in support forum)

• Form Text
  Text Color
  Font Size
  Font Family
  Links Settings Links Color
  Links Hover Color
  Labels Settings
  Labels Color
  Labels Font Size
  Labels Font Weight
  Labels Font Style
• Form Background Image & Colors
  Background Color
  Background Image (Premium)
  Upload Image
  Image Opacity
  Image Size like cover, contain, repeat vertical, repeat horizontal, repeat both
  Image Position like up, down, left, right and every corner
• Form Padding, Margin & Border
  Padding
  Margin
  Border Width
  Border Radius
  Border Color
  Form Shadow
  Horizontal Length
  Vertical Length
  Blur radius
  Spread radius
  Shadow Color
  Opacity
  Shadow Position
• Input Fields Text and Colors
  Make input fields full width? YES/NO
  Font Size
  Line Height
  Text Color
  BG Color
  BG Opacity
• Input Fields Padding & Margin
  Padding
  Margin
  Border
  Radius
  Color
  Input Shadow
  Horizontal Length
  Vertical Length
  Blur radius
  Spread radius
  Shadow Color
  Opacity
  Shadow Position
• Checkboxes & Radiobuttons
  Make checkbox item one per line YES/NO (Premium)
  Make radio button item one per line YES/NO (Premium)
  Labels Font Size
• Button Size, Text & Colors
  Make full width? YES/NO
  Padding
  Text Color
  Hover Text Color
  BG Color
  Hover BG Color
  Font Size
  Line Height
• Button Border & Shadow
  Button Border
  Width
  Radius
  Color
  Hover Color
  Button Shadow
  Horizontal Length
  Vertical Length
  Blur radius
  Spread radius
  Shadow Color
  Shadow Opacity
  Shadow Position
• Custom CSS
  clear, preview button