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


Founder & CEO at Langbase.com β€” Ship hyper-personalized Al apps in seconds Β· Ex VP DevRel Eng. Rapid Β· Google Developers Advisory Board (gDAB) founding member. πŸ§‘β€πŸ’» AI/ML/DevTools Angel Investor ❯ AI/ML Advisory Board member San Francisco, DevNetwork

🎩 Award-winning Open Source Engineer & Dev Advocate 🦊 Google Developers Expert Web DevRel πŸš€ NASA Mars Ingenuity Helicopter mission code contributor πŸ† 8th GitHub Stars Award recipient with 5x GitHub Stars Award (Listed as GitHub's #1 JavaScript trending developer).

🌳 Node.js foundation Community Committee Outreach Lead, Member Linux Foundation, OpenAPI Business Governing Board, and DigitalOcean Navigator. πŸ“Ÿ Teaching thousands of developers Node.js CLI Automation (100 videos Β· 22 Projects) & VSCode.pro course. Over 142 million views, 24 yrs Blogging, 108K developers learning, 200+ FOSS.

✌️ Author of various open-source dev-tools and software libraries utilized by millions of developers worldwide ⓦ WordPress Core Developer πŸ“£ TEDx Speaker with 100+ international talks.

✨ As quoted by: Satya Nadella Β· CEO of Microsoft β€” Awais is an awesome example for developers.
πŸ™Œ Leading developers and publishing technical content for over a decade πŸ’œ Loves his wife (Maedah) ❯ Read more about Ahmad Awais.

πŸ‘‹β€¦ Awais is mostly active on 𝕏 @MrAhmadAwais


Developers Takeaway

Stay ahead in the web dev community with Ahmad's expert insights on open-source, developer relations, dev-tools, and side-hustles. Insider-email-only-content. Don't miss out - subscirbe for a dose of professional advice and a dash of humor. No spam, pinky-promise!

✨ 172,438 Developers Already Subscribed
Comments 14
  • Faizan Zafar
    Posted on

    Faizan Zafar Faizan Zafar

    Reply Author

    Looks great! Will be trying it out soon.

  • Rami
    Posted on

    Rami Rami

    Reply Author

    Looks promising!

  • Jabed Shoeb
    Posted on

    Jabed Shoeb Jabed Shoeb

    Reply Author

    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.

    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      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.

  • Ahmad Awais
    Posted on

    Ahmad Awais Ahmad Awais

    Reply Author

    Dummy Comment!

  • Luke Cavanagh
    Posted on

    Luke Cavanagh Luke Cavanagh

    Reply Author

    Hi Ahmad,
    Any change of a version of Gravity Forms or Ninja Forms?

    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      I am building both of these. Will be releasing sooner rather than later.

  • dee
    Posted on

    dee dee

    Reply Author

    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

    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      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.