We always hope for the easy fix: the one simple change that will erase a problem in a stroke. But this is not a good strategy, though, to be honest, almost every theme I build I end up providing my clients with some basic styling for their use of Contact Form 7 plugin — the easy fix.
I suppose it is tempting, if you are any good at development, to treat everything as if it were a product you plan to build next, and then there is this sound of your inner self, telling you to stop doing whatever you’re up to and “You know what I should build a plugin to solve this problem!“.
The only thing more frustrating than a problem is knowing that you can solve it. Best products are built when you solve a problem. That’s what I did here. I have built a plugin which you can use to customize your contact form 7 forms, regardless of the theme you are using.
So, yes! I decided to listen and do what I feel like doing. I knew that the lesson will always repeat itself unless I see myself as the problem–not others. You must be thinking what lesson? What is all this? What about CF7 Customizer. So, let’s put an end to this horrid description of how I started building Contact Form 7 customizer and move on to what you came here to read about.
CF7 Customizer#
CF7 Customizer is an intuitive plugin to design your contact forms via WordPress live customizer, right at the front-end. Cherry on the top, it will be free forever.
This is it. A simple to use and neat plugin for anyone who wants to customize the look and feel of Contact Form 7 plugin based forms. Born out of frustration with the plugins compatibility for themes, CF7 Customizer is built to increase productivity, style and yes, Developer-peace-of-mind™.
Screenshots#
A few screenshots of CF7 Customizer for WordPress.
Open customizer at contact form 7 page and you will find a new menu called CF7 Customizer
Inside CF7 Customizer panel, there are four sections for you to customize
Form Text & BG Colors Section
Form Padding, Margin & Border Section
Input Field Styling Section
Button Styling Section
Getting Started#
Let’s get you started
- Step #0: → Install & Activate Contact Form 7.
- Step #1: → Add New Form and SAVE it.
- Step #2: COPY the shortcode of the form you just created and paste it inside your Contact Page.
- Step #3: Go to your contact page(front-end) and open CUSTOMIZER from the admin bar.
- Step #4: Find and open CF7 Customizer panel and customize your contact forms. Voila!
Fellow Developers!#
If you are a developer interested in contributing to the CF7 Customizer plugin for WordPress, then you’re more than welcomed to send pull requests or open issues at the GitHub repository.
Download from WordPress.org CF7 Customizer at GitHub
Updates#
Ahmad Awais
Looks great! Will be trying it out soon.
Looks promising!
Hi Ahmed, I used your this plugin on a project and as I told on managewp its awesome. I would like to add a feature request in future version for field in CF7. It would be great to control select field style with your plugin like text fields.
Thanks, Jabed. I have already customized it but can you tell what kind of customization would you want in it? You do realize it, that select box is not stylable it is a bit of CSS3 trickery I have used here, which is quite common, though, I’d love to hear what can be customizable here.
https://www.dropbox.com/s/frzmk1zfp5zacyl/Screenshot%202015-10-06%2016.26.38.png?dl=0 Checkout this screenshot. I know select box styling is bit tricky. :) It would be great if I could make select box same height as input box without writing css in stylesheet. Add a panel option for select box, radio or multichoice options here. https://www.dropbox.com/s/btvauwxbfs91fgl/Screenshot%202015-10-06%2016.29.22.png?dl=0 I know this is lots of asking but this will make this plugin more useful to everyone.
I see! Thanks for the feedback, I will definitely think about it. BTW would you be willing to buy a premium version if it offers all these features and some extra topping which I think could be really useful. #just_wondering
Definitely I will. But I hope premium version won’t be cost much. :D
Well, that is pretty reassuring. It was a fun side project, but I see potential here, so I am going start working on a Pro version. Yup it won’t cost much.
Can’t wait to see..
Dummy Comment!
Hi Ahmad,
Any change of a version of Gravity Forms or Ninja Forms?
Cheers,
Luke
I am building both of these. Will be releasing sooner rather than later.
Hello,
I tried using this to customise my form but because I have multiple forms on my website, it changed all of my forms to the background etc that i chose for that one :(
Can you please help me?
I would like each form to look different
Hey, Dee!
Currently, you cannot do that. All forms will get changed. The ability to change each form differently is currently being developed, slowly I must admit.