Title: Style Contact Form 7 Author: mofis Published: Ахсынньы 1, 2023 Last modified: Муус устар 11, 2025 --- Search plugins ![](https://ps.w.org/customizer-block-cf7/assets/banner-772x250.jpg?rev=3002982) ![](https://ps.w.org/customizer-block-cf7/assets/icon.svg?rev=3002982) # Style Contact Form 7 By [mofis](https://profiles.wordpress.org/mofistudio/) [Download](https://downloads.wordpress.org/plugin/customizer-block-cf7.1.3.zip) * [Details](https://sah.wordpress.org/plugins/customizer-block-cf7/#description) * [Reviews](https://sah.wordpress.org/plugins/customizer-block-cf7/#reviews) * [Development](https://sah.wordpress.org/plugins/customizer-block-cf7/#developers) [Support](https://wordpress.org/support/plugin/customizer-block-cf7/) ## Description This Contact Form 7 compatible Gutenberg Block automates CSS style generation allowing you to quickly design visually appealing contact forms with minimal setup. #### Features * Gutenberg Block Integration: Dive into the future of WordPress design with this plugin’s Gutenberg block compatibility. Design and customize your Contact Form 7 forms directly in the Gutenberg editor, blending ease of use with sophisticated styling options. * Mobile and Tablet Friendly Design: In an era where mobile responsiveness is key, this plugin ensures your contact forms look impeccable on all devices. Enjoy peace of mind knowing your forms are automatically optimized for mobile and tablet users. * Intuitive Styling for Contact Form 7: Unleash your creativity with this user- friendly interface, allowing you to style and modify your contact forms to perfectly align with your website’s theme and branding. * User Experience Focused: This plugin prioritizes your visitors’ interaction experience and guarantees smooth, engaging, and accessible contact forms, enhancing user engagement and increasing the likelihood of form submissions. * Seamless Integration with Contact Form 7: Designed to complement Contact Form 7, this plugin extends its functionality, providing you with the tools to create beautifully styled forms without any hassle or complicated admin panels! * Eye catching default Styling of Contact Form 7 event messages for Invalid fields, Message failed & Message Success. * Multilingual with 15 languages. * Comprehensive documentation with Video demos. * Full list of controls in order from top to bottom: — * BLOCK Settings : Block Sizing, Block Margin, Block Padding, Block Background, Block Shadow. * FORM FIELDS : Field Background, Field Labels (Font Size, Line Height, Text transform, Font Weight, Font Color), Field Text (Font Size, Field Text Color, Placeholder Text Color), Field Padding, Field Border, Field Shadow. * SUBMIT SETTINGS : Submit Background (Solid color or Gradient), Submit Text (Font Size, Text transform, Font Weight, Submit Text Color), Submit Width, Submit Padding, Submit Border, Submit Shadow. #### Docs and support View the [Docs](https://stylecontactform7.com/documentation/), get fast [Support](https://stylecontactform7.com/support/). Popular Questions and Solutions will be posted to the Support Forum & FAQ. #### Required Plugins [Contact Form 7](https://wordpress.org/plugins/contact-form-7/) ## Screenshots * [[ * Adding block to Editor Area * [[ * Adjust block margin * [[ * Change background color * [[ * Block border and corners * [[ * Adjust block shadow ## Blocks This plugin provides 1 block. * Style Contact Form 7 Style your Contact Form 7 forms with Ease. ## FAQ ### What is Contact Form 7? [Contact Form 7](https://wordpress.org/plugins/contact-form-7/) is one of the most popular and widely used WordPress plugins for creating and managing multiple contact forms on a website. ### Will Style Contact Form 7 plugin work with my theme? Obviously it would be impossible to test this with every WordPress theme but it is stable in many themes especially block themes. The demo videos were recorded with Twenty Twenty-Three theme. Feel free to contact [Support](https://stylecontactform7.com/support/) if it is not working as expected. ### I am having issues, can you offer support? Yes, click here for [Support](https://stylecontactform7.com/support/) ## Reviews ![](https://secure.gravatar.com/avatar/d413f5d3364d7eb28dada2f0c8b80f290636f5a632289cae61ac97756edb84b0? s=60&d=retro&r=g) ### 󠀁[overall nice block](https://wordpress.org/support/topic/overall-nice-block/)󠁿 [tfgadmin](https://profiles.wordpress.org/tfgadmin/) Кулун тутар 21, 2025 1 reply Would be OK for simple sites. What it can’t do is break your form field stacks into multiple columns. ![](https://secure.gravatar.com/avatar/bfce52eecd8a4ce320ee62f143b7438e41efaa0ea03414ea83b630c1d47ec19e? s=60&d=retro&r=g) ### 󠀁[Perfect for Customising CF7!](https://wordpress.org/support/topic/perfect-for-customising-cf7/)󠁿 [edmart1n](https://profiles.wordpress.org/edmart1n/) Сэтинньи 17, 2024 This plugin makes it so easy to give Contact Form 7 a fresh, modern look. The styling options are simple yet powerful—highly recommend it! Nice one Mofistudio saved me hours of work. ![](https://secure.gravatar.com/avatar/3e5d4e0648babc86b6a9fac90409a897c8893570d129e0929633bdfa6f12aeb6? s=60&d=retro&r=g) ### 󠀁[A really useful plugin](https://wordpress.org/support/topic/a-really-useful-plugin-9/)󠁿 [qazujm](https://profiles.wordpress.org/qazujm/) Алтынньы 20, 2024 It makes integrating the Contact Form 7 forms into your webpage design so much simpler. This plugin provides many options for styling the forms to suit the look you want. ![](https://secure.gravatar.com/avatar/388deb6f86e26162faa9d52402c153603a028bd0f5b0f5e1c2eb90de3e45cc7c? s=60&d=retro&r=g) ### 󠀁[it looks good](https://wordpress.org/support/topic/it-looks-good-5/)󠁿 [Bjørn Nielsen](https://profiles.wordpress.org/bplndk/) Алтынньы 8, 2024 1 reply Hi, Yes, it looks good… but when using the Classic Editor, it doesn’t work! Otherwise, it looks fine… ![](https://secure.gravatar.com/avatar/068abbf941d4f20bf51757655e271333ae95a2a96ca0fd3f7fa810472b6d22bb? s=60&d=retro&r=g) ### 󠀁[Excellent plugin!](https://wordpress.org/support/topic/excellent-plugin-9343/)󠁿 [Matthew McVarish](https://profiles.wordpress.org/drmatthewmcvarish/) Алтынньы 8, 2024 This plugin makes Contact Form 7 styling so easy, I love it, great design! ![](https://secure.gravatar.com/avatar/b7eef4cbee60fa65d3a0360f862f0d12f34ba7c4eda438ef82f41d233bbbae66? s=60&d=retro&r=g) ### 󠀁[Good addition to CF7!](https://wordpress.org/support/topic/good-addition-to-cf7/)󠁿 [Metasequoia](https://profiles.wordpress.org/metasequoia/) Муус устар 22, 2024 I like the plugin very much. Finally a simple solution to visually enhance the monotonous forms of CF7. And very pleasing: the developer is very easy to contact and responds quickly to comments. Great 🙂 [ Read all 7 reviews ](https://wordpress.org/support/plugin/customizer-block-cf7/reviews/) ## Contributors & Developers “Style Contact Form 7” is open source software. The following people have contributed to this plugin. Contributors * [ mofis ](https://profiles.wordpress.org/mofistudio/) “Style Contact Form 7” has been translated into 7 locales. Thank you to [the translators](https://translate.wordpress.org/projects/wp-plugins/customizer-block-cf7/contributors) for their contributions. [Translate “Style Contact Form 7” into your language.](https://translate.wordpress.org/projects/wp-plugins/customizer-block-cf7) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/customizer-block-cf7/), check out the [SVN repository](https://plugins.svn.wordpress.org/customizer-block-cf7/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/customizer-block-cf7/) by [RSS](https://plugins.trac.wordpress.org/log/customizer-block-cf7/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 1.3 * Tested with WP 6.8 * Updated documentation #### 1.2 * Added new pro demo video. * Moved pro plugin to its own domain : https://stylecontactform7.pro/ * Added 10 new demo pages. #### 1.1.9 * Tested with WP 6.7 * Added background color to invalid fields. * Centered the form loading spinner over submit button and hide button text when active. * Fixed $wrapper_attributes output bug, flagged by plugin check. * Changed default left and right margin for mobile screen size to -0.5 (em). #### 1.1.8 * fixing broken SVG icon links #### 1.1.7 * Added function to auto close the block inspector Panel Body tabs to keep it tidy and aid navigation. * Improved admin page with a new layout, more information and links to new Pro Version. * launched Style Contact Form 7 Pro — https://stylecontactform7.com/pro/ * Added more detailed descriptions of block features in the readme and added demo video. * Translated all new text to 15 languages, Danish, German, English (UK), Spanish( Spain), Finnish, French (France), Croatian, Italian, Dutch, Polish, Portuguese( Portugal) Romanian, Russian, Swedish & Ukrainian. #### 1.1.6 * Set font family and removed some default form styles. * Made the form identical in the editor and the front end. #### 1.1.5 * fix broken admin stylesheet link. #### 1.1.4 * Added 2px padding to ‘outer’ .cfcf7-block-container — this fixes the block overlapping the is_selected blue outline. * Made the admin panel Css more specific to avoid disrupting other blocks admin panels. * Changed Admin Menu title from ‘Style Contact Form 7’ to ‘Style CF7’ to avoid line break. * Added some default gradient color options to the submit button. #### 1.1.3 * Bug fix, Altered ‘wpcf7_contact_form’ post loop as it was overwriting contact forms. #### 1.1.2 * Tested with WordPress 6.6 * Removed ‘margin’ option from Submit Button settings #### 1.1.1 * Changed Plugin display in main PHP file’. * Added styles for contact form validation warnings. * Added ‘New Additions’ link on admin page to https://stylecontactform7.com/new- additions/ where I will document recent upgrades and features. #### 1.1 * Changed Plugin display name and Gutenberg block name to ‘Style Contact form 7’. * Added ‘Requires Plugins:’ header tag (WP 6.5+). * Added fill color to Block Icon background. * Added Top & Bottom negative Margin options to help refine block positioning for Desktop, Tablet & Mobiles screen sizes. #### 1.0.9 * Added styles for Contact Form 7 input fields, (radio, checkbox, number, select), Added margin option to Submit button, Added Gradient option to Submit button. Added field focus outline settings. * Changed Field Border style & Field Border position options to Select inputs instead of Radio buttons. (thanks to @metasequoia for the feedback). #### 1.0.8 * Re-added ‘__experimentalGetPreviewDeviceType’ for > WP 6.5. * Changed Text Transformation & Font Weight options to Select inputs instead of Radio buttons. #### 1.0.7 * Removed ‘__experimentalGetPreviewDeviceType’ as it was causing issues in site editor, using ‘getDeviceType’ instead. #### 1.0.6 * Added post loop to init function to access contact forms. #### 1.0.5 * Added languages (Danish, Dutch, English (UK), Finnish, French, German, Hindi, Italian, Japanese, Norwegian, Polish, Portuguese, Russian, Spanish, Swedish, Ukrainian) #### 1.0.4 * Added Pot file to languages folder * Removed block patterns #### 1.0.3 * updated admin page #### 1.0.2 * moved docs & support to its own domain (stylecontactform7.com) * updated links to docs & support throughout. #### 1.0.1 * bug fix — Undefined variable in block-patterns.php * added default margin values for tablet and mobile. #### 1.0 * Initial release ## Meta * Version **1.3** * Last updated **1 сыл ago** * Active installations **1, 000+** * WordPress version ** 6.0 or higher ** * Tested up to **6.8.5** * PHP version ** 7.4 or higher ** * Languages * [Catalan (Valencian)](https://ca-valencia.wordpress.org/plugins/customizer-block-cf7/), [Danish](https://da.wordpress.org/plugins/customizer-block-cf7/), [English (UK)](https://en-gb.wordpress.org/plugins/customizer-block-cf7/), [English (US)](https://wordpress.org/plugins/customizer-block-cf7/), [Spanish (Chile)](https://cl.wordpress.org/plugins/customizer-block-cf7/), [Spanish (Spain)](https://es.wordpress.org/plugins/customizer-block-cf7/), [Swedish](https://sv.wordpress.org/plugins/customizer-block-cf7/), and [Ukrainian](https://uk.wordpress.org/plugins/customizer-block-cf7/). * [Translate into your language](https://translate.wordpress.org/projects/wp-plugins/customizer-block-cf7) * Tags * [cf7](https://sah.wordpress.org/plugins/tags/cf7/)[contact form 7](https://sah.wordpress.org/plugins/tags/contact-form-7/) [contact form 7 style](https://sah.wordpress.org/plugins/tags/contact-form-7-style/) [contact forms](https://sah.wordpress.org/plugins/tags/contact-forms/) * [Advanced View](https://sah.wordpress.org/plugins/customizer-block-cf7/advanced/) ## Ratings 4.7 out of 5 stars. * [ 6 5-star reviews ](https://wordpress.org/support/plugin/customizer-block-cf7/reviews/?filter=5) * [ 0 4-star reviews ](https://wordpress.org/support/plugin/customizer-block-cf7/reviews/?filter=4) * [ 1 3-star review ](https://wordpress.org/support/plugin/customizer-block-cf7/reviews/?filter=3) * [ 0 2-star reviews ](https://wordpress.org/support/plugin/customizer-block-cf7/reviews/?filter=2) * [ 0 1-star reviews ](https://wordpress.org/support/plugin/customizer-block-cf7/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/customizer-block-cf7/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/customizer-block-cf7/reviews/) ## Contributors * [ mofis ](https://profiles.wordpress.org/mofistudio/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/customizer-block-cf7/)