WP Manifestindependent plugin directory
manifest / forms / cf7-style-customizer

CF7 Style Customizer

Plugin tocustomize contact form 7

by LindaWP · github.com/onjoma/cf7-style-customizer · website

★ 0stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/onjoma/cf7-style-customizer/archive/refs/heads/main.zip
Readme github.com/onjoma/cf7-style-customizer ↗

🎨 CF7 Style Customizer

A Modern WordPress Plugin for Styling Contact Form 7

Transform your Contact Form 7 forms with a powerful, no-code styling solution.

Features • Installation • Usage • Documentation • Support

CF7 Style Customizer

📋 Description

CF7 Style Customizer empowers you to completely customize the appearance of your Contact Form 7 forms without writing a single line of CSS. With an intuitive, tabbed admin interface, you have full control over:

  • 📦 Form Container - Width, padding, background, borders
  • ✏️ Input Fields - Size, colors, borders, focus states
  • 🏷️ Labels - Typography, colors, spacing
  • 🔘 Buttons - Dimensions, colors, hover effects
  • 💬 Messages - Error and success styling

✨ Features

🎯 User-Friendly Interface

  • Intuitive tabbed navigation
  • Organized settings by category
  • Clean, modern design
  • Mobile-responsive admin panel

🎨 Visual Customization

  • Built-in WordPress color pickers
  • Real-time color preview
  • No CSS knowledge required
  • Visual feedback for all changes

⚡ Powerful Options

  • 40+ customization options
  • Complete form control
  • Focus state styling
  • Hover effect customization

🔄 Smart Features

  • One-click reset to defaults
  • Settings persistence
  • AJAX-powered updates
  • Tab state memory

📦 Installation

Method 1: Manual Installation

  1. Download the plugin files
  2. Upload the cf7-style-customizer folder to /wp-content/plugins/
  3. Activate the plugin through the 'Plugins' menu in WordPress
  4. Navigate to 'CF7 Styles' in the admin menu
  5. Start customizing your forms!

Method 2: WordPress Admin

  1. Go to Plugins → Add New
  2. Search for "CF7 Style Customizer"
  3. Click Install Now
  4. Click Activate

⚙️ Requirements

Requirement Version
WordPress 5.0+
Contact Form 7 Latest
PHP 7.0+

⚠️ Important: Contact Form 7 must be installed and activated for this plugin to work.

🚀 Usage

Quick Start Guide

  1. Access Settings: Navigate to CF7 Styles in your WordPress admin menu
  2. Choose a Tab: Select the element you want to customize
  3. Adjust Settings: Use the intuitive controls to style your forms
  4. Save Changes: Click "Save Settings" to apply
  5. View Results: Check your Contact Form 7 forms on the frontend

🎛️ Customization Tabs

📦 Form Container

Control the overall form appearance:

  • ✅ Form width and max-width
  • ✅ Padding and margins
  • ✅ Background color
  • ✅ Border width, color, and radius
✏️ Input Fields

Style all input elements:

  • ✅ Input dimensions (width, height)
  • ✅ Font size and colors
  • ✅ Borders and backgrounds
  • ✅ Focus states (border, background, shadow)
  • ✅ Textarea height and resize behavior
  • ✅ Placeholder color
🏷️ Labels

Customize form labels:

  • ✅ Font size and weight (300-700)
  • ✅ Label color
  • ✅ Spacing and margins
🔘 Buttons

Design your submit buttons:

  • ✅ Button dimensions and spacing
  • ✅ Font properties
  • ✅ Colors and backgrounds
  • ✅ Hover states
  • ✅ Border radius
  • ✅ Smooth transitions
💬 Messages

Style validation messages:

  • ✅ Error message colors
  • ✅ Success message colors

💾 Saving & Resetting

  • Save Settings: Click the green button to apply your customizations
  • Reset to Defaults: Red button restores original settings (with confirmation)

📚 Documentation

Complete Styling Options Reference

Form Container Options

  • Form Width: e.g., 100%, 600px
  • Form Max Width: e.g., 600px, 100%
  • Form Padding: e.g., 20px, 10px 20px
  • Form Margin: e.g., 0 auto, 20px 0
  • Background Color: Any valid color
  • Border Width: e.g., 1px, 2px
  • Border Color: Any valid color
  • Border Radius: e.g., 8px, 0px

Input Field Options

  • Input Width: e.g., 100%, 300px
  • Input Height: e.g., 45px, 50px
  • Input Padding: e.g., 10px 15px
  • Input Margin: e.g., 0 0 15px 0
  • Font Size: e.g., 16px, 14px
  • Font Color: Any valid color
  • Background Color: Any valid color
  • Border Width: e.g., 1px, 2px
  • Border Color: Any valid color
  • Border Radius: e.g., 4px, 8px
  • Focus Border Color: Any valid color
  • Focus Background Color: Any valid color
  • Focus Shadow: e.g., 0 0 5px rgba(76, 175, 80, 0.3)
  • Textarea Height: e.g., 120px, 150px
  • Textarea Resize: none, vertical, horizontal, both
  • Placeholder Color: Any valid color

Label Options

  • Font Size: e.g., 14px, 16px
  • Font Weight: 300, 400, 500, 600, 700
  • Color: Any valid color
  • Margin: e.g., 0 0 8px 0

Button Options

  • Button Width: e.g., auto, 100%, 200px
  • Button Height: e.g., 45px, 50px
  • Button Padding: e.g., 12px 30px
  • Button Margin: e.g., 10px 0 0 0
  • Font Size: e.g., 16px, 18px
  • Font Weight: 400, 500, 600, 700
  • Font Color: Any valid color
  • Background Color: Any valid color
  • Border Width: e.g., 0, 1px, 2px
  • Border Color: Any valid color
  • Border Radius: e.g., 4px, 25px
  • Hover Background Color: Any valid color
  • Hover Font Color: Any valid color
  • Hover Border Color: Any valid color
  • Transition: e.g., all 0.3s ease

Message Options

  • Error Color: Color for error messages
  • Success Color: Color for success messages

🎨 Default Styling

The plugin includes professional, modern defaults out of the box:

/* Default Theme */
Primary Color: #4CAF50 (Material Green)
Form Width: 100% (max 600px)
Input Height: 45px
Border Radius: 4-8px
Transitions: 0.3s ease

Design Philosophy:

  • ✨ Clean and modern aesthetics
  • 📱 Fully responsive
  • ♿ Accessible and user-friendly
  • 🎯 Optimized for conversions

❓ FAQ

Does this plugin work with all Contact Form 7 forms?

Yes! The styles are applied globally to all Contact Form 7 forms on your site automatically.

Can I use custom CSS in addition to this plugin?

Absolutely! You can add custom CSS to further customize your forms. The plugin's styles use !important to ensure they take precedence over default CF7 styles, but you can override them with more specific selectors.

Will my settings be lost if I deactivate the plugin?

No, your settings are safely stored in the WordPress database and will be preserved if you deactivate and reactivate the plugin.

Can I style different forms differently?

Currently, the plugin applies styles globally to all CF7 forms. Individual form styling may be added in future versions.

Is the plugin translation-ready?

Yes! The plugin is fully internationalized and ready for translation.

Does it affect site performance?

No! The plugin generates minimal inline CSS only on pages with Contact Form 7 forms, ensuring optimal performance.

📝 Changelog

Version 1.0.0 (Initial Release)

  • ✨ Complete form styling options (40+ settings)
  • 🎨 Tabbed admin interface with 5 categories
  • 🎨 WordPress color picker integration
  • 🔄 Reset to defaults functionality
  • 📱 Responsive admin design
  • 🔒 Security features (nonce verification, sanitization)
  • ⚡ AJAX-powered reset
  • 💾 Tab state persistence

🗺️ Roadmap

Future enhancements we're considering:

  • [ ] Individual form styling (per-form customization)
  • [ ] Style presets/templates
  • [ ] Import/Export settings
  • [ ] Live preview in admin
  • [ ] Additional form elements (checkboxes, radio buttons)
  • [ ] Custom CSS editor
  • [ ] Style versioning
  • [ ] Multi-step form support

Have a feature request? Open an issue and let us know!

🤝 Contributing

Contributions are welcome! Here's how you can help:

  1. 🍴 Fork the repository
  2. 🔨 Create a feature branch (git checkout -b feature/AmazingFeature)
  3. 💾 Commit your changes (git commit -m 'Add some AmazingFeature')
  4. 📤 Push to the branch (git push origin feature/AmazingFeature)
  5. 🎉 Open a Pull Request

Please ensure your code follows WordPress coding standards.

💬 Support

Need help? We're here for you!

👏 Credits

Developed by: LindaWP

Built with ❤️ for the WordPress community.

Special Thanks

  • Contact Form 7 team for the amazing form plugin
  • WordPress community for continuous inspiration
  • All contributors and users

📄 License

This plugin is licensed under the GPL v2 or later.

Copyright (C) 2025 LindaWP

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

⭐ If you find this plugin useful, please star the repository!

Made with ❤️ by LindaWP

Report Bug • Request Feature • Documentation