tsumiki

ZenBlocks extends the WordPress block editor (Gutenberg) with custom blocks and advanced styling controls. Design responsive, professional buttons and UI elements — without writing any code.
Button Basic Block
Create fully customizable buttons with granular control over every visual aspect:
<ul>
<li>Colors & Backgrounds — Solid color, gradient, or image backgrounds with hover state support</li>
<li>Typography — Font family, size, weight, line height, and letter spacing</li>
<li>Layout — Width, height, padding, and margin with fine-grained control</li>
<li>Borders — Width, style, color, and independent corner radius</li>
<li>Icons — 1,500+ built-in icons with size, color, and position options</li>
<li>Hover Effects — Separate styling for hover state with smooth transitions</li>
<li>32 Design Presets — Start from professionally designed templates and customize freely</li>
</ul>
Responsive Design
Every setting supports 4 breakpoints (PC / Tablet L / Tablet / Mobile) so your buttons look great on all devices. Customize values per device or let them cascade automatically.
Performance
ZenBlocks generates optimized CSS per page — only the styles you actually use are loaded on the frontend. No bloated global stylesheets.
Pro Features (Optional)
Additional features such as animations, thumbnails, and background video are available through a separate plugin (ZenBlocks Pro) from <a href="https://zenblockswp.com/" rel="nofollow ugc">zenblockswp.com</a>.
<h3>Source Code</h3>
This plugin includes compiled JavaScript and CSS files in the <code>build/</code> directory. The original uncompiled source code is included in the <code>src/</code> directory of this plugin.
To build from source:
<ol>
<li>Install Node.js (v18 or later)</li>
<li>Run <code>npm install</code> in the plugin root directory</li>
<li>Run <code>npm run build</code> to generate the production files in <code>build/</code></li>
</ol>
The build process uses <code>@wordpress/scripts</code> (webpack-based).
<h3>External services</h3>
This plugin includes an optional media search feature that connects to third-party image and video APIs. These services are only used when the user configures API keys in the plugin settings and actively searches for media within the block editor. No data is sent to these services during normal frontend usage.
<h4>Unsplash</h4>
Used for searching and importing free-to-use images in the block editor.
<ul>
<li>Data sent: search query, page number</li>
<li>When: only when the user searches for images via the Unsplash media panel in the editor</li>
<li>Service provider: <a href="https://unsplash.com/" rel="nofollow ugc">Unsplash</a></li>
<li>API endpoint: <code>https://api.unsplash.com/</code></li>
<li>Terms of Service: <a href="https://unsplash.com/terms" rel="nofollow ugc">https://unsplash.com/terms</a></li>
<li>Privacy Policy: <a href="https://unsplash.com/privacy" rel="nofollow ugc">https://unsplash.com/privacy</a></li>
<li>API Terms: <a href="https://unsplash.com/api-terms" rel="nofollow ugc">https://unsplash.com/api-terms</a></li>
</ul>
<h4>Pexels</h4>
Used for searching and importing free images and videos in the block editor.
<ul>
<li>Data sent: search query, page number</li>
<li>When: only when the user searches for media via the Pexels media panel in the editor</li>
<li>Service provider: <a href="https://www.pexels.com/" rel="nofollow ugc">Pexels</a></li>
<li>API endpoint: <code>https://api.pexels.com/</code></li>
<li>Terms of Service: <a href="https://www.pexels.com/terms-of-service/" rel="nofollow ugc">https://www.pexels.com/terms-of-service/</a></li>
<li>Privacy Policy: <a href="https://www.pexels.com/privacy/" rel="nofollow ugc">https://www.pexels.com/privacy/</a></li>
</ul>
<h4>Pixabay</h4>
Used for searching and importing free images and videos in the block editor.
<ul>
<li>Data sent: search query, page number</li>
<li>When: only when the user searches for media via the Pixabay media panel in the editor</li>
<li>Service provider: <a href="https://pixabay.com/" rel="nofollow ugc">Pixabay</a></li>
<li>API endpoint: <code>https://pixabay.com/api/</code></li>
<li>Terms of Service: <a href="https://pixabay.com/service/terms/" rel="nofollow ugc">https://pixabay.com/service/terms/</a></li>
<li>Privacy Policy: <a href="https://pixabay.com/service/privacy/" rel="nofollow ugc">https://pixabay.com/service/privacy/</a></li>
</ul>
<h4>Openverse</h4>
Used for searching and importing CC0-licensed images in the block editor.
<ul>
<li>Data sent: search query, page number</li>
<li>When: only when the user searches for images via the Openverse media panel in the editor</li>
<li>Service provider: <a href="https://openverse.org/" rel="nofollow ugc">Openverse</a> (a project by WordPress.org)</li>
<li>API endpoint: <code>https://api.openverse.org/</code></li>
<li>Terms of Service: <a href="https://openverse.org/terms-of-use" rel="nofollow ugc">https://openverse.org/terms-of-use</a></li>
<li>Privacy Policy: <a href="https://openverse.org/privacy" rel="nofollow ugc">https://openverse.org/privacy</a></li>
</ul>
<h4>ZenBlocks Pro Services (zenblockswp.com)</h4>
Used for retrieving Pro upgrade pricing information on the plugin settings page.
<ul>
<li>Data sent: locale (for currency conversion)</li>
<li>When: only when the admin settings page is loaded</li>
<li>Service provider: <a href="https://zenblockswp.com/" rel="nofollow ugc">ZenBlocks</a> (Tsumiki LLC.)</li>
<li>API endpoint: <code>https://zenblockswp.com/wp-json/zenblocks/v1/pricing</code></li>
<li>Terms of Service: <a href="https://zenblockswp.com/terms" rel="nofollow ugc">https://zenblockswp.com/terms</a></li>
<li>Privacy Policy: <a href="https://zenblockswp.com/privacy" rel="nofollow ugc">https://zenblockswp.com/privacy</a></li>
</ul>
<h4>Icon Libraries (bundled, no external requests)</h4>
This plugin bundles SVG icon data from the following open-source icon libraries. All icon data is included locally within the plugin files — no external HTTP requests are made to any of these services at any time (neither in the editor nor on the frontend). The URLs listed below are the project homepages and license references for attribution purposes only.
<ul>
<li>
Feather Icons — MIT License, by Cole Bemis
<ul>
<li>Website: <a href="https://feathericons.com/" rel="nofollow ugc">https://feathericons.com/</a></li>
<li>License: <a href="https://github.com/feathericons/feather/blob/main/LICENSE" rel="nofollow ugc">https://github.com/feathericons/feather/blob/main/LICENSE</a></li>
</ul>
</li>
<li>
Font Awesome Free — Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT, by Fonticons Inc.
<ul>
<li>Website: <a href="https://fontawesome.com/" rel="nofollow ugc">https://fontawesome.com/</a></li>
<li>License: <a href="https://fontawesome.com/license/free" rel="nofollow ugc">https://fontawesome.com/license/free</a></li>
</ul>
</li>
<li>
Tabler Icons — MIT License, by Paweł Kuna & Tabler Team
<ul>
<li>Website: <a href="https://tabler-icons.io/" rel="nofollow ugc">https://tabler-icons.io/</a></li>
<li>License: <a href="https://github.com/tabler/tabler-icons/blob/main/LICENSE" rel="nofollow ugc">https://github.com/tabler/tabler-icons/blob/main/LICENSE</a></li>
</ul>
</li>
<li>
Heroicons — MIT License, by Tailwind Labs
<ul>
<li>Website: <a href="https://heroicons.com/" rel="nofollow ugc">https://heroicons.com/</a></li>
<li>License: <a href="https://github.com/tailwindlabs/heroicons/blob/master/LICENSE" rel="nofollow ugc">https://github.com/tailwindlabs/heroicons/blob/master/LICENSE</a></li>
</ul>
</li>
<li>
Lucide Icons — ISC License, by Lucide Contributors
<ul>
<li>Website: <a href="https://lucide.dev/" rel="nofollow ugc">https://lucide.dev/</a></li>
<li>License: <a href="https://github.com/lucide-icons/lucide/blob/main/LICENSE" rel="nofollow ugc">https://github.com/lucide-icons/lucide/blob/main/LICENSE</a></li>
</ul>
</li>
<li>
Remix Icon — Apache License 2.0, by Remix Design
<ul>
<li>Website: <a href="https://remixicon.com/" rel="nofollow ugc">https://remixicon.com/</a></li>
<li>License: <a href="https://github.com/Remix-Design/RemixIcon/blob/master/License" rel="nofollow ugc">https://github.com/Remix-Design/RemixIcon/blob/master/License</a></li>
</ul>
</li>
</ul>

ZenBlocks

Custom blocks for the WordPress block editor with responsive controls and advanced button styling.

Freemius

Saleswonder Team: Tobias

Saleswonder Support Team

Style your Contact Form 7 forms visually – no coding required.
Many website owners struggle with Contact Form 7 forms that look generic and don’t match their brand. Creating professional-looking forms usually means either hiring a developer or learning CSS. With WOW Styler for CF7, you get a visual styling interface that lets you design forms directly in your browser—no code, no hassle.
See it in action (1:18 video):
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/maY80TCYVWA?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
The Problem WOW Styler for CF7 Solves
When you have multiple Contact Form 7 forms across your site, each one requires separate styling work. Without WOW Styler for CF7, you’re stuck with:
<ul>
<li>Forms that all look the same, clashing with your brand</li>
<li>Needing CSS knowledge (or hiring someone) to customize each form</li>
<li>Difficulty placing multiple differently styled forms on one page</li>
<li>Page builders that strip out your CSS, breaking your form design</li>
<li>Time wasted rebuilding form styles for every new form you create</li>
</ul>
How WOW Styler for CF7 Works
Create one design. Reuse it everywhere. WOW Styler for CF7 lets you:
<ol>
<li>Style directly in the browser – No CSS editor needed. Visual controls for colors, spacing, buttons, backgrounds, fonts, and more.</li>
<li>See changes instantly – Live preview shows every adjustment in real-time.</li>
<li>Save as reusable styles – Once you’ve styled a form, save it as a scheme and apply it to other forms in seconds.</li>
<li>Adapt for different purposes – Tweak the same base style for different forms (contact, support, sales) on the same page.</li>
</ol>
Why Choose WOW Styler for CF7?
WOW Styler for CF7 is built for users who already use Contact Form 7 and want professional form design without learning CSS or switching to a new plugin. You keep all your existing forms, integrations, and workflows—you just add beautiful styling.
Live preview shows changes as you make them. Split view lets you compare your published form with your draft side by side. The plugin even pulls your theme’s fonts and colors as a starting point, so you only customize what matters.
Works perfectly with all themes, page builders (Elementor, Thrive, Divi, etc.), and modern browsers.
Who Needs This?
One Main Form? The free version is perfect. Style your primary contact, booking, or support form once and you’re done.
Multiple Forms with Different Purposes? The Pro version lets you create individual styles for multiple forms—ideal for:
<ul>
<li>WooCommerce shops – Returns form, support form, invoice questions, feature requests</li>
<li>Agencies & service providers – New client intake, existing client support, project onboarding</li>
<li>SaaS & online courses – Demo requests, bug reports, feature ideas, community feedback</li>
</ul>
Instead of one long, confusing form with complex conditions, each department gets its own clean form with its own styling and tone.
What You Can Style
<ul>
<li>Text: Colors, fonts, sizes, weights, styles</li>
<li>Links: Colors and hover states</li>
<li>Labels: Styling, sizing, weight</li>
<li>Buttons: Text, background, hover effects, shadows, borders</li>
<li>Input fields: Colors, backgrounds, borders, shadows, opacity</li>
<li>Forms: Padding, margins, borders, shadows, background colors</li>
<li>Pro only: Animated GIFs, background images, opacity control, “one per line” checkboxes/radio buttons, special CSS loading for page builders</li>
</ul>
Get Started in 3 Steps
<ol>
<li>Install and activate WOW Styler for CF7</li>
<li>Go to Contact → CF7 Styler in your WordPress admin</li>
<li>Select a form and start styling with the visual interface</li>
</ol>
Free Version vs. Pro
Free: One fully styled form with all basic customizations (colors, fonts, spacing, buttons, backgrounds).
Pro: Multiple forms with individual styles, animated backgrounds, GIF support, and advanced layout options. 14-day free trial included—no credit card required.
Integrate with Your Marketing Stack
Use WOW Styler for CF7 with other WordPress tools:
<ul>
<li>WP2LEADS – Collect form data and send it to your email marketing tool or CRM for automation</li>
<li>WebinarIgnition – Run live and automated webinars on WordPress and invite your best form leads to product demos, trainings, and launch events</li>
</ul>
Forms collect the right people. Webinars close the sales.
Productivity forms + marketing forms
Use WOW Styler Pro to style multiple CF7 forms for quotes, support, contact, HR, and different departments—each with its own inbox and workflow. Then run separate marketing forms with free webinars, lead magnets, and sales automation in WebinarIgnition. Evergreen webinars build a solid information foundation, and live Q&A sessions focus only on high-intent questions that lead to action.
Learn more about WebinarIgnition:
<ul>
<li>Plugin: https://wordpress.org/plugins/webinar-ignition/</li>
<li>Funnel guide: https://webinarignition.com/from-contact-form-to-automated-webinar-funnel-the-smart-path-for-wordpress-sites/</li>
</ul>
Ideal for agencies, course creators, and WooCommerce shops.
<h3>How to Get Started with WOW Styler Free</h3>
Getting started is simple and takes just a few steps:
<ul>
<li>In your WordPress admin, go to Plugins → Add New</li>
<li>Search for “cf7 styler”</li>
<li>Install and activate WOW Styler for CF7</li>
<li>Go to Contact → CF7 Styler</li>
<li>Select one of your Contact Form 7 forms and start styling in the live preview</li>
</ul>
<h3>WOW Styler for CF7 Free Features</h3>
The free version lets you fully style one Contact Form 7 form with these customization options:
<ul>
<li>Text style customization (colors, fonts, sizes)</li>
<li>Font family selection (6 options)</li>
<li>Link colors and hover states</li>
<li>Label color, size, weight, and style</li>
<li>Font style options (Normal, Italic, Oblique, Inherit)</li>
<li>Form padding, margin, and border control</li>
<li>Input field styling (colors, backgrounds, spacing, borders, radius)</li>
<li>Button customization (text, background, hover, shadows)</li>
<li>Style scheme preview</li>
<li>Split view (published vs. draft)</li>
<li>Second column view (styled vs. unstyled comparison)</li>
<li>Duplicate forms in the second column for easy comparison</li>
<li>Default style scheme for all forms</li>
<li>Custom CSS support for advanced users</li>
</ul>
The plugin intelligently uses your theme’s fonts and colors as a starting point, saving you time. Your experience improves with every update.
Need help? Our support team is ready to assist with any questions.
<h3>Quick Use Cases of the Free Version</h3>
You can greatly benefit from WOW Styler for CF7’s core features at no cost:
<ul>
<li>Change colors (text, background, hover) to keep your brand identity</li>
<li>Save different style variations and apply them to different forms</li>
<li>Highlight submit buttons with stronger contrast and hover effects</li>
<li>Make input fields match your unique design</li>
<li>Create a cohesive form design that integrates with your theme</li>
</ul>
<h3>How to Switch to Pro</h3>
If you have an active WP2LEADS Pro license, you unlock all WOW Styler for CF7 Pro features at no extra cost.
Otherwise, enjoy a 14-day free trial of all Pro features. Before the trial ends, we’ll email you with upgrade options.
To upgrade to Pro:
<ul>
<li>Find CF7 Styler in the Contact submenu</li>
<li>Go to the Upgrade section</li>
<li>Choose the Pro package that fits your needs</li>
<li>Complete the purchase directly inside the plugin</li>
<li>Your license activates instantly</li>
<li>You’ll receive your license key, download link, and invoice via email</li>
</ul>
<h3>WOW Styler for CF7 Pro Features</h3>
The Pro version includes all free features plus:
<ul>
<li>Individual styles for multiple forms</li>
<li>Multiple style schemes to switch between and attach to different forms</li>
<li>Checkboxes and radio buttons displayed one per line (instead of inline)</li>
<li>Background images and animated GIFs with opacity control</li>
<li>Advanced background positioning (cover, contain, repeat, positioning)</li>
<li>Load styles in the body tag if your theme or page builder removes CSS from the header</li>
</ul>
<h3>Brilliant Use Cases of WOW Styler for CF7 Pro</h3>
With Pro you can:
<ul>
<li>Give each form its own style (for example, sales form vs. support form)</li>
<li>Place several differently styled forms on one page</li>
<li>Use animated backgrounds for special campaigns</li>
<li>Keep form styles even when a page builder removes header CSS by loading styles via inline tags</li>
</ul>
This is useful for WooCommerce shops, agencies, and SaaS providers with multiple teams and responsibilities.

WOW Styler for CF7 – Visual Styler for Contact Form 7 Forms

Thank you. 
I was looking for a working CF7 Styler Plugin, to avoid manual CSS editing.
However, I found most are not compatible anymore.
They style but do not sent the form anymore. 
So these Plugins are of low usability. 
That is why we (Vlad, Melanie, Tobias) built a Styler that does everything easy and beautifully. 
If something is not working or we missed any function, please write us in the forum. 
Best regards, Tobias

Using and Loving it

Turn ‘just another CF7 form’ into a branded experience across all your forms. WOW Styler for CF7 lets you style multiple Contact Form 7 forms visually …

ZenBlocks vs WOW Styler for CF7 – Visual Styler for Contact Form 7 Forms