Ahmad Awais



Introducing CF7 Customizer | Form Styling via WP Live Customizer

Ahmad AwaisAhmad Awais

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


A few screenshots of CF7 Customizer for WordPress.

CF7 Customizer screenshot-1

Open customizer at contact form 7 page and you will find a new menu called CF7 Customizer

CF7 Customizer screenshot-2

Inside CF7 Customizer panel, there are four sections for you to customize

CF7 Customizer screenshot-3

Form Text & BG Colors Section

CF7 Customizer screenshot-4

Form Padding, Margin & Border Section

CF7 Customizer screenshot-5

Input Field Styling Section

CF7 Customizer screenshot-6

Button Styling Section

Getting Started#

Let’s get you started

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


👨‍🏫 Edutainer & teacher at VSCode.pro 🎩 Full-time #OpenSourcerer 🦊 Google Developers Expert for Web 🥑 OSS Developer Advocate 🌳 Node.js Foundation Community Committee Member 🔥 Ridiculously hard-working Full Stack Web Developer 😂 Hilarious comedian ⓦ Regular WordPress Core Developer 📣 TEDx Speaker ✌️ Spends 50-80% of his time building professional FOSS (Free & Open Source Software) used by over 1,399,687 Developers 🙌 Cloud Community Evangelist 🎯 JavaScript & DevOps fanboy 💜 Loves his wife (Maedah) 🍕 Learn more about Ahmad ↣

Say 👋 on Twitter @MrAhmadAwais | Subscribe to the Developer's Takeaway!


TheDevTakeaway: Developers' Newsletter!

Takeaway my professional opinion about Open Source, JavaScript/Cloud, Full Stack Development, building a business, growing a family, and everything in between! Delivered to your inbox once a month. 🤣 I'm even funny some times. 👻 I hate spam! Pinky Promise!