Title: Style Contact Form 7
Author: mofis
Published: <strong>2023 年 12 月 1 日</strong>
Last modified: 2026 年 5 月 22 日

---

搜索插件

![](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

 作者：[mofis](https://profiles.wordpress.org/mofistudio/)

[下载](https://downloads.wordpress.org/plugin/customizer-block-cf7.1.4.1.zip)

 * [详情](https://cn.wordpress.org/plugins/customizer-block-cf7/#description)
 * [评价](https://cn.wordpress.org/plugins/customizer-block-cf7/#reviews)
 * [开发进展](https://cn.wordpress.org/plugins/customizer-block-cf7/#developers)

 [支持](https://wordpress.org/support/plugin/customizer-block-cf7/)

## 描述

This Contact Form 7 compatible Gutenberg Block automates CSS style generation, allowing
you to quickly design contact forms with minimal setup.

### Blocks

#### Style Contact Form 7

Design and style Contact Form 7 forms visually in the block editor with live styling
controls.

#### Features

 * Gutenberg Block Integration: Design and customize Contact Form 7 forms directly
   in the block editor with live styling controls.
 * Responsive Design: Forms automatically adapt for desktop, tablet, and mobile 
   devices.
 * Flexible Form Styling: Customize field backgrounds, labels, text, borders, padding,
   and shadows.
 * Improved User Experience: Includes styled validation, error, success, and loading
   states for Contact Form 7 forms.
 * Multilingual support with multiple translations.
 * Comprehensive documentation with video demos.

#### 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/)

## 屏幕截图

 * [[
 * Adding block to Editor Area
 * [[
 * Adjust block margin
 * [[
 * Change background color
 * [[
 * Block border and corners
 * [[
 * Adjust block shadow

## 区块

该插件提供了 1 个区块.

 *   Style Contact Form 7 Style your Contact Form 7 forms with Ease.

## 常见问题

### 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?

While it is not possible to test with every WordPress theme, the plugin has been
tested with 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/)

## 评价

![](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/) 2025 年 3 月 21 日 1 回复

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/) 2024 年 11 月 17 日

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/) 2024 年 10 月 20 日

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/) 2024 年 10 月 8 日 1 回复

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/) 2024 年 10
月 8 日

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/) 2024 年 4 月 22 日

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 🙂

 [ 阅读所有7条评价 ](https://wordpress.org/support/plugin/customizer-block-cf7/reviews/)

## 贡献者及开发者

「Style Contact Form 7」是开源软件。 以下人员对此插件做出了贡献。

贡献者

 *   [ mofis ](https://profiles.wordpress.org/mofistudio/)

「Style Contact Form 7」插件已被翻译至 8 种本地化语言。 感谢[所有译者](https://translate.wordpress.org/projects/wp-plugins/customizer-block-cf7/contributors)
为本插件所做的贡献。

[帮助将「Style Contact Form 7」翻译成简体中文。](https://translate.wordpress.org/projects/wp-plugins/customizer-block-cf7)

### 对开发感兴趣吗?

您可以[浏览代码](https://plugins.trac.wordpress.org/browser/customizer-block-cf7/)，
查看[SVN仓库](https://plugins.svn.wordpress.org/customizer-block-cf7/)，或通过[RSS](https://plugins.trac.wordpress.org/log/customizer-block-cf7/?limit=100&mode=stop_on_copy&format=rss)
订阅[开发日志](https://plugins.trac.wordpress.org/log/customizer-block-cf7/)。

## 更新日志

#### 1.4.1

 * Tested up to WP 7.0
 * Adjusted block icon styling to better match WordPress 7.0 editor UI
 * Improved contact form selection workflow for faster form switching in the editor

#### 1.4

 * Tested up to WP 6.9.4
 * Added instance class to make unique in case of multiple forms
 * Moved messages to popup
 * Adjusted some default css values
 * Centered spinner on button when set to width Auto

#### 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

## 额外信息

 *  版本 **1.4.1**
 *  最后更新：**1 周前**
 *  活跃安装数量 **1,000+**
 *  WordPress 版本 ** 6.0 或更高版本 **
 *  已测试的最高版本为 **7.0**
 *  PHP 版本 ** 7.4 或更高版本 **
 *  语言
 * [Catalan (Valencian)](https://ca-valencia.wordpress.org/plugins/customizer-block-cf7/)、
   [Croatian](https://hr.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/) 和 [Ukrainian](https://uk.wordpress.org/plugins/customizer-block-cf7/).
 *  [翻译成简体中文](https://translate.wordpress.org/projects/wp-plugins/customizer-block-cf7)
 * 标签
 * [cf7](https://cn.wordpress.org/plugins/tags/cf7/)[contact form](https://cn.wordpress.org/plugins/tags/contact-form/)
   [contact form 7](https://cn.wordpress.org/plugins/tags/contact-form-7/)[form styling](https://cn.wordpress.org/plugins/tags/form-styling/)
   [gutenberg](https://cn.wordpress.org/plugins/tags/gutenberg/)
 *  [高级视图](https://cn.wordpress.org/plugins/customizer-block-cf7/advanced/)

## 评级

 4.7 星（最高 5 星）。

 *  [  6 条 5 星评价     ](https://wordpress.org/support/plugin/customizer-block-cf7/reviews/?filter=5)
 *  [  0 条 4 星评价     ](https://wordpress.org/support/plugin/customizer-block-cf7/reviews/?filter=4)
 *  [  1 条 3 星评价     ](https://wordpress.org/support/plugin/customizer-block-cf7/reviews/?filter=3)
 *  [  0 条 2 星评价     ](https://wordpress.org/support/plugin/customizer-block-cf7/reviews/?filter=2)
 *  [  0 条 1 星评价     ](https://wordpress.org/support/plugin/customizer-block-cf7/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/customizer-block-cf7/reviews/#new-post)

[查看全部评论](https://wordpress.org/support/plugin/customizer-block-cf7/reviews/)

## 贡献者

 *   [ mofis ](https://profiles.wordpress.org/mofistudio/)

## 支持

有话要说吗？是否需要帮助？

 [查看支持论坛](https://wordpress.org/support/plugin/customizer-block-cf7/)