# Contact Form 7 文档 Contact Form 7 用户文档，介绍表单创建、标签、邮件与常用扩展用法。 # Contact Form 7 联系表单入门 本指南介绍了 WordPress 的 Contact Form 7 插件。需要 WordPress 管理的基本知识。本教程通过各种示例说明了如何在页面上显示表单，以及如何自定义表单和邮件。 #### 显示表格 让我们从在您的页面上显示一个表单开始。首先，打开WordPress 管理屏幕上的联系 > 联系表单菜单。您可以在那里管理多个联系表格。 ![联系表 7 的管理屏幕截图](https://docs.cocobook.com/uploads/images/gallery/2026-10/fnqqmmdp5w2u7fie-8d451.webp)  安装 Contact Form 7 插件后，您将看到一个名为“Contact form 1”的默认表单，以及如下代码： ``` [contact-form-7 id="1234" title="Contact form 1"] ``` 复制此代码。然后，打开您希望在其中放置联系表格的页面（页面 > 所有页面）的编辑菜单。一种流行的做法是为联系表单页面创建一个名为“Contact”的页面。将您复制的代码粘贴到页面内容中。 联系表格 7 5.3及更高版本支持块编辑器的联系表格选择器块。此块允许您简单地从您定义的联系表格列表中选择一个联系表格，而不是复制和粘贴短代码。 ![联系表单选择器块的屏幕截图](https://docs.cocobook.com/uploads/images/gallery/2026-10/cf7-screenshot-4.webp) 联系表单选择器块的屏幕截图   联系表单短代码仍然可用，当您想要[添加自定义属性时](https://contactform7.com/faq/can-i-add-id-and-class-attributes-to-a-form-element/)，或者当您有太多联系表单无法在单个列表中显示时，您会发现它们非常有用。 现在您的联系表格设置已完成。您网站的访问者现在可以找到该表单并开始向您提交消息。 接下来，让我们看看如何自定义表单和邮件内容。 #### 自定义表单 您可能会觉得默认表单对您来说太简单了，并且想要向其中添加更多字段。您可以在[管理屏幕中](https://contactform7.com/admin-screen/)编辑表单模板。 要将字段添加到表单，请为它们制作标签并将它们插入到[“表单”选项卡面板中的表单模板中](https://contactform7.com/editing-form-template/)。您会在表单模板中发现不熟悉的代码，例如\[text\* your-name\]. 这些代码在联系表 7 的词汇表中称为“标签”。 标签的[语法](https://contactform7.com/tag-syntax/#form_tag "标签的工作原理")相当复杂，但别担心！你不必学习它。您可以使用[标签生成器工具](https://contactform7.com/editing-form-template/)生成任意数量的[标签](https://contactform7.com/editing-form-template/)。 标签中的第二个字是它的名字。例如，名称`[text* your-name]`为“您的姓名”。此名称很重要，因为它稍后会在您的邮件模板中使用。 #### 自定义邮件 您可以像使用表单模板一样[在“邮件”选项卡面板中](https://contactform7.com/setting-up-mail/)编辑[邮件](https://contactform7.com/setting-up-mail/)模板。您也可以在那里使用标签，但请注意邮件标签与表单标签不同。 您可以在邮件模板中使用的标签在括号中仅包含一个单词，看起来像\[your-name\]. 您应该知道这个“您的名字”与前面示例中提到的表单标签的名称相同。这两个标签具有相同的名称。 在邮件中，`[your-name]`将被用户的输入值替换，该值通过相应的表单字段提交，在本例中为`[text* your-name]`。 #### 也可以看看 - [管理员画面](https://contactform7.com/admin-screen/ "管理屏幕") - [标签的工作原理](https://contactform7.com/tag-syntax/ "标签的工作原理") - [设置邮件](https://contactform7.com/setting-up-mail/ "设置邮件") # 管理员画面 ![编辑器屏幕截图 1](https://docs.cocobook.com/uploads/images/gallery/2026-10/editor-screen-1.webp)  此联系表的标题 (❶)。此标题只是联系表格的标签，仅用于管理目的。您可以使用任何您喜欢的标题，例如“求职申请表”、“2014/02/14 活动表格”等。 此联系表格的简码 (❷)。复制此代码并将其粘贴到您要放置此联系表单的帖子、页面或文本小部件内容中。 您可以在此处保存、复制或删除此联系表格 (❸)。 #### 表格选项卡 ![编辑器屏幕 2 的屏幕截图](https://docs.cocobook.com/uploads/images/gallery/2026-10/editor-screen-2.webp)  表格编辑栏（❷）。您可以在此处使用 HTML 和[form-tags](https://contactform7.com/tag-syntax/#form_tag)自定义表单内容。此字段中的换行符和空行会自动使用 和 HTML 标记进行格式化。 标签生成器 (❶)。通过使用这些标签生成器，您可以在不了解它们的情况下生成[表单标签](https://contactform7.com/tag-syntax/#form_tag)。 有关表单标签的更多信息，请参阅[编辑表单模板](https://contactform7.com/editing-form-template/)和[标签的工作原理](https://contactform7.com/tag-syntax/)。 #### 邮件标签 ![编辑器屏幕 3 的屏幕截图](https://docs.cocobook.com/uploads/images/gallery/2026-10/editor-screen-3.webp)  您可以编辑作为表单提交结果发送的邮件的邮件模板。您可以在这些字段中使用[邮件标签](https://contactform7.com/tag-syntax/#mail_tag)。 Mail(2)模板是一个附加的邮件模板，它可以具有与主邮件模板不同的内容，也可用。 有关更多信息，请参阅[设置邮件](https://contactform7.com/setting-up-mail/)。 #### 消息选项卡 ![编辑器屏幕 4 的屏幕截图](https://docs.cocobook.com/uploads/images/gallery/2026-10/editor-screen-4.webp)  您可以编辑用于各种情况的消息，包括“发生验证错误”、“请填写必填字段”等。 请注意，此处仅提供纯文本。不允许在消息字段中使用 HTML 标记和实体。 有关更多信息，请参阅[编辑消息](https://contactform7.com/editing-messages/)。 #### 附加设置选项卡 ![编辑器屏幕截图 5](https://docs.cocobook.com/uploads/images/gallery/2026-10/editor-screen-5.webp)  您可以在此处添加自定义代码片段。有关详细信息，请参阅[其他设置](https://contactform7.com/additional-settings/)。 # 标签的工作原理 您可以使用各种类型的标签（用方括号括起来的字符串）来编辑表单和电子邮件的模板。Contact Form 7 为表单模板和电子邮件模板提供了两种不同类型的标签：[form-tags](#form_tag)和[mail-tags](#mail_tag)。 这两种类型的语法完全不同。例如，您`[text* your-name]`在表单模板和`[your-name]`电子邮件模板中使用。 #### 表单标签语法[\#表单标签语法](#form_tag) 表单模板中的标签 (form-tag) 将被替换为 HTML 代码段，该代码段在呈现表单时表示输入字段。表单标签的组件可以分为四部分：类型、名称、选项和值。 ![表单标签示例](https://docs.cocobook.com/uploads/images/gallery/2026-10/kvf6kfjin25qd3hg-97b58.webp)类型是最重要的因素，因为它定义了将替换自己的 HTML 元素的类型，以及期望通过它的输入类型。 名称用于标识输入字段。大多数表单标签都有一个名称，但也有例外。 选项指定行为和外观的细节。选项是可选的。 在大多数情况下，值用于指定默认值。这些值也可能用于其他目的；这取决于标签的类型。值是可选的。 请注意，这些部分的顺序很重要。选项不能在名称之前，值不能在选项之前。 ##### 表单标签类型列表 - [文本字段](https://contactform7.com/text-fields/ "文本字段")（`text`，`text*`，`email`，`email*`，`tel`，`tel*`，`url`，`url*`，`textarea`和`textarea*`） - [数字字段](https://contactform7.com/number-fields/ "数字字段")（`number`，`number*`，`range`和`range*`） - [日期字段](https://contactform7.com/date-field/ "日期字段")（`date`和`date*`） - [复选框，单选按钮，和菜单](https://contactform7.com/checkboxes-radio-buttons-and-menus/ "复选框、单选按钮和菜单")（`checkbox`，`checkbox*`，`radio`，`select`和`select*`） - [文件上传字段](https://contactform7.com/file-uploading-and-attachment/ "文件上传和附件")（`file`和`file*`） - [测验](https://contactform7.com/quiz/ "测验")( `quiz`) - [接受复选框](https://contactform7.com/acceptance-checkbox/ "验收复选框")( `acceptance`) - [提交按钮](https://contactform7.com/submit-button/ "提交按钮")( `submit`) #### 邮件标签语法[\#邮件标签语法](#mail_tag) 邮件模板 (mail-tag) 中的标签要简单得多。邮件标签中只有一个词。在大多数情况下，这个词对应一个表单标签的名称，它会被通过它输入的表单替换。 ![邮件标签示例](https://docs.cocobook.com/uploads/images/gallery/2026-10/rk2eco6dwypchdwv-97b58.webp) # 编辑表单模板 您可以在“[表单”选项卡面板中](https://contactform7.com/admin-screen/)编辑联系表单的表单模板。HTML 和 Contact Form 7 的[表单标签](https://contactform7.com/tag-syntax/)可用于表单模板。 表单标签用作 HTML 表单控件（例如文本输入字段）或一组表单控件（例如一组复选框）的占位符。呈现表单时，表单标签被 HTML 替换。 表单标签必须遵循特定的[语法规则](https://contactform7.com/tag-syntax/)。否则，表单标签将无法正常工作。不过，没有必要记住语法，因为您可以使用标签生成器工具来生成正确的表单标签。 ![](https://docs.cocobook.com/uploads/images/gallery/2026-10/screenshot-form-tab.webp) “表单”选项卡面板的屏幕截图   请注意，表单模板中的更改不会自动反映在联系表单的邮件设置中。因此，如果您已将表单标签添加到表单模板，则需要在“[邮件”](https://contactform7.com/setting-up-mail/)[选项卡面板](https://contactform7.com/setting-up-mail/)中的邮件设置中手动[添加相应](https://contactform7.com/tag-syntax/)的[邮件标签](https://contactform7.com/setting-up-mail/)。 # 设置邮件 您可以非常灵活地编辑电子邮件模板。不仅是邮件正文，您还可以编辑邮件标题字段。如果需要，您甚至可以在消息中使用 HTML。 您可以在“[邮件”选项卡面板](https://contactform7.com/admin-screen/)中编辑电子邮件模板。 ![邮件选项卡的屏幕截图](https://docs.cocobook.com/uploads/images/gallery/2026-10/editor-screen-mail-tab.webp) 邮件标签面板 #### 字段[\#到场](#to-field) 在此处设置收件人电子邮件地址。您可以在此字段中使用[邮件标签](https://contactform7.com/tag-syntax/#mail_tag)。 在有效的邮箱语法中指定值，否则[您将收到配置错误](https://contactform7.com/configuration-errors/invalid-mailbox-syntax/)。 #### 从字段[\#来自外地](#from-field) 在此处设置发件人电子邮件地址。您可以在此字段中使用[邮件标签](https://contactform7.com/tag-syntax/#mail_tag)。 此字段值应该是与网站属于同一域的电子邮件地址。否则[你会得到一个配置错误](https://contactform7.com/configuration-errors/email-not-in-site-domain/)。 #### 主题字段[\#学科领域](#subject-field) 在这里设置消息的主题。您可以在此字段中使用[邮件标签](https://contactform7.com/tag-syntax/#mail_tag)。 #### 附加标题[\#附加标题](#additional-headers) 您可以在此处插入其他消息头字段，[例如 Cc 和 Bcc](https://contactform7.com/adding-cc-bcc-and-other-mail-headers/)。每行应该有一个字段。您可以在这些字段中的任何位置嵌入[邮件标签](https://contactform7.com/tag-syntax/#mail_tag)。 #### 消息正文[\#邮件正文](#message-body) 这是消息体；您可以在该字段的任何位置嵌入[邮件标签](https://contactform7.com/tag-syntax/#mail_tag)。 如果您选中从输出中排除带有空白邮件标签的行复选框，则包含具有空值的邮件标签的行将从实际电子邮件输出的邮件正文中排除。 默认情况下，纯文本用于消息正文。要[使用 HTML](https://en.wikipedia.org/wiki/E-mail_header#Plain_text_and_HTML)，请选中使用 HTML 内容类型复选框。 #### 文件附件[\#文件附件](#file-attachments) 如果您将[上传的文件](https://contactform7.com/file-uploading-and-attachment/)附加到此电子邮件，请将[上传文件的](https://contactform7.com/file-uploading-and-attachment/)[邮件标签](https://contactform7.com/tag-syntax/#mail_tag)放入文件附件字段。您还可以从服务器附加文件（[本地文件附件](https://contactform7.com/file-uploading-and-attachment/#local-file-attachment)）。 #### 邮件 (2) [\#邮件 (2)](#mail-2) 邮件 (2)是一个附加的邮件模板。它通常用作自动回复器，但您可以将其用于任何目的。仅当主邮件已成功发送时才发送邮件 (2)。 #### 也可以看看 - [设置邮件的最佳实践](https://contactform7.com/best-practice-to-set-up-mail/) - [特殊邮件标签](https://contactform7.com/special-mail-tags/) # Editing messages You can edit messages used in various situations in the Messages tab panel. Some messages are notifications to the submitter of the status of the contact form, such as: Thank you for your message. It has been sent.One or more fields have an error. Please check and try again. Other messages are notifications that there is a validation error in the input field: This field is required.This telephone number is invalid. HTML tags or entities cannot be used in a message, so use plain text only. You’ll see a warning when you insert HTML into a message. On the other hand, you can use Contact Form 7’s mail-tags in a message. This may be useful when you want to embed a user input into a message, like the following example: Thanks [your-name], your message has been sent! This [your-name] is a mail-tag that will be replaced with an actual user input through the your-name field. See also Contact form in your language explains how you can get the messages localized. Share this:FacebookTwitterLike this:Like Loading... # 其他设置 您可以通过将特定格式的代码片段添加到联系表单[编辑器屏幕](https://contactform7.com/admin-screen/)的“附加设置”选项卡面板中，为每个联系表单添加附加设置。 默认情况下，Contact Form 7 支持以下类型的设置。 #### 仅限订阅者模式 ``` subscribers_only: true ``` 您可能希望确保只有登录用户才能提交您的联系表单。在这种情况下，请使用仅限订阅者模式。在此模式下，未登录用户无法提交联系表单，并且会看到一条消息，通知他们需要登录，而登录用户可以照常使用。 在仅限订阅者模式下，不会为联系表单提供反垃圾邮件验证，因为只有受欢迎的人才能使用它们。如果此假设不适用于您的站点，则仅限订阅者模式可能不是您的好选择。 #### 演示模式 ``` demo_mode: on ``` 如果您demo\_mode: on在“附加设置”字段中进行设置，则联系表单将处于演示模式。在这种模式下，联系表单将跳过发送邮件的过程，只显示“成功完成”作为响应消息。 #### 跳过邮件 ``` skip_mail: on ``` 该skip\_mail设置的工作方式与 几乎相同demo\_mode，但skip\_mail仅跳过邮件发送。与 不同demo\_mode，skip\_mail不会影响其他活动，例如使用 Flamingo 存储消息。 #### 验收作为验证 ``` acceptance_as_validation: on ``` 默认情况下，接受复选框的行为与其他类型的字段不同；即使未选中该框，它也不会显示验证错误消息。如果您acceptance\_as\_validation: on在“其他设置”字段中进行设置，则联系表单中的接受复选框的行为方式与其他表单字段相同。 有关详细信息，请参阅[接受复选框](https://contactform7.com/acceptance-checkbox/)。 #### 火烈鸟设置 您可以自定义[Flamingo](https://contactform7.com/save-submitted-messages-with-flamingo/)管理屏幕中显示的主题和发件人字段值。有关更多详细信息，请参阅[使用 Flamingo 保存提交的消息](https://contactform7.com/save-submitted-messages-with-flamingo/)。 #### 抑制消息存储 ``` do_not_store: true ``` 此设置告诉消息存储模块，例如 Flamingo，不要通过此联系表单存储消息。 #### JavaScript 代码 ``` on_sent_ok: "alert('sent ok');" on_submit: "alert('submit');" ``` 如果设置on\_sent\_ok:后跟一行 JavaScript 代码，则可以告诉联系表单邮件发送成功时应执行的代码。同样，使用on\_submit:，您可以告诉在提交表单时应该执行的代码，而不管结果如何。 另请参阅：[使用 Google Analytics 跟踪表单提交](https://contactform7.com/tracking-form-submissions-with-google-analytics/)并[在提交后重定向到另一个 URL](https://contactform7.com/redirecting-to-another-url-after-submissions/) **注意： `on_sent_ok`并`on_submit`已从联系表 7 5.0 中正式删除。您可以使用[DOM 事件](https://contactform7.com/dom-events/)代替这些设置。** # 与外部 API 集成 这个联系表单插件的内置功能是有限的，但是，在各种外部服务的帮助下，您的联系表单的可能性是无限的。 您可以在 联系 > 集成 中管理与外部 API 的集成。列出了多个类别的服务。如果您对这些服务感兴趣，请访问他们的说明页面以了解更多信息。 - [Sendinblue 集成](https://contactform7.com/sendinblue-integration/) - [Constant Contact 集成](https://contactform7.com/constant-contact-integration/) - [Stripe 集成](https://contactform7.com/stripe-integration/) - [reCAPTCHA (v3)](https://contactform7.com/recaptcha/) # 文本字段 文本输入字段是联系表单中最常见的因素。您可能知道，HTML 有两种类型的文本输入字段元素：用于单行输入；和多行输入。 Contact Form 7 提供了几种类型的[表单标签](https://contactform7.com/tag-syntax/#form_tag)来表示这两种类型的 HTML 元素：[文本字段](#text)（text和text\*）；[电子邮件字段](#email)（email和email\*）；[电话号码字段](#tel)（tel和tel\*）；[URL 字段](#url)（url和url\*）；和[文本区域](#textarea)（textarea和textarea\*）。在本文中，我将向您展示有关这些表单标签的用法和语义的详细信息。 #### 文本域 两个text和text\*用于单行输入和接受任何形式的文字。它们之间的区别在于表示text\*必填字段。在联系表格 7 的约定中，所有类型的带有星号“\*”的标签表示这些都是必填字段。
选项例子描述
id:（ID）id:fooidinput元素的属性值。
class:（班级）class:barclassinput元素的属性值。要设置两个或更多类，您可以使用多个class:选项，例如\[text your-text class:y2008 class:m01 class:d01\].
minlength:(数量)minlength:10此输入字段允许[的最小长度](https://contactform7.com/max-min-length-options-and-character-count/)。
maxlength:(数量)maxlength:90此输入字段允许[的最大长度](https://contactform7.com/max-min-length-options-and-character-count/)。
size:(数量)size:50size此输入字段的HTML 属性值。
akismet:author[使用 Akismet 的选项。](https://contactform7.com/spam-filtering-with-akismet/)
placeholder watermark将该值用作[占位符文本](https://contactform7.com/setting-placeholder-text/)而不是默认值。watermark作为 的别名工作placeholder。
default:user\_login default:user\_first\_name default:user\_last\_name default:user\_nickname default:user\_display\_name[用于检索登录用户信息作为字段默认值的选项。](https://contactform7.com/setting-default-values-to-the-logged-in-user/)
这些字段的值可以为零或一，该值将用作输入字段的默认值。 例子： ``` [text* your-name class:required "John Smith"] ``` #### 电子邮件字段 这两个email和email\*是单行输入，只接受电子邮件地址。email\*是必填字段。
选项例子描述
id:（ID）id:fooidinput元素的属性值。
class:（班级）class:barclassinput元素的属性值。要设置两个或更多类，您可以使用多个class:选项，例如\[email your-email class:y2008 class:m01 class:d01\].
minlength:(数量)minlength:10此输入字段允许[的最小长度](https://contactform7.com/max-min-length-options-and-character-count/)。
maxlength:(数量)maxlength:90此输入字段允许[的最大长度](https://contactform7.com/max-min-length-options-and-character-count/)。
size:(数量)size:50size此输入字段的HTML 属性值。
akismet:author\_email[使用 Akismet 的选项。](https://contactform7.com/spam-filtering-with-akismet/)
placeholder watermark将该值用作[占位符文本](https://contactform7.com/setting-placeholder-text/)而不是默认值。watermark作为 的别名工作placeholder。
default:user\_email[用于检索登录用户信息作为字段默认值的选项。](https://contactform7.com/setting-default-values-to-the-logged-in-user/)
这些字段的值可以为零或一，该值将用作输入字段的默认值。 例子： ``` [email your-email "example@example.com"] ``` #### 网址字段 这两个url和url\*是单行输入，只接受URL。url\*是必填字段。
选项例子描述
id:（ID）id:fooidinput元素的属性值。
class:（班级）class:barclassinput元素的属性值。要设置两个或更多类，您可以使用多个class:选项，例如\[url your-url class:y2008 class:m01 class:d01\].
minlength:(数量)minlength:10此输入字段允许[的最小长度](https://contactform7.com/max-min-length-options-and-character-count/)。
maxlength:(数量)maxlength:90此输入字段允许[的最大长度](https://contactform7.com/max-min-length-options-and-character-count/)。
size:(数量)size:50size此输入字段的HTML 属性值。
akismet:author\_url[使用 Akismet 的选项。](https://contactform7.com/spam-filtering-with-akismet/)
placeholder watermark将该值用作[占位符文本](https://contactform7.com/setting-placeholder-text/)而不是默认值。watermark作为 的别名工作placeholder。
default:user\_url[用于检索登录用户信息作为字段默认值的选项。](https://contactform7.com/setting-default-values-to-the-logged-in-user/)
这些字段的值可以为零或一，该值将用作输入字段的默认值。 例子： ``` [url your-url "http://example.com"] ``` #### 电话号码字段 这两个tel和tel\*是单行输入，只接受电话号码。tel\*是必填字段。
选项例子描述
id:（ID）id:fooidinput元素的属性值。
class:（班级）class:barclassinput元素的属性值。要设置两个或更多类，您可以使用多个class:选项，例如\[url your-url class:y2008 class:m01 class:d01\].
minlength:(数量)minlength:10此输入字段允许[的最小长度](https://contactform7.com/max-min-length-options-and-character-count/)。
maxlength:(数量)maxlength:90此输入字段允许[的最大长度](https://contactform7.com/max-min-length-options-and-character-count/)。
size:(数量)size:50size此输入字段的HTML 属性值。
placeholder watermark将该值用作[占位符文本](https://contactform7.com/setting-placeholder-text/)而不是默认值。watermark作为 的别名工作placeholder。
这些字段的值可以为零或一，该值将用作输入字段的默认值。 例子： ``` [tel your-tel "123-456-7890"] ``` #### 文本区 这两个textarea和textarea\*是一个多行输入和接受任何形式的文本。textarea\*是必填字段。
选项例子描述
id:（ID）id:fooidtextarea元素的属性值。
class:（班级）class:barclasstextarea元素的属性值。要设置两个或更多类，您可以使用多个class:选项，例如\[textarea your-text class:y2008 class:m01 class:d01\].
minlength:(数量)minlength:10此输入字段允许[的最小长度](https://contactform7.com/max-min-length-options-and-character-count/)。
maxlength:(数量)maxlength:90此输入字段允许[的最大长度](https://contactform7.com/max-min-length-options-and-character-count/)。
placeholder watermark将该值用作[占位符文本](https://contactform7.com/setting-placeholder-text/)而不是默认值。watermark作为 的别名工作placeholder。
这些字段可以有零个或一个值，该值将用作输入字段的默认值。 例子： ``` [textarea your-message "your message here …"] ``` 还有另一种方法可以为 textarea 字段设置默认值： ``` [textarea your-message] foo bar [/textarea] ``` 通过这种方式，您可以设置多行默认值。 #### 演示 注意：这是一个演示。这种形式实际上不发送邮件。 ![](https://docs.cocobook.com/uploads/images/gallery/2026-10/screenshot2021-12-27-14-29-46.webp)  查看上述表格的来源： ``` 您的姓名（必填） [text* your-name size:30 maxlength:60] 您的邮箱（必填） [email* your-email "yourmail@example.com"] 您的留言 [textarea your-message] default value for a textarea can be multi-line like this [/textarea] [submit "发送"] ``` # Number fields A number field is a field for numeric value input. Contact Form 7 3.4 and higher provides two types of form-tag for number fields: number and range. These work the same except that they provide different types of user interface. The new form-tag types, number and range, correspond with the HTML5 input types number and range, respectively. Currently, only some modern browsers support these input types. Even among modern browsers, there may be differences in how those input fields are rendered on screen. In most cases, a number input is rendered as a spinner control while a range input is rendered as a slider control. Older browsers and some modern browsers don’t support these input types and just render them as traditional text input fields. Number field#Number field Both number and number\* are used for number input and accept numeric value. number\* is a required field. OptionExamplesDescriptionmin:(num)min:10min attribute value of the input element. Allowed minimum value for this field.max:(num)max:99max attribute value of the input element. Allowed maximum value for this field.step:(num)step:3step attribute value of the input element. When minimum number is 10 and step is 3, acceptable inputs are 10, 13, 16, 19, …id:(id)id:fooid attribute value of the input element.class:(class)class:barclass attribute value of the input element. To set two or more classes, you can use multiple class: option, like [number your-text class:y2008 class:m01 class:d01].placeholderwatermark Use the value as placeholder text instead of as default value. watermark works as an alias of placeholder These fields can have a zero or one value, and the value will be used as the default value of the input field. Example: [number\* your-number min:10 max:99 step:3 class:required "40"] Range field#Range field Both range and range\* are used for number input and accept numeric value. range\* is a required field. OptionExamplesDescriptionmin:(num)min:10min attribute value of the input element. Allowed minimum value for this field.max:(num)max:99max attribute value of the input element. Allowed maximum value for this field.step:(num)step:3step attribute value of the input element. When minimum number is 10 and step is 3, acceptable inputs are 10, 13, 16, 19, …id:(id)id:fooid attribute value of the input element.class:(class)class:barclass attribute value of the input element. To set two or more classes, you can use multiple class: option, like [number your-text class:y2008 class:m01 class:d01].placeholderwatermark Use the value as placeholder text instead of as default value. watermark works as an alias of placeholder These fields can have a zero or one value, and the value will be used as the default value of the input field. Example: [range\* your-range min:10 max:99 step:3 class:required "40"] Share this:FacebookTwitterLike this:Like Loading... # Date field HTML5 has introduced date input type. Browsers supporting this input type render a date field as a calendar-style date picker UI that you choose a date from. Contact Form 7 supports date and date\* types of form-tag that correspond with date input type. Currently, only some modern browsers support this date input type. Older browsers and some modern browsers including Firefox don’t support this input type and just render it as a traditional text input field. Fortunately, Contact Form 7 can provide a fallback for those browsers. If a value is specified in a date field, the value must be in YYYY-MM-DD format (e.g. 2013-04-08) according to the HTML5 specification. This is in most cases you don’t need to care about because browser’s date picker UI will set a value in the correct format. OptionExamplesDescriptionmin:(date)min:2013-01-01min attribute value of the input element. Allowed minimum value for this field. You can use a relative date format as well.max:(date)max:2013-12-31max attribute value of the input element. Allowed maximum value for this field. You can use a relative date format as well.step:(num)step:3step attribute value of the input element. When minimum date is 2013-01-01 and step is 3, acceptable inputs are 2013-01-01, 2013-01-04, 2013-01-07, …id:(id)id:fooid attribute value of the input element.class:(class)class:barclass attribute value of the input element. To set two or more classes, you can use multiple class: option, like [date your-date class:y2008 class:m01 class:d01].placeholderwatermark Use the value as placeholder text instead of as default value. watermark works as an alias of placeholder These fields can have a zero or one value, and the value will be used as the default value of the input field. Example: [date\* your-date min:2013-01-01 max:2013-12-31 step:7 class:required "2013-04-01"] Specifying a date with relative date formats#Specifying a date with relative date formats As well as YYYY-MM-DD format, you can use relative date formats to specify a date used in a date or date\* form-tag. Contact Form 7 5.3 and later allows you to use all date formats that the DateTimeImmutable class supports. Using this technique, you can specify a date with natural expressions—such as “next Friday”, seen in the following example form-tag: [date date-123 "next Friday"] When you use date formats in a form-tag option, be aware that you are not allowed to use a space in an option value (as a space is used as the delimiter for options) and that you need to use an underscore (\_) as substitute for a space. For example: [date date-123 max:next\_Friday+7days "next Friday"] Format date value in mail#Format date value in mail As previously explained, if a value is specified in a date field, the value must be in YYYY-MM-DD format (e.g. 2013-04-08). When the value is inserted into mail template, the date format keeps by default. To change the format in mail, you can use a variant of mail-tag notation [\_format\_{field name} "{date format}"]. Example: [\_format\_your-date "D, d M y"] D, d, M, and y in the above example are date format character described in the manual page of PHP date() function. "D, d M y" will format 2013-04-08 as Mon, 08 Apr 13. As the format is affected by localization, with the same "D, d M y" format, 2013-04-08 will become 月, 08 4月 13 in Japanese-localized WordPress. Share this:FacebookTwitterLike this:Like Loading... # Checkboxes, radio buttons, and menus Contact Form 7 provides several types of form-tags for representing checkboxes, radio buttons, and drop-down menus. This article explains about the usage and semantics of these form-tags. Checkboxes and radio buttons#Checkboxes and radio buttons Both checkbox and checkbox\* represent a group of checkboxes ( in HTML). checkbox\* requires the user to select at least one of the boxes. radio represents a group of radio buttons ( in HTML). Because a group of radio buttons is naturally required, a radio form-tag works as a required field. It is advised to preselect an option in a radio button group using the default:1 option. OptionExamplesDescriptionid:(id)id:fooid attribute value of the wrapper element.class:(class)class:barclass attribute value of the wrapper element. To set two or more classes, you can use multiple class: option.default:(num)default:2default:1\_2\_3Preselected options. The integer following default: is the position in the order of items. 1 is the first one. If you want to make two or more items selected, joint integers with underbar (\_), as default:1\_2\_3.label\_first By default, a checkbox or a radio button are put first, and a label last. By adding label\_first option, you can reverse them.use\_label\_element Wrap each checkbox and radio button with tag.exclusive Make checkboxes exclusive. This means, when you select a checkbox in a group, others will be cleared, so the group accepts the zero-selected or one-selected state only. This is a JavaScript gimmick so doesn’t work without JavaScript. radio form-tags don’t support this option.free\_text Append a free input text field to the last item.data:(name)data:countriesGet the values from Listo. These types of tags have one or more values, and the values will be used as the values and labels of the checkboxes or radio buttons. Example: [checkbox your-country "China" "India" "San Marino"] Drop-down menus#Drop-down menus Both select and select\* represent a drop-down menu ( in HTML). select\* requires the user to select at least one option from the menu. OptionExamplesDescriptionid:(id)id:fooid attribute value of the select element.class:(class)class:barclass attribute value of the select element. To set two or more classes, you can use multiple class: option.default:(num)default:2default:1\_2\_3Preselected options. The integer following default: is the position in the order of items. 1 is the first one. If you want to make two or more items selected, joint integers with underbar (\_), as default:1\_2\_3.multiple Make the drop-down menu multi-selectable.include\_blank Insert a blank item into the top of options of this drop-down menu.first\_as\_label Use the first value as a label.data:(name)data:countriesGet the values from Listo. These types of tags have one or more values, and the values will be used as options in the drop-down menu. Example: [select your-country "China" "India" "San Marino"] See also Selectable recipient with pipesCustom layout for checkboxes and radio buttons Demo#Demo Note: This is a demo form and it doesn’t send an email practically. Select Country (required) ChinaIndiaSan Marino Select Sports FootballTennisPole-vault Select Fruit (required) AppleBananaGrape Select Browser (required) ---FirefoxSafariOperaLynx Select Ghkdsjdf fsdfsklgjfkvdrie Δ View source of the preceding form:Select Country (required) [checkbox\* your-country use\_label\_element "China" "India" "San Marino"] Select Sports [radio your-sports label\_first default:2 "Football" "Tennis" "Pole-vault"] Select Fruit (required) [checkbox\* your-fruit exclusive "Apple" "Banana" "Grape"] Select Browser (required) [select\* your-browser include\_blank "Firefox" "Safari" "Opera" "Lynx"] Select Ghkdsjdf [select your-ghkdsjdf multiple "fsdfs" "klgjfk" "vdrie"] [submit "Send"] Share this:FacebookTwitterLike this:Like Loading... # File uploading and attachment In this post, I will explain the file uploading and attachment feature of Contact Form 7. With this feature, you can allow your users to upload their files via your form, and then an email with attachments of the files is sent to you. To set up, two steps are needed: 1) Add file uploading fields in your form, 2) Set up your mail settings to attach the uploaded files. The two steps will be explained in the rest of this post. Adding file uploading fields in your form#Adding file uploading fields in your form Like for other types of form fields, Contact Form 7 provides form-tags for file uploading fields ( in HTML): file and file\*. file\* is a required field and requires the user to upload a file. OptionExamplesDescriptionid:(id)id:fooid attribute value of the input element.class:(class)class:barclass attribute value of the input element. To set two or more classes, you can use multiple class: option, like [file your-file class:y2008 class:m01 class:d01].filetypes:(filetypes)filetypes:gif|png|jpg|jpegAcceptable file types. List the file extensions after filetypes:, and separate them with ‘|’ (pipe) character when you set multiple file types.limit:(num)limit:1048576limit:1024kblimit:1mbLimit the max file size acceptable. You can use kb (kilo byte) or mb (mega byte) suffix optionally. If you omit suffix, the number means bytes. Note that you can’t use a decimal point in it (i.e., like this: [file your-file limit:1.5mb]) and it will be ignored if it exists. Example: [file your-file filetypes:pdf|txt limit:2mb] Contact Form 7 applies default restrictions for file type and file size when you do not set the filetypes: and limit: (file size) options explicitly. Default acceptable file types (extensions) are: jpg, jpeg, png, gif, pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav, and wmv. Default acceptable file size is 1 MB (1048576 bytes). Setting up file attachments with an email#Setting up file attachments with an email To attach the uploaded files to the mail, put mail-tags corresponding to form-tags for file uploading fields into File attachments field in the Mail tab panel like shown below: Screenshot of File Attachment field In this example, the form-tag for the file uploading field is: [file your-file filetypes:pdf] Therefore, the corresponding mail-tag to this is: [your-file] Note that what you put in the File attachments field is [your-file] (mail-tag), not [file your-file filetypes:pdf] (this is not a mail-tag but a form-tag). If you have multiple files uploaded and want to attach them into an email, simply line the mail-tags up in the File attachments field like this: [your-file][your-another-file] How tags work Local file attachment#Local file attachment Contact Form 7 supports local file attachment. You can put local file paths in the File attachments field and those files will be attached to the email as well as uploaded files. Put a file path per line. When the path is not an absolute path, it will be treated as a relative path to the wp-content directory. For security reasons, specifying files outside of the wp-content directory for email attachments is not allowed, so place the files in the wp-content or its subdirectory. Example: [your-file][your-another-file] uploads/2013/08/08/boringguide.pdf How your uploaded files are managed#How your uploaded files are managed After a user uploads a file through your contact form, Contact Form 7 checks to see if: 1.) Any PHP errors have occurred; 2.) the file type and file size are valid; and then, if the check turns out okay, Contact Form 7 moves the uploaded file to a temporary folder. At this point, Contact Form 7 attaches the file to the mail and sends it. After these procedures, Contact Form 7 then removes the file from the temporary folder. The location of the temporary folder is wp-content/uploads/wpcf7\_uploads by default. It may differ if you have changed upload path setting from wp-content/uploads. This folder is created automatically, but sometimes it can fail. The most possible reason for this is that the parent folder doesn’t have sufficient writing permissions. In such cases, you can change the permissions or create a folder manually. You can customize this directory path by defining the WPCF7\_UPLOADS\_TMP\_DIR constant like the following: define( 'WPCF7\_UPLOADS\_TMP\_DIR', 'your-custom-tmp-dir' ); You can set the constant value to an absolute directory path or a relative path to the WordPress content directory (WP\_CONTENT\_DIR). Be aware that, even in cases where you set it to an absolute directory path, you can only specify a directory that is located under the content directory. Otherwise, the constant will be ignored. Share this:FacebookTwitterLike this:Like Loading... # Really Simple CAPTCHA [Edit: 2015-09-17] Contact Form 7 4.3 and later recommend reCAPTCHA instead of Really Simple CAPTCHA. For more details, see Contact Form 7 4.3. Contact Form 7 allows you to insert a CAPTCHA into your contact form to prevent bots from submitting forms. Contact Form 7 utilizes Really Simple CAPTCHA as its officially-sanctioned CAPTCHA module, so you will need to install the Really Simple CAPTCHA plugin before you use CAPTCHA in your form. The rest of this article will explain how to use CAPTCHA with Contact Form 7, based on the assumption that you have already installed Really Simple CAPTCHA. Before using CAPTCHA#Before using CAPTCHA Really Simple CAPTCHA requires that GD and FreeType PHP libraries be installed on your server in order to create CAPTCHA images. If you are not certain if they are installed, ask your server administrator. Contact Form 7 creates a temporary folder and stores any CAPTCHA files there. In most cases, the location of the temporary folder is wp-content/uploads/wpcf7\_captcha, but it can be different depending on your settings. This folder is created automatically, but sometimes it can fail. A possible cause for this is that the parent folder doesn’t have sufficient writing permissions. In such cases, you can change the permissions or create a folder manually. How to use CAPTCHA#How to use CAPTCHA To add a CAPTCHA into your contact form, you must utilize captchac and captchar form tags. captchac means CAPTCHA-Challenge and it represents an ![]() element for a CAPTCHA image. captchar means CAPTCHA-Response and it represents an element for a response input field. A captchac tag must always be paired with a captchar tag with the same name. For example, tags shown below are valid: [captchac captcha-1] [captchar captcha-1] But these are invalid because they have different names. In this case, the CAPTCHA and its response do not match: [captchac captcha-2] [captchar captcha-3] CAPTCHA-Challenge#CAPTCHA-Challenge captchac means CAPTCHA-Challenge and it represents a CAPTCHA image (![]() in HTML). OptionExamplesDescriptionid:(id)id:fooid attribute value of the img element.class:(class)class:barclass attribute value of the img element. To set two or more classes, you can use multiple class: option, like [captchac your-captcha class:y2008 class:m01 class:d01].size:(sml)size:sImage size. Only size:s (60×20), size:m (72×24) and size:l (84×28) are available.fg:#(hex)fg:#ff0000Foreground color of the image. Put RGB color code in hex format after fg:#.bg:#(hex)bg:#00ffffBackground color of the image. Put RGB color code in hex format after bg:#. Example: [captchac your-captcha size:s fg:#ffffff bg:#000000] CAPTCHA-Response#CAPTCHA-Response captchar means CAPTCHA-Response and it represents a response input field ( in HTML). OptionExamplesDescriptionid:(id)id:fooid attribute value of the input element.class:(class)class:barclass attribute value of the input element. To set two or more classes, you can use multiple class: option, like [captchar your-captcha class:y2008 class:m01 class:d01]. Example: [captchar your-captcha] Demo#Demo Note: This is a demo. This form doesn’t send a mail practically. 1) Default Input this code: 2) Small size, inverted Input this code: 3) Large size, green text Input this code: Δ View source of above form: 1) Default Input this code: [captchac captcha-170] [captchar captcha-170 4/4] 2) Small size, inverted Input this code: [captchac captcha-778 size:s fg:#ffffff bg:#000000] [captchar captcha-778 4/4] 3) Large size, green text Input this code: [captchac captcha-118 size:l fg:#00ff00 bg:#ffffff] [captchar captcha-118 4/4] [submit "Send"] Share this:FacebookTwitterLike this:Like Loading... # Acceptance checkbox An acceptance checkbox is a simple checkbox dedicated to confirming the submitter’s consent for a specific condition. Contact Form 7 provides the acceptance form-tag type to represent acceptance checkboxes. To use an acceptance checkbox in your contact form, simply insert an [acceptance] form-tag into the Form tab panel field like this: [acceptance your-consent] I consent to the conditions. [/acceptance] Notice that, unlike other form-tag types, the [acceptance] tag has a closing tag ([/acceptance]) at the tail. The part between the opening and closing tags is the content of the form-tag. When you set content to an acceptance checkbox form-tag, it is interpreted as the condition for consent. If you use Flamingo to store submission data to the database, the information about submitters’ consent will also be stored, and Flamingo allows you to do future reference. By default, an acceptance checkbox works as a required field, so you can’t submit the form without selecting the checkbox. If you set the optional option explicitly, the checkbox works as an optional field. If you set the invert option, it will invert the behavior so, in this case, you can’t submit the form without clearing the checkbox. OptionExamplesDescriptionid:(id)id:fooid attribute value of the input element.class:(class)class:barclass attribute value of the input element. To set two or more classes, you can use multiple class: option, like [acceptance accept-this class:y2008 class:m01 class:d01].optional The acceptance checkbox works as an optional field.invert Allow users to submit only if they clear the checkbox.default:on The checkbox is selected by default. Demo Note: This is a demo. This form doesn’t send a mail practically. 1) Default Check here if you accept these terms. 2) Inverted Uncheck here if you accept these terms. 3) Selected by default + Inverted Uncheck here if you accept these terms. Δ View source of the preceding form: 1) Default [acceptance accept-this-1] Check here if you accept these terms. [/acceptance] 2) Inverted [acceptance accept-this-2 invert] Uncheck here if you accept these terms. [/acceptance] 3) Selected by default + Inverted [acceptance accept-this-3 invert default:on] Uncheck here if you accept these terms. [/acceptance] [submit "Send"] Acceptance as validation#Acceptance as validation By default, an acceptance checkbox is a different mechanism than general input validation, and it runs after all validation succeeds. You might want to change this behavior to make it work like other validation because you think it’s less confusing for submitters than the default behavior. In such cases, add this line to the Additional Settings section: acceptance\_as\_validation: on This setting makes all acceptance checkboxes in the form work like validation, and shows the usual validation error message next to the checkbox if the submitter doesn’t check the box. See also How to make privacy-friendly contact forms Share this:FacebookTwitterLike this:Like Loading... # Hidden field A hidden field is a special input field whose value is sent with a form submission like other fields, but the field itself is not rendered and invisible on the front end. Contact Form 7 supports the hidden form-tag type to represent hidden fields. OptionExamplesDescriptionid:(id)id:fooid attribute value of the input element.class:(class)class:barclass attribute value of the input element. To set two or more classes, you can use multiple class: option, like [hidden your-text class:y2008 class:m01 class:d01].default:(source)  Getting default values from the context Setting default values to the logged-in user Getting default values from shortcode attributes Example: [hidden your-email default:user\_email "example@example.com"] Share this:FacebookTwitterLike this:Like Loading... # Submit button A submit button is an essential component of a form. As you may know, HTML represents a submit button as an input element with submit type: . You can use this HTML tag in a contact form of Contact Form 7, but you should use Contact Form 7’s own submit form-tag instead. This is the simplest form of submit tag: [submit] You can add a value like this: [submit "Send Mail"] Did you notice that the submit tag’s syntax is bit different than other form-tags? The submit tag does not have name part, which other form tags have. In addition to this, you can add several options to submit tag. OptionExamplesDescriptionid:(id)id:fooid attribute value of the input element.class:(class)class:barclass attribute value of the input element. To set two or more classes, you can use multiple class: option, like [submit class:y2008 class:m01 class:d01]. Example: [submit class:button id:form-submit "Send Mail"] Share this:FacebookTwitterLike this:Like Loading... # Max & min length options and character count Contact Form 7 4.1 has introduced maxlength and minlength options to some form-tags, and a new type of form-tag for a Twitter-like character count. Maxlength & minlength options#Maxlength & minlength options Maxlength and minlength are based on the HTML5 attributes of the same names that specify the maximum and minimum length allowed for input fields. Form-tag types that support both maxlength and minlength are: text, textarea, email, url, tel, quiz, and captchar (CAPTCHA Response). These form-tags (except quiz and captchar) also support user input validation based on character length. Example: [textarea\* your-message minlength:10 maxlength:140] With the textarea form-tag in this example, you will see a validation error message if your input is shorter than 10 characters or longer than 140 characters. However, most browsers block you from typing beyond the maxlength limit. The old format for maxlength (such as [textarea\* your-message 40/140]) is still available, but an explicit maxlength option (if set) will override it. Character count#Character count You may want a character count for an input field with the maxlength option, which tells how many characters you have typed, or you can type into the field, up to the limit of the maxlength. To add a character count, insert a count form-tag into your form. count only works as a placeholder for a character count (integer). Note that the tag has to have the same name as the targeted input field. For example, if you have this field (name = “your-message”): [textarea\* your-message minlength:10 maxlength:140] and want a character count for the field, add [count your-message]: [textarea\* your-message minlength:10 maxlength:140] [count your-message] By default, count displays the character count in the targeted field, so its integer value increases as you type. You can also reverse this to make it display the character count remaining up to the maxlength of the targeted field. To do so, add a down option into the count form-tag: [textarea\* your-message minlength:10 maxlength:140] [count your-message down] In this case, count shows “140” at first, decreasing as you type; when you have typed 140 characters, it will show “0”. Demo#Demo 0 140 Δ View source of above form: [textarea\* your-message minlength:10 maxlength:140] [count your-message] [textarea\* your-message-2 minlength:10 maxlength:140] [count your-message-2 down] Share this:FacebookTwitterLike this:Like Loading... # Setting placeholder text Placeholder text is descriptive text displayed inside an input field until the field is filled. It disappears when you start typing in the field. Placeholder text is commonly used in current user interfaces so you have probably seen it before. To set placeholder text in a field in your form, you only need to add a placeholder option and a text value to the form-tag representing the field. [text your-name placeholder "Your name here"] Δ You can use the placeholder option in the following types of form tags: text, email, url, tel, textarea, number, range, date, and captchar. The placeholder text you set in the form tag is output into HTML as the value of the placeholder attribute in the input field. For legacy browsers that don’t support HTML5’s placeholder attribute, Contact Form 7 also provides JavaScript-based placeholder implementation. The placeholder option is available on Contact Form 7 3.4 and higher. Users of older versions can still use watermark instead of placeholder. In Contact Form 7 3.4 and higher, watermark is treated as an alias of placeholder so you don’t need to change watermark to placeholder when you update the plugin. Share this:FacebookTwitterLike this:Like Loading... # Getting default values from the context The default value of an input field is usually derived from the form-tag’s value part. It is, however, possible to get the default values from the context within which the form is placed. To do this, add default:{source} option to the form-tag from which you want to derive the default value. Available data sources are: get (HTTP GET variables), post (HTTP POST variables), and post\_meta (custom fields). Logged-in user information is also available. For example, you have a field with a name “your-name”: [text\* your-name] To get the default value from HTTP GET variables, add default:get option to the form-tag: [text\* your-name default:get] The field will obtain its default value from the GET variable with the same name (“your-name”). Try this by accessing the URL of the page of the form with an additional query string: http://example.com/contact/?your-name=John+Smith If it works correctly, you should see “John Smith” in the field. Using the same logic, the custom field value is used for the default value of the field if: you have default:post\_meta option in the form-tag; and the page containing the form has a custom field named “your-name”. But what if you have two or more default options in a single form-tag? Let’s consider this form-tag’s case: [text\* your-name default:get default:post\_meta "Your Name"] This form-tag has two default options and a value “Your Name”. The options are evaluated from the first to the last. In this example, default:get is evaluated first. If the “your-name” GET variable has a value, it will be used for the default value. If that value is empty, default:post\_meta will be evaluated next. If both of these options do not have values, “Your Name” will be used. Share this:FacebookTwitterLike this:Like Loading... # Setting default values to the logged-in user You may need to create a contact form targeted at users with accounts on your WordPress site. You already have basic information about the user (name, e-mail, etc.) so asking users for this would be redundant. You can set the logged-in user’s information as the default value by adding several options to a text field. OptionDescriptiondefault:user\_loginUser’s login namedefault:user\_emailUser’s email addressdefault:user\_urlUser’s site URLdefault:user\_first\_nameUser’s first namedefault:user\_last\_nameUser’s last namedefault:user\_nicknameUser’s nicknamedefault:user\_display\_nameUser’s display name Example: Your Name: [text\* your-name default:user\_display\_name] Your E-mail: [email\* your-email default:user\_email] Users who are logged in will notice that the basic information is already completed. Share this:FacebookTwitterLike this:Like Loading... # Getting default values from shortcode attributes Sometimes you may feel that it would be useful if you could use values from [contact-form-7 ...] shortcode attributes. In such cases, you can use the default:shortcode\_attr form-tag option, which retrieves the field default value from shortcode attributes. For example, let’s say you have a field named “destination-email” for the destination email address: [email\* destination-email] To get the default value from shortcode attributes, add the default:shortcode\_attr option to the form-tag: [email\* destination-email default:shortcode\_attr] Then, add an attribute with the same name as the field (“destination-email” in this case) into the shortcode for the contact form: [contact-form-7 id="123" title="Contact Form" destination-email="xxxxxx@example.com"] Is that all? Unfortunately, no; there is a necessary extra step. Normally, a WordPress shortcode only takes predefined attributes, so you need to register the attribute beforehand. Add the following code snippet to your theme’s functions.php file: add\_filter( 'shortcode\_atts\_wpcf7', 'custom\_shortcode\_atts\_wpcf7\_filter', 10, 3 ); function custom\_shortcode\_atts\_wpcf7\_filter( $out, $pairs, $atts ) { $my\_attr = 'destination-email'; if ( isset( $atts[$my\_attr] ) ) { $out[$my\_attr] = $atts[$my\_attr]; } return $out; } That’s all! You’ll see “xxxxxx@example.com” input in the field. Share this:FacebookTwitterLike this:Like Loading... # Sendinblue 集成 **披露：这篇文章的作者是 Sendinblue 的附属机构，这意味着如果您决定通过插件作者的链接进行购买，插件作者将获得佣金，您无需支付任何费用。**[![Sendinblue 标志](https://docs.cocobook.com/uploads/images/gallery/2026-10/5cf83d25b40c6.webp)](https://www.sendinblue.com/?tap_a=50905-b26a4f&tap_s=1031580-b1bb1d)  在欧洲领先的 CRM 和电子邮件营销平台[Sendinblue](https://www.sendinblue.com/?tap_a=30591-fb13f0&tap_s=1031580-b1bb1d)上存储和组织您的联系人，同时保护用户隐私。Sendinblue 提供无限的联系方式和高级营销功能。 1. [连接到 API](#connecting-to-the-api) 2. [设置您的联系表格](#setting-up-your-contact-forms) 3. [联系人属性-表单字段映射](#contact-attribute-form-field-mapping) 4. [隐私考虑](#privacy-considerations) #### 连接到 API 此集成模块使用 Sendinblue API (v3)。要访问 API，您需要一个 Sendinblue 帐户。如果您还没有，请先[创建一个免费帐户](https://www.sendinblue.com/pricing/?tap_a=30591-fb13f0&tap_s=1031580-b1bb1d)。您可以随时升级帐户。 创建帐户后，登录 Sendinblue 仪表板并导航到[SMTP & API](https://account.sendinblue.com/advanced/api?tap_a=30591-fb13f0&tap_s=1031580-b1bb1d)页面。你会在那里找到你的 v3 API 密钥。这个密钥在下一步中使用，所以现在复制它。 ![“SMTP & API”页面的屏幕截图](https://docs.cocobook.com/uploads/images/gallery/2026-10/cf7-screenshot-5.webp) “SMTP & API”页面的屏幕截图   然后打开一个新的浏览器选项卡并登录到您的 WordPress 仪表板。导航到联系人 > 集成菜单页面，然后单击Sendinblue 框中的设置集成。您会在那里找到一个输入字段。将 API 密钥粘贴到该字段中，然后单击Save changes。 ![集成页面的屏幕截图](https://docs.cocobook.com/uploads/images/gallery/2026-10/cf7-screenshot-6.webp) 集成页面的屏幕截图   现在 Sendinblue API 可通过您的联系表格获得。下一步是设置每个联系表格。 #### 设置您的联系表格 激活 Sendinblue API 后，您将在[联系表单编辑器屏幕中](https://contactform7.com/admin-screen/)找到一个新创建的选项卡。使用这个Sendinblue选项卡面板，您可以控制这个集成模块的两个主要功能：联系人列表和欢迎电子邮件。 ![Sendinblue 选项卡面板的屏幕截图](https://docs.cocobook.com/uploads/images/gallery/2026-10/cf7-screenshot-7.webp) Sendinblue 选项卡面板的屏幕截图   如果选中“联系人列表”复选框，则提交者将在提交联系表单后添加到您的联系人列表中。您还可以指明联系人将添加到哪些[列表](https://my.sendinblue.com/lists?tap_a=30591-fb13f0&tap_s=1031580-b1bb1d)中。 如果选中欢迎电子邮件复选框，联系表 7 将向新联系人发送欢迎电子邮件。仅当提交者成功添加到联系人列表时才会发送欢迎电子邮件。 欢迎电子邮件使用 Sendinblue 的[电子邮件模板](https://my.sendinblue.com/camp/lists/template?tap_a=30591-fb13f0&tap_s=1031580-b1bb1d)系统，可让您撰写完全个性化、优雅的 HTML 电子邮件。此外，电子邮件是通过 Sendinblue 可靠的 SMTP 基础设施传送的，这使您可以在发送后跟踪电子邮件的状态。 注意：联系表 7 仅使用 Sendinblue 的 SMTP 作为新联系人的欢迎电子邮件。欢迎电子邮件以外的电子邮件使用 WordPress 的内置wp\_mail()功能。如果您想对 WordPress 上的每封电子邮件使用 Sendinblue 的 SMTP，请安装[Sendinblue 的官方 WordPress 插件](https://wordpress.org/plugins/mailin/)。 #### 联系人属性-表单字段映射 Sendinblue 的联系人数据由四个基本属性（EMAIL、FIRSTNAME、LASTNAME 和 SMS）和用户定义的附加属性组成。当您根据表单提交创建新联系人时，将从用户输入值中检索这些联系人属性。 例如，从“您的电子邮件”字段中检索 EMAIL 属性。以同样的方式，从名称包含[“your-”前缀](https://contactform7.com/faq/why-do-field-names-start-with-your/)+小写的属性名称的表单字段中检索属性。 此外，FIRSTNAME 和 LASTNAME 有一个特殊的映射规则。对于表单不包含“您的名字”或“您的姓氏”字段而是包含“您的姓名”字段的情况，“您的姓名”字段值的第一个单词用于 FIRSTNAME 属性，其余部分用于 LASTNAME 属性。因此，例如，如果在“您的姓名”字段中输入“文森特·梵高”，则 FIRSTNAME 将是“Vincent”，而 LASTNAME 将是“van Gogh”。 另请注意，[必须将](https://developers.sendinblue.com/reference#createcontact)SMS 属性值[指定为具有正确国家/地区代码的国际电话号码](https://developers.sendinblue.com/reference#createcontact)（例如：+91xxxxxxxxxx 或 0091xxxxxxxxxx）。如果您有 SMS 的输入字段并且用户输入的格式不正确，则创建联系人的 API 请求将失败。 [电子邮件模板中使用](https://help.sendinblue.com/hc/en-us/articles/360000268730-Using-Sendinblue-s-New-Template-Language-to-create-email-templates-and-campaigns-NEW-?tap_a=30591-fb13f0&tap_s=1031580-b1bb1d)的[参数](https://help.sendinblue.com/hc/en-us/articles/360000268730-Using-Sendinblue-s-New-Template-Language-to-create-email-templates-and-campaigns-NEW-?tap_a=30591-fb13f0&tap_s=1031580-b1bb1d)遵循相同的映射规则。如果您{{ params.SIZE }}的电子邮件模板中有占位符，则“您的大小”字段值将替换电子邮件中的占位符。 最后，您可以使用wpcf7\_sendinblue\_collect\_parameters过滤器钩子自定义整个映射。 #### 隐私考虑 强烈建议您在将他们的个人数据添加到您的联系人列表之前获得表单提交者的明确同意。未经同意收集个人数据不仅是非法的，而且如果将电子邮件发送给非预期的接收者，也可能导致垃圾邮件投诉率很高。 联系表格 7 提供了consent\_for:sendinblue表单标签选项来检查提交者的同意，下面提供了一个例子： ``` [acceptance your-consent optional consent_for:sendinblue] It's OK to add me to your contact list. [/acceptance] ``` 如果您的联系表单中有此表单标记（[接受复选框](https://contactform7.com/acceptance-checkbox/)），则仅当提交者选中该复选框以确认他们的同意时，联系表单 7 才会将联系数据发送到 Sendinblue API。 # reCAPTCHA (v3) 验证码 [reCAPTCHA](https://www.google.com/recaptcha/intro/v3.html)保护您免受垃圾邮件和其他类型的自动滥用。使用 Contact Form 7 的 reCAPTCHA 集成模块，您可以阻止垃圾邮件机器人提交的滥用表单。 reCAPTCHA API 的最新版本是 v3。联系表格 7 5.1 及更高版本使用此 reCAPTCHA v3 API。reCAPTCHA v3 在后台运行，因此用户无需阅读图像中的模糊文本，甚至无需勾选“我不是机器人”复选框。 注意： reCAPTCHA v3 的 API 密钥与 v2 的不同；v2 的密钥不适用于 v3 API。您需要再次注册您的站点以获取 v3 的新密钥。 如果您使用的是旧版本的 Contact Form 7，并且正在寻找有关 v2 API 的 reCAPTCHA 模块的信息，请参阅[reCAPTCHA (v2)](https://contactform7.com/recaptcha-v2/)。 #### 注册网站 要开始使用 reCAPTCHA，您首先需要注册 WordPress 站点。reCAPTCHA 是 Google 的服务，因此您需要一个 Google 帐户才能使用它。使用该帐户登录 Google，然后转到[我的 reCAPTCHA](https://www.google.com/recaptcha/admin)页面。您将看到一个简单的注册表，如下所示： ![我的 reCAPTCHA 页面的屏幕截图](https://docs.cocobook.com/uploads/images/gallery/2026-10/screenshot-recaptcha-1-991x1024.webp) 我的 reCAPTCHA 页面 从类型选项中选择reCAPTCHA v3，然后在域字段中输入网站的域。 注册网站后，您将获得该网站的站点密钥和秘密密钥。 ![reCAPTCHA 站点详细信息的屏幕截图，包括站点密钥和密钥](https://docs.cocobook.com/uploads/images/gallery/2026-10/screenshot-recaptcha-2-1024x355.webp) 网站详情 接下来，移至 WordPress 管理屏幕并打开联系人 > 集成菜单页面。 ![集成菜单页面的屏幕截图](https://docs.cocobook.com/uploads/images/gallery/2026-10/screenshot-recaptcha-3-1024x608.webp) 集成菜单页面 您将在那里看到一个名为reCAPTCHA的框。单击框中的设置集成。它将显示输入字段Site Key和Secret Key。将您在上一步中收到的两个密钥复制粘贴到字段中，然后点击保存更改。 ![输入 API 密钥后集成页面的屏幕截图](https://docs.cocobook.com/uploads/images/gallery/2026-10/screenshot-recaptcha-4-1024x622.webp) 输入 API 密钥 现在，您的联系表单使用 reCAPTCHA 的分数来验证表单提交是来自人类还是垃圾邮件机器人。 reCAPTCHA v3 不需要验证码小部件（reCAPTCHA v2 中使用的“我不是机器人”复选框）即可工作，因此\[recaptcha\]不再需要表单标签。如果\[recaptcha\]在表单模板中找到表单标签，Contact Form 7 5.1 或更高版本将忽略它们并用空字符串替换它们。 #### 也可以看看 - [reCAPTCHA v3 常见问题](https://contactform7.com/faq-about-recaptcha-v3/) # Constant Contact 集成 **披露：此说明的作者是常联系会员，这意味着如果您决定通过插件作者的链接进行购买，插件作者将获得佣金，您无需支付任何费用。**Constant Contact 集成模块允许您将通过您的联系表格收集的联系数据发送到 Constant Contact API。您可以通过几个简单的步骤创建可靠的电子邮件订阅服务。 您需要一个[Constant Contact](https://constant-contact.evyy.net/c/1293104/205991/3411)用户帐户才能使用此集成。如果您还没有帐户，请先[注册](https://constant-contact.evyy.net/c/1293104/205991/3411)以创建一个帐户，然后再继续。 - [连接到 API](#connecting-to-the-api) - [联系人属性映射](#contact-properties-mapping) - [获得同意](#obtaining-consent) - [指定联系人列表](#contact-lists) #### 连接到 API [\#连接到 API](#connecting-to-the-api) 此集成模块使用 Constant Contact V3 API。要从您的 WordPress 网站开始使用 API，您首先需要注册一个应用程序以获取稍后将使用的 API 密钥和应用程序机密。 要注册应用程序，请移至[app.constantcontact.com 上](https://constant-contact.evyy.net/c/1293104/518422/3411)的“[我的应用程序”页面，](https://constant-contact.evyy.net/c/1293104/518422/3411)然后单击右上角的“新建应用程序”按钮。 系统会要求您提供应用程序名称。您可以随时更改名称，所以暂时将其命名为“Contact Form 7 Integration for (your site title) ”。 ![Constant Contact 新应用模式的截图](https://docs.cocobook.com/uploads/images/gallery/2026-10/screenshot-constant-contact-new-app-1024x544.webp) 新建应用程序模式对话框 单击保存，然后您将被定向到详细信息页面。 ![详情页面截图](https://docs.cocobook.com/uploads/images/gallery/2026-10/screenshot-constant-contact-app-details-1024x518.webp) 详情页面 在详细信息页面上，您将在第一个字段中找到API 密钥。单击API Key字段旁边的Generate Secret按钮以生成应用程序密钥。复制 API 密钥和应用程序机密，因为您将在下一步中使用它们。 ![App Secret 模态对话框的屏幕截图](https://docs.cocobook.com/uploads/images/gallery/2026-10/screenshot-constant-contact-app-secret-1024x530.webp) App Secret 模态对话框 接下来，在浏览器的另一个选项卡中打开 WordPress 网站的管理屏幕。移动到Contact > Integration菜单页面，找到一个名为Constant Contact的框。 ![WordPress 管理屏幕截图（联系 > 集成菜单）](https://docs.cocobook.com/uploads/images/gallery/2026-10/screenshot-constant-contact-wp-admin-screen-1024x740.webp) 联系 > 集成菜单页面 单击设置集成按钮；它将显示一些输入字段。将您在上一步中复制的字符串粘贴到API Key和App Secret字段中。 ![联系人 > 集成菜单页面的屏幕截图](https://docs.cocobook.com/uploads/images/gallery/2026-10/screenshot-constant-contact-integration-box-1024x768.webp) 设置集成 您将在两个字段下找到Redirect URI只读字段。复制此字段值并将其粘贴到[app.constantcontact.com](https://constant-contact.evyy.net/c/1293104/518422/3411)上“详细信息”页面上的“重定向 URI”字段中。 ![app.constantcontact.com 上详细信息页面的屏幕截图](https://docs.cocobook.com/uploads/images/gallery/2026-10/screenshot-constant-contact-details-page-2-1024x555.webp) 粘贴重定向 URI 后的详细信息页面 在“详细信息”页面上更改字段值后，单击右上角的“保存”按钮。 现在，您几乎完成了必要的设置。返回WordPress 管理屏幕中的Contact > Integration菜单页面，然后单击Connect to the Constant Contact API按钮开始授权过程。 ![Connect to the Constant Contact API 按钮的屏幕截图](https://docs.cocobook.com/uploads/images/gallery/2026-10/screenshot-constant-contact-start-auth-1024x780.webp) 连接到 Constant Contact API 按钮 如果您已正确设置所有内容，您将被定向到 Constant Contact 登录页面（如果您尚未登录），并会被要求授权您注册的应用程序以访问您的 Constant Contact 帐户. ![授权屏幕截图](https://docs.cocobook.com/uploads/images/gallery/2026-10/screenshot-constant-contact-oauth2-1024x827.webp) 授权画面 之后，您将被重定向回 WordPress，并发现框的边框颜色已更改为蓝色。蓝色边框表示已成功创建与 API 的连接。 ![授权后的Constant Contact Integration框截图](https://docs.cocobook.com/uploads/images/gallery/2026-10/screenshot-constant-contact-auth-completed-1024x757.webp) 授权完成 #### 联系人属性映射[\#联系人属性映射](#contact-properties-mapping) 现在，您的联系表单和 Constant Contact API 已连接。 每次收到有效的表单提交时，Contact Form 7 都会向 Constant Contact API 发送一个请求，让 Constant Contact 根据提交将联系人数据添加到其数据库中。 Constant Contact的联系人数据由不同类型的属性组成，例如名字、姓氏、电子邮件地址、电话号码、职位、生日等。要构建对API的请求，Contact Form 7需要知道哪个输入字段联系表的哪个属性对应Constant Contact的联系数据的哪个属性。 Contact Form 7 使用以下基于名称的映射表来确定输入字段和联系人属性之间的对应关系。例如，如果\[email\* your-email\]表单中有form-tag (name: your-email)，则通过该字段的值将用于email\_address联系人的属性。
表单字段名称联系物业
your-first-namefirst\_name
your-last-namelast\_name
your-namefirst\_name和last\_name(\*1)
your-emailemail\_address
your-job-titlejob\_title
your-company-namecompany\_name
your-birthday-monthbirthday\_month
your-birthday-daybirthday\_day
your-birthdaybirthday\_month和birthday\_day(\*2)
your-anniversaryanniversary
your-phone-numberphone\_numbers
your-address-streetstreet\_addresses.street
your-address-citystreet\_addresses.city
your-address-statestreet\_addresses.state
your-address-postal-codestreet\_addresses.postal\_code
your-address-countrystreet\_addresses.country
\*1 — 如果表单中没有your-first-nameoryour-last-name字段但有一个your-name字段，则your-name字段值的第一个单词将用于first\_name联系属性，其余的将用于last\_name属性。 \*2 — 如果表单中没有your-birthday-month和your-birthday-day字段，但有your-birthday一个日期值为 YYYY-MM-DD 格式的字段，则该值的月和日部分将分别用于birthday\_month和birthday\_day联系人属性。 在某些情况下，您可能觉得此映射不适合您的实际表单字段。对于这种情况，Contact Form 7 提供了wpcf7\_constant\_contact\_contact\_post\_request\_builder过滤器钩子。虽然它需要一些 PHP 编码来创建过滤器功能，但您可以使用此过滤器自定义联系人创建请求中的任何内容。 #### 获得同意[\#获得同意](#obtaining-consent) 强烈建议您在将联系人数据添加到订阅列表之前获得联系表单提交者的明确同意。这不仅是因为未经同意收集和使用个人数据是非法的。这也是因为将电子邮件发送给非预期接收者会导致垃圾邮件投诉率很高。 对于检查提交者是否同意将其联系数据添加到 Constant Contact 订阅列表的表单字段，Contact Form 7 提供了consent\_for:constant\_contactform-tag 选项。您可以使用以下示例中的选项： ``` [接受您的同意可选consent_for:constant_contact] 将我添加到 Constant Contact 订阅列表。 [/验收] ``` 如果您的联系表单中有此表单标签（[接受复选框](https://contactform7.com/acceptance-checkbox/)），则仅当提交者选中该复选框以确认他们的同意时，Contact Form 7 才会将联系数据发送到 Constant Contact API。 #### 指定联系人列表[\#指定联系人列表](#contact-lists) Constant Contact 允许您将收集到的联系人数据分组到联系人列表（也称为“电子邮件列表”或简称“列表”）中。 ![描述如何管理联系人列表的 Constant Contact 仪表板的屏幕截图。](https://docs.cocobook.com/uploads/images/gallery/2026-10/cf7-screenshot-2.webp) 常联系列表管理页面 Contact Form 7 的 Constant Contact Integration 支持为通过您的联系表格收集的新联系人指定联系人列表。 如果您还没有联系人列表，请转至“ [Constant Contact”仪表板](https://app.constantcontact.com/pages/contacts/ui#lists)并尝试创建您的第一个列表。然后，返回 WordPress 管理屏幕。在[联系表单编辑器屏幕中](https://contactform7.com/admin-screen/)，您会发现在那里添加了Constant Contact选项卡面板。在此选项卡面板中，如果您想通过此联系人表单向联系人列表添加新联系人，请选中联系人列表复选框，然后选择联系人列表。 ![Constant Contact 选项卡面板的屏幕截图](https://docs.cocobook.com/uploads/images/gallery/2026-10/cf7-screenshot-3.webp) 恒定接触选项卡面板 # Stripe 集成 Contact Form 7 的 Stripe 集成模块允许您将信用卡支付小工具添加到您的联系表格中。您可以通过简单的步骤开始收款。使用此模块无需额外费用。 您需要一个 Stripe 帐户才能集成。如果您还没有，请先[创建一个帐户](https://dashboard.stripe.com/register)。另外，请注意您需要一个支持 HTTPS 的站点才能使用此模块。 #### 连接到 API [\#连接到 API](#connecting-to-the-api) 该模块使用[Stripe Elements 和 Stripe.js](https://stripe.com/docs/stripe-js)，并与 Stripe API 交互工作。要开始使用它，请先获取您的 API 密钥。 1. 登录到 Stripe 仪表板。 2. 转到[开发人员 > API 密钥](https://dashboard.stripe.com/apikeys)。 3. 复制实时模式的可发布密钥和秘密密钥。 然后，打开另一个浏览器选项卡并按照以下步骤操作： 1. 登录到 WordPress 仪表板。 2. 转到联系 > 集成。 3. 单击Stripe面板中的设置集成。 4. 将可发布密钥和密钥粘贴到面板的输入字段中。 5. 单击保存更改。 就这样。如果 API 与您的网站之间的连接已成功建立，您将在 Stripe 面板的边框周围看到蓝线。 #### 设置您的联系表格[\#设置您的联系表格](#setting-up-your-contact-forms) 与 API 建立连接后，下一步是通过为 Stripe 支付小工具添加[表单标签](https://contactform7.com/tag-syntax/#form_tag)来设置联系表单。 ![Stripe 支付小部件的屏幕截图](https://docs.cocobook.com/uploads/images/gallery/2026-10/cf7-screenshot-1.webp) Stripe 支付小部件的屏幕截图 联系表格 7 为\[stripe\]支付小部件提供了表单标签。以下是\[stripe\]form-tag的示例： ``` [stripe currency:usd amount:700 "Proceed to checkout" "Pay 7 USD"] ``` 一个\[stripe\]表单标签由两个选项和两个值组成。 该currency选项表示付款货币。该值必须是[Stripe 支持](https://stripe.com/docs/currencies)的[三字母货币代码](https://stripe.com/docs/currencies)。 该amount选项是支付的金额。请注意，金额必须以货币的最小单位提供。例如，USD 的最小单位是 1 cent（不是 1 美元），所以currency:usd amount:700在上面的例子中会收取 7 美元（不是 700 美元）。 Stripe 对某些货币的收费金额有稍微复杂的规则。强烈建议您查阅[Stripe 的文档](https://stripe.com/docs/currencies)。 下面两个值（"Proceed to checkout"和"Pay 7 USD"上面例子中）是可选的，如果你设置了它们，它们将用作提交按钮的标签文本；第一个将在初始提交阶段使用，第二个将分别用于二级阶段。 由于\[stripe\]表单标签包含一个提交按钮，因此您不需要在同一表单中使用另一个提交按钮。如果您在付款表单中有[\[submit\]表单标签](https://contactform7.com/submit-button/)，则可以安全地将其删除。 付款完成后，将向买家发送收据电子邮件。默认情况下，“您的电子邮件”字段用于获取买家的电子邮件地址，因此建议在表单中包含“您的电子邮件”字段。 另一个有用的提示：向[电子邮件模板](https://contactform7.com/setting-up-mail/)添加一个[特殊的邮件标签](https://contactform7.com/special-mail-tags/) 。这将被一个指向 Stripe 付款页面的 URL 链接取代，您可以在其中获取有关付款的详细信息。\[\_stripe\_payment\_link\] #### 安全考虑[\#安全考虑](#security-considerations) 付款表格是诈骗者极具吸引力的目标。使用 Contact Form 7 提供的安全模块保护您的表单。至少，[reCAPTCHA](https://contactform7.com/recaptcha/)是支付表单的必备条件。也建议一起使用[Akismet](https://contactform7.com/spam-filtering-with-akismet/)。 不幸的是，一些骗子仍有可能通过严格的安全措施偷偷摸摸。Stripe 提供了可靠的[解决方案](https://stripe.com/docs/radar)和[手册，](https://stripe.com/docs/disputes)您可以在付款表格遭到滥用时使用。 # Spam filtering with Akismet Spammers target everything and your contact forms are no exception. Contact Form 7 provides several spam protection modules; we recommend utilizing different types in combination. Akismet is a powerful anti-spam service provided by Automattic that protects your contact forms. Spam filtering with Akismet forms the centerpiece of our spam prevention strategy. Activating Akismet#Activating Akismet The first step is to activate the Akismet plugin. Since the plugin package of Akismet is bundled with WordPress, there is no need to manually install it. Move to the Plugins menu and simply activate the plugin titled Akismet Anti-Spam. You need an API key to use Akismet. If you use it on a personal blog, you can get an API key for free. For corporate or commercial sites, paid subscriptions are available. For people considering the paid subscriptions, we recommend Jetpack “Personal” or upper plans. Jetpack is the total solution package for WordPress and is provided by the same company as Akismet. In addition to Jetpack’s wide variety of features, the “Personal” and upper plans include an Akismet subscription that is equivalent to the Akismet “Plus” plan. Deploying Akismet in a contact form#Deploying Akismet in a contact form The primary purpose of Akismet is to protect WordPress comment forms. To use Akismet to protect Contact Form 7, you need to give specific options to input fields (form-tags). There are three Akismet-related options: akismet:author You give this option to the field where submitters input their names. Example: [text\* your-name akismet:author] akismet:author\_email You give this option to the field where submitters input their email addresses. Example: [email\* your-email akismet:author\_email] akismet:author\_url You give this option to the field where submitters input the URL of their websites. Example: [text your-url akismet:author\_url] To deploy Akismet in a contact form, use one or more of these options in the form. To get accurate results, you are advised to use as many options as possible. Where Akismet is deployed, Contact Form 7 sends data to Akismet when a user submits the form. The data are composed of all user inputs (not only the fields with an akismet:\* option) and variables from the environments. Akismet will verify the data to respond with a “spam” or “ham” answer. If a “spam” answer is the response, Contact Form 7 will suspend the email and show a message saying, “There was an error trying to send your message,” surrounded by an orange border. Testing the spam filtering#Testing the spam filtering To test if the spam filtering is working correctly, try inputting “viagra-test-123” into the name (akismet:author) field or “akismet-guaranteed-spam@example.com” into the email (akismet:author\_email) field, and submitting the form. With these magic words reserved for testing, Akismet must return a “spam” response. If it is working as expected, you’ll see an orange-bordered error message. Reporting false detection#Reporting false detection Automated spam filtering cannot be 100% accurate. False positives (ham incorrectly classified as spam) and false negatives (spam incorrectly classified as ham) will exist. When you find messages are treated incorrectly by Akismet, you can report the false detection. Akismet learns from the information you report, and the accuracy of the spam filtering algorithm will be improved. To report false detections to Akismet, you need the Flamingo plugin activated because Contact Form 7 doesn’t come with the ability to store submission data into the database. You can view messages through contact forms in the Flamingo > Inbound Messages menu. Normal messages are in the Inbox list, and spam messages are in the Spam list. When you find a message in the Inbox list that should have been marked as spam, open the message and change the Status to Spam. Flamingo automatically sends a false negative report to the Akismet API. Likewise, change the status to Not Spam when you find a normal message in the Spam list. Flamingo properly reports false positives to Akismet. Share this:FacebookTwitterLike this:Like Loading... # Restricting access to the administration panel In its default settings, Contact Form 7 allows all users except subscriber users to have access to the administration panel; but allows only administrator and editor users to edit contact forms. You might feel that you would want to change this setting to restrict access even more, so I will show you how to do this in this article. For example, let’s change access to allow only administrator users access and editing rights. You can do this by editing your wp-config.php and inserting these lines: define( 'WPCF7\_ADMIN\_READ\_CAPABILITY', 'manage\_options' ); define( 'WPCF7\_ADMIN\_READ\_WRITE\_CAPABILITY', 'manage\_options' ); WPCF7\_ADMIN\_READ\_CAPABILITY holds the minimum capability required for access to the administration panel, while WPCF7\_ADMIN\_READ\_WRITE\_CAPABILITY holds the minimum capability required for editing contact forms. Obviously WPCF7\_ADMIN\_READ\_WRITE\_CAPABILITY should be stricter than WPCF7\_ADMIN\_READ\_CAPABILITY, as you cannot edit contact forms without accessing the administration panel. manage\_options is a capability that normally only administrator users have. So setting manage\_options to both WPCF7\_ADMIN\_READ\_CAPABILITY and WPCF7\_ADMIN\_READ\_WRITE\_CAPABILITY allows only those administrator users access and editing rights. You can set any capabilities you wish to these constants to fine-tune the restrictions. If you want to learn further about WordPress’ Roles and Capabilities concepts, and to learn more about what capabilities are available, check WordPress support document. Share this:FacebookTwitterLike this:Like Loading... # Custom layout for checkboxes and radio buttons In its default settings, Contact Form 7 renders checkboxes and radio buttons as inline boxes. You can customize this using some form-tag options and simple CSS. Reversing checkbox-label order By default, Contact Form 7 renders a checkbox in front of its label like the following: You can reverse this order by adding label\_first option to the checkbox tag. [checkbox your-cb label\_first "Option 1" "Option 2" "Option 3"] Rendering checkboxes as block instead of original inline To render checkboxes as block boxes, add a line of CSS style rule to your theme’s stylesheet: 1span.wpcf7-list-item { display: block; } Rendering checkboxes as a table To render checkboxes as a table, add these CSS style rules to your theme’s stylesheet: 12span.wpcf7-list-item { display: table-row; }span.wpcf7-list-item \* { display: table-cell; } (Combined with label\_first option) See also Checkboxes, radio buttons and menusStyling contact form Share this:FacebookTwitterLike this:Like Loading... # Loading JavaScript and stylesheet only when it is necessary In its default settings, Contact Form 7 loads its JavaScript and CSS stylesheet on every page. You might think it would be redundant or wasteful, and want to load them only on those pages that contain contact forms. I understand the feeling, but there is a technical difficulty for a plugin in knowing whether the page contains contact forms or not at the start of loading. However, I can show you a way to work around that. Step 1: Stop loading the JavaScript and CSS stylesheet on all pages When the value of WPCF7\_LOAD\_JS is set to false (default: true), Contact Form 7 does not load the JavaScript. You can set the value of this constant in your wp-config.php like this: define( 'WPCF7\_LOAD\_JS', false ); Likewise, you can control the loading of the CSS stylesheet with WPCF7\_LOAD\_CSS. Contact Form 7 does not load the CSS stylesheet when the value of WPCF7\_LOAD\_CSS is false (default: true). You can set it in the wp-config.php like this: define( 'WPCF7\_LOAD\_CSS', false ); Or, you can also disable the loading of the JavaScript and CSS by adding a few lines of code into your theme’s functions.php file, like this: add\_filter( 'wpcf7\_load\_js', '\_\_return\_false' ); add\_filter( 'wpcf7\_load\_css', '\_\_return\_false' ); Now you have succeeded in stopping the loading of the JavaScript and CSS stylesheet, but, unfortunately, you’ve also killed them on pages that contain contact forms — so we really need to get them back on the right pages. So, the next step is what you’ll need to load the files on to the explicit pages in which you need them. Step 2: Load the files on pages which contain contact forms For example, let’s say you have a page named “Contact” and it is the only page that contains a contact form. And suppose that you have a template file for the “Contact” page named ‘contact.php’ in your theme folder. Now you will need to load Contact Form 7’s JavaScript and CSS stylesheet specifically on the “Contact” page. To do this, you must edit the ‘contact.php’ template file and insert the following lines into it: Note that wpcf7\_enqueue\_scripts() and wpcf7\_enqueue\_styles() must be called before wp\_head() is called. Share this:FacebookTwitterLike this:Like Loading... # Tracking form submissions with Google Analytics If you use Google Analytics to monitor web traffic on your site, you may also want to track contact form submissions. In this article, I’ll introduce a simple way to track submissions with Google Analytics. Note that the JavaScript code used in this article is based on the latest version of the Google Analytics library at the time of this post (analytics.js). If you use the legacy library (ga.js), you will need to change the code in the following examples according to Google’s guide. First, take a look at the HTML source of your site and confirm that you have a code snippet like the following: (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1\*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview'); If not, you haven’t finished installing the basic page tracking code for Google Analytics yet; install that first. Event tracking#Event tracking A form submission can be tracked as an event. To send a form submission event to Google Analytics, call the JavaScript function as follows: ga( 'send', 'event', 'Contact Form', 'submit' ); You probably want to track a submission event only when mail has been sent successfully. Contact Form 7 triggers wpcf7mailsent custom DOM event when it has sent mail, so let’s call the function within an event handler the following: document.addEventListener( 'wpcf7mailsent', function( event ) { ga( 'send', 'event', 'Contact Form', 'submit' ); }, false ); The final step is inserting this JavaScript code snippet into the HTML header () of each page. You can edit your theme’s header.php template, or you can use wp\_head action hook from the theme’s functions.php. You of course need to wrap the code with tag when you embed script code into HTML: document.addEventListener( 'wpcf7mailsent', function( event ) { ga('send', 'event', 'Contact Form', 'submit'); }, false ); If you have set up everything correctly, Google Analytics will track successful form submissions through contact forms as an event with Contact Form as the event category, and submit as the event action. To verify this is working correctly, you can check the Behavior > Events > Overview report page on Google Analytics 24-48 hours after a submission; at that point, tracked events should be recorded there. Note: The method using on\_sent\_ok hook is no longer recommended. This function is scheduled to be abolished by the end of 2017. Share this:FacebookTwitterLike this:Like Loading... # Locating response message box anywhere After a visitor of your blog submits the contact form, the visitor sees a response message from Contact Form 7, such as “Your message was sent successfully” or “Validation errors occurred.” I sometimes hear from users who tell me that the position of the response message is not good, and, in fact, sometimes their visitors miss the message entirely. The response message is shown at the bottom of the form by default. You can change the location by putting a response message placeholder [response] inside the form. You can insert this [response] tag into any place of your choice. You can use it multiple times in a form. The response message will be shown within the placeholder after submission. Demo Note: This is a demo. This form doesn’t send a mail practically. Your Name (required) Subject Your Message Δ View source of above form: [response] Your Name (required) [text\* your-name] Subject [text your-subject] Your Message [textarea your-message] [response] [submit "Send"] Share this:FacebookTwitterLike this:Like Loading... # Selectable recipient with pipes Imagine that you are a webmaster of a company and you need a contact form on your site which will let the sender to select an email recipient. Let’s say that the options are the CEO of the company (ceo@example.com), the sales department (sales@example.com) and the support department (support@example.com). You’ve been able to achieve this with Contact Form 7 in this way: first, make a drop-down menu or radio button for the selection (you can do this by inserting a form-tag such as: [select your-recipient "ceo@example.com" "sales@example.com" "support@example.com"] into the form template); second, enter a corresponding mail-tag [your-recipient] into the To field in the Mail tab panel. This ensures that the email is sent to the specific address that the sender selected. However, there has been a problem with this. By using this procedure, the email addresses are revealed over the Internet and this is not good. These addresses could then become targets of evil spammers very quickly. So, what you need is a way to allow senders to select from closed data safely. The pipe (‘|’) support is just for this very purpose. Change the form-tag of the drop-down menu to: [select your-recipient "CEO|ceo@example.com" "Sales|sales@example.com" "Support|support@example.com"] If you insert a pipe (‘|’) character in the middle of the option value, only the part before the pipe will be open to the outside, and the part after the pipe will be used for mail replacement. To get the value after pipe character, put the usual mail-tag corresponding to the form-tag ([your-recipient] in the case of the preceding example) in the mail templates. To get value before pipe, you can use [\_raw\_{field name}] ([\_raw\_your-recipient] in the case of the preceding example). You can use this usage of pipe only in the drop-down menu values, radio buttons or checkboxes. If you don’t like this feature, you may define the constant WPCF7\_USE\_PIPE as false to disable it. Share this:FacebookTwitterLike this:Like Loading... # Adding Cc, Bcc and other mail headers Contact Form 7 has setting fields for mail headers of To, From and Subject. Have you ever thought of adding Cc or Bcc headers to your email? Additional Headers fields in the Mail and Mail (2) sections are just for that purpose. You can input any header lines into the field; and you can insert any mail-tags into any place in each header line, just like other Mail fields. Share this:FacebookTwitterLike this:Like Loading... # Contact form in your language You don’t need extra multilingual plugins to manage contact forms in your language. By going to the WordPress admin screen (WordPress has a standardized localization mechanism), you can switch the language used in the contact form editor user interface and you can switch the language used for the default template for newly created contact forms. Localizing contact form editor UI To switch the language used for admin screens, move to Users > Your Profile admin menu page. You’ll find the language selector there. The language used for the screens under the Contact menu will follow your language setting. If not, make sure that: 1) a language pack for the language is available on the translate.wordpress.org site, and 2) the latest version of the language pack is installed on your site. Localizing default contact form template After setting the UI language, move to Contact > Add New menu page to create a new contact form. If both the UI language and the language pack for Contact Form 7 have been correctly set up, the contents in the Form, Mail, and Messages tab panels should be localized for your language. If not, once again, make sure the latest language pack is installed. If you find the language pack for your language isn’t available yet or isn’t maintained well, it’s time to contribute to the plugin translation. Share this:FacebookTwitterLike this:Like Loading... # Special mail-tags There may be times when you need more information than just the submitter’s input through contact form fields. For example, you may need to know the submitter’s IP address for security reasons. For such purposes, special mail-tags can be very helpful. Unlike other mail-tags, special mail-tags are independent from form fields or the submitter’s input. You can place these special mail-tags anywhere mail-tags are allowed to be used, such as in the message body or other mail fields. Special mail-tags for submissions#Special mail-tags for submissions [\_remote\_ip] — This tag is replaced by the submitter’s IP address. [\_user\_agent] — This tag is replaced by the submitter’s user agent (browser) information. [\_url] — This tag is replaced by the URL of the page in which the contact form is placed. [\_date] — This tag is replaced by the date of the submission. [\_time] — This tag is replaced by the time of the submission. [\_invalid\_fields] — This tag is replaced by the number of form fields with invalid input. [\_serial\_number] — This tag is replaced by a numeric string whose value increments, so this tag can work as the serial number of each submission. Requires Flamingo 1.5+ be installed. Post-related special mail-tags#Post-related special mail-tags These special mail-tags provide information about the post that contains the contact form. Be aware that these [\_post\_\*] tags work only when the contact form is placed inside post content. In cases where the contact form is outside of post content, such as when the contact form is placed in a sidebar widget or embedded in a theme’s template file, a blank text will replace the tag. [\_post\_id] — This tag is replaced by the ID of the post. [\_post\_name] — This tag is replaced by the name (slug) of the post. [\_post\_title] — This tag is replaced by the title of the post. [\_post\_url] — This tag is replaced by the permalink URL of the post. [\_post\_author] — This tag is replaced by the author name of the post. [\_post\_author\_email] — This tag is replaced by the author email of the post. Site-related special mail-tags#Site-related special mail-tags These special mail-tags provide information about the WordPress website on which you manage the contact forms. You’ll find them especially useful when you want to reuse the same set of contact form templates between many websites, because you are freed from manual modification of the site information for each website. [\_site\_title] — This tag is replaced by the title of the website. [\_site\_description] — This tag is replaced by the description (tagline) of the website. [\_site\_url] — This tag is replaced by the home URL of the website. [\_site\_admin\_email] — This tag is replaced by the email address of the primary admin user of the website. User-related special mail-tags#User-related special mail-tags These special mail-tags provide information about the current logged-in user. Since these [\_user\_\*] tags work only when the submitter has an account on the WordPress site and is logged in, it is recommended to turn on the subscribers-only mode setting anytime you use these tags. If you want to use these tags but don’t want to use the subscribers-only mode, explicitly turn on the nonce setting. Otherwise, the logged-in user data will be reset by the WP REST API, and a blank text will replace the tag. [\_user\_login] — This tag is replaced by the login name of the user. [\_user\_email] — This tag is replaced by the email address of the user. [\_user\_url] — This tag is replaced by the website URL of the user. [\_user\_first\_name] — This tag is replaced by the first name of the user. [\_user\_last\_name] — This tag is replaced by the last name of the user. [\_user\_nickname] — This tag is replaced by the nickname of the user. [\_user\_display\_name] — This tag is replaced by the display name of the user. Share this:FacebookTwitterLike this:Like Loading... # Controlling behavior by setting constants Contact Form 7 allows you to control its behavior by setting some constant values. The typical place to define constants is in the wp-config.php file. You will find that many lines defining constants such as, define('XXX', 'xxx'); exist in the file. You can append new lines after them. Note that your lines must be placed before the last line. Example (wp-config.php): 8081828384858687888990919293define( 'WP\_DEBUG', false ); define ( 'WPCF7\_LOAD\_JS', false ); // Added to disable JS loadingdefine ( 'WPCF7\_LOAD\_CSS', false ); // Added to disable CSS loading /\* That's all, stop editing! Happy publishing. \*/ /\*\* Absolute path to the WordPress directory. \*/if ( ! defined( 'ABSPATH' ) ) {    define( 'ABSPATH', \_\_DIR\_\_ . '/' );} /\*\* Sets up WordPress vars and included files. \*/require\_once ABSPATH . 'wp-settings.php'; The rest of this post describes a variety of constants. WPCF7\_LOAD\_JS When the value of this constant is false (default: true), Contact Form 7 does not load the JavaScript on the front end. When the value of this constant is set as header, Contact Form 7 loads the JavaScript in the header instead of in the footer (default). See also: Loading JavaScript and stylesheet only when it is necessary WPCF7\_LOAD\_CSS When the value of this constant is false (default: true), Contact Form 7 does not load the CSS stylesheet on the front end. See also: Loading JavaScript and stylesheet only when it is necessary WPCF7\_AUTOP When the value of this constant is false (default: true), Contact Form 7 does not apply the “autop” filter to the form content. The “autop” filter replaces double line-breaks with paragraph elements. WPCF7\_USE\_PIPE When the value of this constant is false (default: true), Contact Form 7 disables its “pipe” feature, so that pipe character has no special meaning. See also: Selectable recipient with pipes WPCF7\_ADMIN\_READ\_CAPABILITY The value of this constant holds the minimum capability required for access to the administration panel. The default value is edit\_posts. See also: Restricting access to the administration panel WPCF7\_ADMIN\_READ\_WRITE\_CAPABILITY The value of this constant holds the minimum capability required for editing contact forms. The default value is publish\_pages. Obviously WPCF7\_ADMIN\_READ\_WRITE\_CAPABILITY should be stricter than WPCF7\_ADMIN\_READ\_CAPABILITY, as you cannot edit contact forms without accessing the administration panel. See also: Restricting access to the administration panel WPCF7\_UPLOADS\_TMP\_DIR When this constant is defined, the value of the constant overrides the setting of directory path of the temporary folder for uploaded files. See also: File uploading and attachment Share this:FacebookTwitterLike this:Like Loading... # Redirecting to another URL after submissions First of all, I believe that this tip I’m writing on this post is not necessary for 99.99% of users and, actually, I don’t recommend using it. I’m writing this for the 0.01% of you, so you can ignore it if not necessary. As you know, Contact Form 7 redirects to the same URL as the form’s URL after form submissions in the default settings. However, in very rare cases, you might need to change this to make it redirect to another URL after submissions. I’ll write in this post how you can set up Contact Form 7 to do just that. By the way, I’m often asked by users that how they can redirect to so-called “Thank You Page”. In most cases, they want to know it because they assume that redirecting to “Thank You Page” is necessary for tracking form submissions with Google Analytics. That’s not necessary at all. In fact, it’s an outdated and nonsense custom. Today you can track submissions with Google Analytics without any redirection. So you have other reason for redirecting to another URL? The simplest way is utilizing Contact Form 7’s custom DOM event to run JavaScript. The following is an example of script that redirects you to another URL when the wpcf7mailsent event occurs: document.addEventListener( 'wpcf7mailsent', function( event ) { location = 'http://example.com/'; }, false ); Embed this snippet into your theme’s template file. Obviously, you need to replace the http://example.com/ in the code to the URL you want to redirect to. Note: The method using on\_sent\_ok hook is no longer recommended. Share this:FacebookTwitterLike this:Like Loading... # Disallowed list (formerly known as “Comment blacklist”) If you are suffering from an influx of spam or unwanted messages through contact forms and you can’t block them completely by using reCAPTCHA or Akismet, the disallowed list feature will be of great help to you. The disallowed list is originally a feature of WordPress to help manage comments. Contact Form 7 can also utilize it to blocklist specific words or IP addresses. Disallowed list is quite simple to use; just log-into the WordPress admin screen, move to the menu Settings > Discussion, and then you’ll find the Disallowed Comment Keys section in the middle of the screen. The Disallowed Comment Keys section in Settings > Discussion Put one word or IP address per line in the text box. Messages containing the word or sent from the IP address in the list you’ve created will be treated as spam by Contact Form 7 and will not be delivered. How can you get the IP address from which the messages originate? The simplest method is by using the special mail-tag [\_remote\_ip] in the content of the email sent to you. It will show the sender’s IP address. Share this:FacebookTwitterLike this:Like Loading... # Save submitted messages with Flamingo Contact Form 7 doesn’t store submitted messages anywhere. Therefore, you may lose important messages forever if your mail server has issues or you make a mistake in mail configuration. Install a message storage plugin before this happens to you. Flamingo saves all messages through contact forms into the database. Flamingo is a free WordPress plugin created by the same author as Contact Form 7. » Download Flamingo plugin from WordPress.org Customizing Subject and From fields in messages#Customizing Subject and From fields in messages In the Inbound Messages admin menu, you will see there are Subject and From fields. Those fields have the message’s subject, and submitter’s name and email address respectively. By default, those fields retrieve values from Contact Form 7’s default input fields: your-subject, your-name, and your-email. Therefore, if you have modified your contact form and it doesn’t have the default input fields, the Subject and From fields don’t show correct values. In such cases, try customizing those fields as the following: Open the Additional Settings tab in the contact form editor page, and add lines like these: flamingo\_email: "[the-email-field]" flamingo\_name: "[the-name-field]" flamingo\_subject: "[the-subject-field]" You can use plain text and mail-tags in the value for each line. You can also use multiple mail-tags in a line; if you have input fields for first name and last name instead of a single name field, you may want to set up the flamingo\_name like this: flamingo\_name: "[first-name-field] [last-name-field]" Share this:FacebookTwitterLike this:Like Loading... # Styling contact form How do I style contact form? This is a common question on the support forum. Contact Form 7 doesn’t provide any customization for styling. Editing CSS style sheets is the best method to style contact forms. In this article, I’ll show you some important steps for styling your contact forms. If you know about CSS, my explanation is simple. If you are not familiar with CSS, please learn CSS first with these informative websites: Learning CSS – W3CCSS Tutorial – W3SchoolsLearn CSS | MDN – Mozilla Developer NetworkCSS Basics Which style sheet should I edit?#Which style sheet should I edit? Any style sheet is okay, but I recommend editing your theme’s main style sheet. It’s better not to edit style sheets in the plugin because your changes will be overwritten when the plugin is updated. Themes can be updated, but they are generally updated less frequently than plugins. If your theme is updated often, you might make a child theme and manage the style sheet in the child theme. You can also use Additional CSS, and it has several advantages over modifying theme’s stylesheets directly. Styling contact form fields#Styling contact form fields Let’s see how we can style individual fields in a contact form. There are several types of input fields. The most common field is a single-line text input field so let’s add a style rule for it: input[type="text"] { background-color: #fff; color: #000; width: 50%; } This selector matches all input elements whose type attribute has exactly the value text (i.e. single-line text input fields). Also, this style rule has three properties specifying white as background color, black as foreground (text) color, and 50% as width of field. You may want to apply this style rule to other types of fields. Let’s add selectors for an email address input field and a multi-line text input area: input[type="text"], input[type="email"], textarea { background-color: #fff; color: #000; width: 50%; } Now this style is applied to every part of your site. You may want to limit it to contact forms. Contact Form 7’s form has a wrapper element that has the wpcf7 class. You can limit the scope of target by adding ancestor selectors: .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea { background-color: #fff; color: #000; width: 50%; } See also: Why does my email address input field look different than other text input fields?Custom layout for checkboxes and radio buttons Styling specific fields#Styling specific fields You might want to style only specific fields. First, add an id or class option to the form-tags of the fields that you want to style: [text text-123 id:very-special-field] Then add style rules using the id or class: #very-special-field { color: #f00; border: 1px solid #f00; } Styling whole of contact form#Styling whole of contact form As I mentioned earlier, the top-level element of contact form has the wpcf7 class. To style the whole contact form, add style rules for the class selector: .wpcf7 { background-color: #f7f7f7; border: 2px solid #0f0; } This style rule gives your contact forms a light gray background and green border. See also: Can I add id and class attributes to a form element? Styling response messages#Styling response messages The response message at the bottom of a contact form by default has the wpcf7-response-output class, so you can apply a style rule to this class to style the response message. To decide on the style based on the status of the contact form, refer to the form element’s class attribute. It should have a class that reflects the current status. Possible values are: init, sent, failed, aborted, spam, invalid, or unaccepted. For an example of styling, see the following default style rules that Contact Form 7 5.2.2 applies to a response message: .wpcf7 form .wpcf7-response-output { margin: 2em 0.5em 1em; padding: 0.2em 1em; border: 2px solid #00a0d2; /\* Blue \*/ } .wpcf7 form.init .wpcf7-response-output { display: none; } .wpcf7 form.sent .wpcf7-response-output { border-color: #46b450; /\* Green \*/ } .wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output { border-color: #dc3232; /\* Red \*/ } .wpcf7 form.spam .wpcf7-response-output { border-color: #f56e28; /\* Orange \*/ } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output { border-color: #ffb900; /\* Yellow \*/ } See also: Locating response message box anywhere Styling validation error messages#Styling validation error messages When a field has an invalid value, a validation error message appears under the field. As the element of a validation error message has the wpcf7-not-valid-tip class, you can use the class to style validation error messages. Contact Form 7 5.2.2 applies the following style rule by default: .wpcf7-not-valid-tip { color: #dc3232; font-size: 1em; font-weight: normal; display: block; } See also: Customizing validation error messages Share this:FacebookTwitterLike this:Like Loading... # Customizing validation error messages When form submission includes invalid inputs (e.g., required fields are blank or email fields have invalid formats), the form displays validation error messages. This post describes how you can customize the validation error messages that Contact Form 7 produces. Changing text You can change the text used in each type of error message. For example, the default message for required fields is “The field is required.” To change this message, edit the text in the Messages tab panel. Static or floating-tip You have two different style options for validation error messages: static and floating-tip. Static is the current default option. Floating-tip was once the default option in Ajax submission mode before Contact Form 7 3.6 demoted it because of poor accessibility. Look at these demo forms to see the differences between the two styles. Static style Lorem ipsum dolor sit amet, adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea consequat. Δ Floating-tip style Lorem ipsum dolor sit amet, adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea consequat. Δ Each style has advantages and disadvantages.  AdvantageDisadvantageStatic style (default) Good accessibility Same behavior in Ajax and non-Ajax submission modes Possible to break the layout when used for inline fields Floating-tip style Not possible to break the layout even when used for inline fields Poor accessibility Only works in Ajax submission mode Normally, static style is recommended as it causes less accessibility issues. However, if you have inline fields in a form and inserting static error message blocks after them breaks the form layout, using floating-tip style is the better option. Switching the validation error message style can be done in a simple step. You can apply floating-tip style to specific fields or to all fields in a form. The basic rule is that when an element has the class use-floating-validation-tip, all fields under the element use floating-tip style. Let me show some examples. To apply floating-tip style to a specific input field, wrap the field with an element that has the use-floating-validation-tip class. Example: [text\* your-name] If you want to apply floating-tip style to all fields in a form, add the use-floating-validation-tip class to the form element by adding the html\_class attribute to [contact-form-7] shortcode. Example: [contact-form-7 id="1234" title="Contact form 1" html\_class="use-floating-validation-tip"] In non-Ajax submission mode, static style is used regardless of settings. Share this:FacebookTwitterLike this:Like Loading... # Managing long lists with Listo Imagine that you need to make a contact form that has fields for the sender’s location and you want them to choose their country from a list. There are about 200 countries in the world — you’ll soon realize that the list becomes terribly long. Previously, the only way to generate such a long list with Contact Form 7 was to manually add all the options into a form-tag as shown below. [select your-country “Aruba” “Afghanistan” “Angola” “Albania” “Andorra” “United Arab Emirates” “Argentina” “Armenia” “American Samoa” “Antigua and Barbuda” “Australia” “Austria” “Azerbaijan” “Burundi” “Belgium” “Benin” “Burkina Faso” “Bangladesh” “Bulgaria” “Bahrain” “Bahamas” “Bosnia and Herzegovina” “Belarus” “Belize” “Bermuda” “Bolivia, Plurinational State of” “Brazil” “Barbados” “Brunei Darussalam” “Bhutan” “Botswana” “Central African Republic” “Canada” “Switzerland” “Chile” “China” “Côte d’Ivoire” “Cameroon” “Congo, the Democratic Republic of the” “Congo” “Cook Islands” “Colombia” “Comoros” “Cape Verde” “Costa Rica” “Cuba” “Cayman Islands” “Cyprus” “Czech Republic” “Germany” “Djibouti” “Dominica” “Denmark” “Dominican Republic” “Algeria” “Ecuador” “Egypt” “Eritrea” “Spain” “Estonia” “Ethiopia” “Finland” “Fiji” “France” “Micronesia, Federated States of” “Gabon” “United Kingdom” “Georgia” “Ghana” “Guinea” “Gambia” “Guinea-Bissau” “Equatorial Guinea” “Greece” “Grenada” “Guatemala” “Guam” “Guyana” “Hong Kong” “Honduras” “Croatia” “Haiti” “Hungary” “Indonesia” “India” “Ireland” “Iran, Islamic Republic of” “Iraq” “Iceland” “Israel” “Italy” “Jamaica” “Jordan” “Japan” “Kazakhstan” “Kenya” “Kyrgyzstan” “Cambodia” “Kiribati” “Saint Kitts and Nevis” “Korea, Republic of” “Kuwait” “Lao People’s Democratic Republic” “Lebanon” “Liberia” “Libya” “Saint Lucia” “Liechtenstein” “Sri Lanka” “Lesotho” “Lithuania” “Luxembourg” “Latvia” “Morocco” “Monaco” “Moldova, Republic of” “Madagascar” “Maldives” “Mexico” “Marshall Islands” “Macedonia, the former Yugoslav Republic of” “Mali” “Malta” “Myanmar” “Montenegro” “Mongolia” “Mozambique” “Mauritania” “Mauritius” “Malawi” “Malaysia” “Namibia” “Niger” “Nigeria” “Nicaragua” “Netherlands” “Norway” “Nepal” “Nauru” “New Zealand” “Oman” “Pakistan” “Panama” “Peru” “Philippines” “Palau” “Papua New Guinea” “Poland” “Puerto Rico” “Korea, Democratic People’s Republic of” “Portugal” “Paraguay” “Palestine, State of” “Qatar” “Romania” “Russian Federation” “Rwanda” “Saudi Arabia” “Sudan” “Senegal” “Singapore” “Solomon Islands” “Sierra Leone” “El Salvador” “San Marino” “Somalia” “Serbia” “Sao Tome and Principe” “Suriname” “Slovakia” “Slovenia” “Sweden” “Swaziland” “Seychelles” “Syrian Arab Republic” “Chad” “Togo” “Thailand” “Tajikistan” “Turkmenistan” “Timor-Leste” “Tonga” “Trinidad and Tobago” “Tunisia” “Turkey” “Tuvalu” “Taiwan, Province of China” “Tanzania, United Republic of” “Uganda” “Ukraine” “Uruguay” “United States” “Uzbekistan” “Saint Vincent and the Grenadines” “Venezuela, Bolivarian Republic of” “Virgin Islands, U.S.” “Viet Nam” “Vanuatu” “Samoa” “Yemen” “South Africa” “Zambia” “Zimbabwe”] Managing 200 or more options is almost impossible, and parsing this form-tag would consume memory and time on your server computer. The situation of a list of countries in a contact form is not that rare; it should be easier to set up. That’s why I created Listo, another WordPress plugin. Listo is a simple plugin that provides several kinds of common lists for other plugins like Contact Form 7. Listo currently provides lists of world countries, U.S. subdivisions, and world currencies (shown at the bottom of this page), with more to come. Contact Form 7 supports cooperation with Listo and allows drop-down menus, checkboxes, and radio buttons, with a long list of options that Listo provides. You don’t need painful manual editing anymore. How to manage long lists in a contact form Let’s try creating a drop-down menu for selecting a country. We get the option values from Listo, so activate Listo if it’s not active yet. Let’s start by creating a form-tag for a typical drop-down menu. We use [select] form-tag. [select your-country] This tag doesn’t have values yet, so it will be displayed as an empty menu. Next, we add the countries list as its option values. To add values provided by Listo, add a ‘data’ option to a form-tag, like this. [select your-country data:countries] Just adding data:countries gives the menu about 200 country options. Simple, right? Looking through the menu items, you may find something unexpected; for example, “Antarctica” is in the countries list. Is Antarctica a country where people live? The reason Antarctica is in the list is that the data source of the countries list is the ISO 3166 standard, which includes some non-country special areas. Thus, the definition of a country can differ according to standards. For dealing with different definitions, Listo also provides a grouping function. For the world countries list, Listo provides two subgroups: “un” and “olympic”. The “un” subgroup only includes members of the United Nations, while the “olympic” subgroup only includes participating nations at the 2012 London Summer Olympic Games. A complete list with subgroups is shown at the bottom of this page. To specify the data option with subgroup, append a period (.) and the name of subgroup to the option. [select your-country data:countries.olympic] This menu will only include participating Olympic nations in its options; you won’t see Antarctica there. The complete lists Listo provides Countries [countries] A list of countries and dependent territories based on the ISO 3166 standard. Usage example: [select your-country data:countries.olympic] NameIn Group1Arubaolympic2Afghanistanun, olympic3Angolaun, olympic4Anguilla5Åland Islands6Albaniaun, olympic7Andorraun, olympic8United Arab Emiratesun, olympic9Argentinaun, olympic10Armeniaun, olympic11American Samoaolympic12Antarctica13French Southern Territories14Antigua and Barbudaun, olympic15Australiaun, olympic16Austriaun, olympic17Azerbaijanun, olympic18Burundiun, olympic19Belgiumun, olympic20Beninun, olympic21Bonaire, Sint Eustatius and Saba22Burkina Fasoun, olympic23Bangladeshun, olympic24Bulgariaun, olympic25Bahrainun, olympic26Bahamasun, olympic27Bosnia and Herzegovinaun, olympic28Saint Barthélemy29Belarusun, olympic30Belizeun, olympic31Bermudaolympic32Bolivia, Plurinational State ofun, olympic33Brazilun, olympic34Barbadosun, olympic35Brunei Darussalamun, olympic36Bhutanun, olympic37Bouvet Island38Botswanaun, olympic39Central African Republicun, olympic40Canadaun, olympic41Cocos (Keeling) Islands42Switzerlandun, olympic43Chileun, olympic44Chinaun, olympic45Côte d'Ivoireun, olympic46Cameroonun, olympic47Congo, the Democratic Republic of theun, olympic48Congoun, olympic49Cook Islandsolympic50Colombiaun, olympic51Comorosun, olympic52Cape Verdeun, olympic53Costa Ricaun, olympic54Cubaun, olympic55Curaçao56Christmas Island57Cayman Islandsolympic58Cyprusun, olympic59Czech Republicun, olympic60Germanyun, olympic61Djiboutiun, olympic62Dominicaun, olympic63Denmarkun, olympic64Dominican Republicun, olympic65Algeriaun, olympic66Ecuadorun, olympic67Egyptun, olympic68Eritreaun, olympic69Western Sahara70Spainun, olympic71Estoniaun, olympic72Ethiopiaun, olympic73Finlandun, olympic74Fijiun, olympic75Falkland Islands (Malvinas)76Franceun, olympic77Faroe Islands78Micronesia, Federated States ofun, olympic79Gabonun, olympic80United Kingdomun, olympic81Georgiaun, olympic82Guernsey83Ghanaun, olympic84Gibraltar85Guineaun, olympic86Guadeloupe87Gambiaun, olympic88Guinea-Bissauun, olympic89Equatorial Guineaun, olympic90Greeceun, olympic91Grenadaun, olympic92Greenland93Guatemalaun, olympic94French Guiana95Guamolympic96Guyanaun, olympic97Hong Kongolympic98Heard Island and McDonald Islands99Hondurasun, olympic100Croatiaun, olympic101Haitiun, olympic102Hungaryun, olympic103Indonesiaun, olympic104Isle of Man105Indiaun, olympic106British Indian Ocean Territory107Irelandun, olympic108Iran, Islamic Republic ofun, olympic109Iraqun, olympic110Icelandun, olympic111Israelun, olympic112Italyun, olympic113Jamaicaun, olympic114Jersey115Jordanun, olympic116Japanun, olympic117Kazakhstanun, olympic118Kenyaun, olympic119Kyrgyzstanun, olympic120Cambodiaun, olympic121Kiribatiun, olympic122Saint Kitts and Nevisun, olympic123Korea, Republic ofun, olympic124Kuwaitun, olympic125Lao People's Democratic Republicun, olympic126Lebanonun, olympic127Liberiaun, olympic128Libyaun, olympic129Saint Luciaun, olympic130Liechtensteinun, olympic131Sri Lankaun, olympic132Lesothoun, olympic133Lithuaniaun, olympic134Luxembourgun, olympic135Latviaun, olympic136Macao137Saint Martin (French part)138Moroccoun, olympic139Monacoun, olympic140Moldova, Republic ofun, olympic141Madagascarun, olympic142Maldivesun, olympic143Mexicoun, olympic144Marshall Islandsun, olympic145Macedonia, the former Yugoslav Republic ofun, olympic146Maliun, olympic147Maltaun, olympic148Myanmarun, olympic149Montenegroun, olympic150Mongoliaun, olympic151Northern Mariana Islands152Mozambiqueun, olympic153Mauritaniaun, olympic154Montserrat155Martinique156Mauritiusun, olympic157Malawiun, olympic158Malaysiaun, olympic159Mayotte160Namibiaun, olympic161New Caledonia162Nigerun, olympic163Norfolk Island164Nigeriaun, olympic165Nicaraguaun, olympic166Niue167Netherlandsun, olympic168Norwayun, olympic169Nepalun, olympic170Nauruun, olympic171New Zealandun, olympic172Omanun, olympic173Pakistanun, olympic174Panamaun, olympic175Pitcairn176Peruun, olympic177Philippinesun, olympic178Palauun, olympic179Papua New Guineaun, olympic180Polandun, olympic181Puerto Ricoolympic182Korea, Democratic People's Republic ofun, olympic183Portugalun, olympic184Paraguayun, olympic185Palestine, State ofolympic186French Polynesia187Qatarun, olympic188Réunion189Romaniaun, olympic190Russian Federationun, olympic191Rwandaun, olympic192Saudi Arabiaun, olympic193Sudanun, olympic194Senegalun, olympic195Singaporeun, olympic196South Georgia and the South Sandwich Islands197Saint Helena, Ascension and Tristan da Cunha198Svalbard and Jan Mayen199Solomon Islandsun, olympic200Sierra Leoneun, olympic201El Salvadorun, olympic202San Marinoun, olympic203Somaliaun, olympic204Saint Pierre and Miquelon205Serbiaun, olympic206South Sudanun, olympic207Sao Tome and Principeun, olympic208Surinameun, olympic209Slovakiaun, olympic210Sloveniaun, olympic211Swedenun, olympic212Swazilandun, olympic213Sint Maarten (Dutch part)214Seychellesun, olympic215Syrian Arab Republicun, olympic216Turks and Caicos Islands217Chadun, olympic218Togoun, olympic219Thailandun, olympic220Tajikistanun, olympic221Tokelau222Turkmenistanun, olympic223Timor-Lesteun, olympic224Tongaun, olympic225Trinidad and Tobagoun, olympic226Tunisiaun, olympic227Turkeyun, olympic228Tuvaluun, olympic229Taiwan, Province of Chinaolympic230Tanzania, United Republic ofun, olympic231Ugandaun, olympic232Ukraineun, olympic233United States Minor Outlying Islands234Uruguayun, olympic235United Statesun, olympic236Uzbekistanun, olympic237Holy See (Vatican City State)238Saint Vincent and the Grenadinesun, olympic239Venezuela, Bolivarian Republic ofun, olympic240Virgin Islands, Britisholympic241Virgin Islands, U.S.olympic242Viet Namun, olympic243Vanuatuun, olympic244Wallis and Futuna245Samoaun, olympic246Yemenun, olympic247South Africaun, olympic248Zambiaun, olympic249Zimbabweun, olympic U.S. subdivisions [us\_subdivisions] The list of subdivisions of the United States based on the ISO 3166-2:US standard. Usage example: [select your-state data:us\_subdivisions.states data:us\_subdivisions.districts] NameIn Group1Alaskastates2Alabamastates3Arkansasstates4American Samoaoutlying\_areas5Arizonastates6Californiastates7Coloradostates8Connecticutstates9District of Columbiadistricts10Delawarestates11Floridastates12Georgiastates13Guamoutlying\_areas14Hawaiistates15Iowastates16Idahostates17Illinoisstates18Indianastates19Kansasstates20Kentuckystates21Louisianastates22Massachusettsstates23Marylandstates24Mainestates25Michiganstates26Minnesotastates27Missouristates28Northern Mariana Islandsoutlying\_areas29Mississippistates30Montanastates31North Carolinastates32North Dakotastates33Nebraskastates34New Hampshirestates35New Jerseystates36New Mexicostates37Nevadastates38New Yorkstates39Ohiostates40Oklahomastates41Oregonstates42Pennsylvaniastates43Puerto Ricooutlying\_areas44Rhode Islandstates45South Carolinastates46South Dakotastates47Tennesseestates48Texasstates49United States Minor Outlying Islandsoutlying\_areas50Utahstates51Virginiastates52Virgin Islands, U.S.outlying\_areas53Vermontstates54Washingtonstates55Wisconsinstates56West Virginiastates57Wyomingstates Currencies [currencies] A list of currencies based on the ISO 4217 standard. Usage example: [select your-currency data:currencies] NameIn Group1United Arab Emirates dirham2Afghan afghani3Albanian lek4Armenian dram5Netherlands Antillean guilder6Angolan kwanza7Argentine peso8Australian dollar9Aruban florin10Azerbaijani manat11Bosnia and Herzegovina convertible mark12Barbados dollar13Bangladeshi taka14Bulgarian lev15Bahraini dinar16Burundian franc17Bermudian dollar18Brunei dollar19Boliviano20Brazilian real21Bahamian dollar22Bhutanese ngultrum23Botswana pula24Belarusian ruble25Belize dollar26Canadian dollar27Congolese franc28Swiss franc29Chilean peso30Chinese yuan31Colombian peso32Costa Rican colon33Cuban peso34Cape Verde escudo35Czech koruna36Djiboutian franc37Danish krone38Dominican peso39Algerian dinar40Egyptian pound41Eritrean nakfa42Ethiopian birr43Euro44Fiji dollar45Falkland Islands pound46Pound sterling47Georgian lari48Ghanaian cedi49Gibraltar pound50Gambian dalasi51Guinean franc52Guatemalan quetzal53Guyanese dollar54Hong Kong dollar55Honduran lempira56Croatian kuna57Haitian gourde58Hungarian forint59Indonesian rupiah60Israeli new shekel61Indian rupee62Iraqi dinar63Iranian rial64Icelandic króna65Jamaican dollar66Jordanian dinar67Japanese yen68Kenyan shilling69Kyrgyzstani som70Cambodian riel71Comoro franc72North Korean won73South Korean won74Kuwaiti dinar75Cayman Islands dollar76Kazakhstani tenge77Lao kip78Lebanese pound79Sri Lankan rupee80Liberian dollar81Lesotho loti82Lithuanian litas83Libyan dinar84Moroccan dirham85Moldovan leu86Malagasy ariary87Macedonian denar88Myanma kyat89Mongolian tugrik90Macanese pataca91Mauritanian ouguiya92Mauritian rupee93Maldivian rufiyaa94Malawian kwacha95Mexican peso96Malaysian ringgit97Mozambican metical98Namibian dollar99Nigerian naira100Nicaraguan córdoba101Norwegian krone102Nepalese rupee103New Zealand dollar104Omani rial105Panamanian balboa106Peruvian nuevo sol107Papua New Guinean kina108Philippine peso109Pakistani rupee110Polish złoty111Paraguayan guaraní112Qatari riyal113Romanian new leu114Serbian dinar115Russian ruble116Rwandan franc117Saudi riyal118Solomon Islands dollar119Seychelles rupee120Sudanese pound121Swedish krona/kronor122Singapore dollar123Saint Helena pound124Sierra Leonean leone125Somali shilling126Surinamese dollar127South Sudanese pound128São Tomé and Príncipe dobra129Syrian pound130Swazi lilangeni131Thai baht132Tajikistani somoni133Turkmenistani manat134Tunisian dinar135Tongan paʻanga136Turkish lira137Trinidad and Tobago dollar138New Taiwan dollar139Tanzanian shilling140Ukrainian hryvnia141Ugandan shilling142United States dollar143Uruguayan peso144Uzbekistan som145Venezuelan bolívar146Vietnamese dong147Vanuatu vatu148Samoan tala149CFA franc BEAC150East Caribbean dollar151CFA franc BCEAO152CFP franc (franc Pacifique)153Yemeni rial154South African rand155Zambian kwacha156Zimbabwe dollar Share this:FacebookTwitterLike this:Like Loading... # Best practice to set up mail Setting up mail (header and message) properly is essential for successful mail delivery. In this article, I’ll describe how you can properly set up mail to maximize mail deliverability. Avoid looking like spam Mail service providers have been fighting relentless mail abuses like spam and spoofing. Since anti-abuse techniques aren’t flawless, there is always a possibility of false-positives; even if you are not a real spammer, behaving like a spammer can increase the likelihood of being treated that way. Let’s consider the following situation. In the “From” header field, you can use an email address that has absolutely no connection to the domain of the site on which the contact form is placed. For instance, you can use your @yahoo.com address in the From field even when your site isn’t on yahoo.com. Consequently, the receiver sees an email claiming to be “From” yahoo.com, which is actually from a completely different server. As you can do this, so can spammers — and they do. Therefore, if you use a From email address that does not belong on the site domain, especially if you haven’t implemented an authentication method (described later), it is difficult for mail service providers to distinguish your legitimate mail from spam. Bottom line: in the From field, use an email address that belongs to the same domain as the site. Specify Reply-to address#Specify Reply-to address When you reply to email, the reply is normally sent to the address specified in the From field of the original mail. What if you didn’t want to receive replies at the From address? In such cases, specify the address you want the receiver to reply to in the “Reply-To” header field of the original mail. In the Contact Form 7 admin screen, you can set Reply-To in the Additional headers field in the Mail and Mail (2) sections. Prepare a real “WordPress” email address It is recommended you prepare a real wordpress@{your-site-domain} address on your host. Because the default mail template of Contact Form 7 uses this address in its From field, someone might try to send mail to this address. Some hosts also block outgoing mail from this address if it doesn’t exist. WordPress also uses the wordpress@{your-site-domain} address in its notification mail, including comment notification and new user notification. It doesn’t hurt to make this address even if you don’t use Contact Form 7. Utilize email authentication Even if you set an email address belonging in the site domain in the From field, spammers can still send spoofed mail as if you sent it from your domain. As long as the possibility of email spoofing exists, the risk of mail service providers confusing your legitimate mail for spoofed mail remains. To protect your mail from this risk, you can utilize email authentication methods including SPF and DKIM, which are supported by most major mail service providers. For detailed instruction about how to set up authentication methods, consult your provider’s support. Make sure you have appropriate values in mail fields Be careful when using values from optional form input fields. Are your mail header fields valid even when the values are empty? Also, be careful not to make the message body empty or too short. It not only makes the mail look like spam, it makes mail sending function fail on some hosts. See also Setting up mailAdding Cc, Bcc and other mail headers External links WordPress emails are sent but not receivedAbout SPF records – Google Apps Administrator HelpAuthenticate email with DKIM – Google Apps Administrator HelpEmail service providers can’t send to / from Yahoo addressesDMARC.org – Domain-based Message Authentication, Reporting and Conformance Share this:FacebookTwitterLike this:Like Loading... # Translating Contact Form 7 While the default language for this plugin is English, you can also use it in other languages. Contact Form 7 has been translated into more than 60 languages thanks to volunteer translators’ daily efforts. If you can’t find a translation for your language or you feel the existing translation needs correction or update, why not contribute to translation yourself? To translate the plugin, use translate.wordpress.org (GlotPress). You only need your WordPress.org account to join the collaborative translation project. https://translate.wordpress.org/projects/wp-plugins/contact-form-7 First, find the language to translate in the Locale column in the table. There are four sub projects: Development, Development Readme, Stable, and Stable Readme. I recommend starting from the Stable sub project. Please refer to the Translator Handbook for the details of translate.wordpress.org. Note that only Translation Editors can approve or reject suggested translations. If you’d like to become a Translation Editor for the Contact Form 7 translation project, please contact the General Translation Editors or administrators for the local WordPress.org site for the language, since they have the authority to do it. Share this:FacebookTwitterLike this:Like Loading... # DOM events Contact Form 7 provides several types of custom DOM events. You can utilize the events within your JavaScript code to run a function in a specific situation. This article explains the DOM events that Contact Form 7 provides, in what cases those events fire, and how you can use them in your code. Since this article omits general explanation about the DOM event model, if you are not familiar with it please refer to external documents: DOM events (Wikipedia)Overview of Events and Handlers (MDN)Document Object Model (DOM) Level 2 Events Specification List of Contact Form 7 custom DOM events wpcf7invalid — Fires when an Ajax form submission has completed successfully, but mail hasn’t been sent because there are fields with invalid input.wpcf7spam — Fires when an Ajax form submission has completed successfully, but mail hasn’t been sent because a possible spam activity has been detected.wpcf7mailsent — Fires when an Ajax form submission has completed successfully, and mail has been sent.wpcf7mailfailed — Fires when an Ajax form submission has completed successfully, but it has failed in sending mail.wpcf7submit — Fires when an Ajax form submission has completed successfully, regardless of other incidents. Coding event handler The code below is a simple example of registering an event handler. In this example, the function listens to the wpcf7submit event and just pops up an alert when the event occurs. 12345var wpcf7Elm = document.querySelector( '.wpcf7' ); wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {  alert( "Fire!" );}, false ); As you see in the example, you use addEventListener() to register an event handler function. Be aware that the event target (wpcf7Elm in the example) is not a form element, but its parent div element that has a wpcf7 class. Since all of the wpcf7\* events bubble up through a DOM tree toward the document root, if you don’t need to set a specific event target, you can make it simpler by setting the document property as the event target: 123document.addEventListener( 'wpcf7submit', function( event ) {  alert( "Fire!" );}, false ); User input data through the target contact form is passed to the event handler as the detail.inputs property of the event object. The data structure of detail.inputs is an array of objects, and each object has name and value properties. This is an example that accesses the user input value through the “your-name” field: 12345678910document.addEventListener( 'wpcf7submit', function( event ) {  var inputs = event.detail.inputs;   for ( var i = 0; i < inputs.length; i++ ) {    if ( 'your-name' == inputs[i].name ) {      alert( inputs[i].value );      break;    }  }}, false ); There are also other properties of the event object that you can utilize in your event handler. PropertyDescriptiondetail.contactFormIdThe ID of the contact form.detail.pluginVersionThe version of Contact Form 7 plugin.detail.contactFormLocaleThe locale code of the contact form.detail.unitTagThe unit-tag of the contact form.detail.containerPostIdThe ID of the post that the contact form is placed in. For example, if you want to do something only with a specific contact form (ID=123), use the detail.contactFormId property as seen in the following: 123456document.addEventListener( 'wpcf7submit', function( event ) {  if ( '123' == event.detail.contactFormId ) {    alert( "The contact form ID is 123." );    // do something productive  }}, false ); See also DOM event doesn’t work. Share this:FacebookTwitterLike this:Like Loading... # 如何解决配置错误 Contact Form 7 提供了 Configuration Validator，它可以验证您的联系表单配置以检测错误；这使您免于日后配置错误可能带来的麻烦。本系列文章解释了常见错误以及如何解决这些错误。 配置验证器的一般信息和介绍在[关于配置验证器的常见问题解答中](https://contactform7.com/configuration-validator-faq/)进行了解释。 #### 表单选项卡中的错误 - [表单控件使用了不可用的名称。](https://contactform7.com/configuration-errors/unavailable-names/) - [多个表单控件位于单个标签元素中。](https://contactform7.com/configuration-errors/multiple-controls-in-label/) - [表单模板中使用了不可用的 HTML 元素。](https://contactform7.com/configuration-errors/unavailable-html-elements/) - [点用于表单标签名称。](https://contactform7.com/configuration-errors/dots-in-names/) #### 邮件选项卡中的错误 - [有一个可能的空字段。](https://contactform7.com/configuration-errors/maybe-empty/) - [使用了无效的邮箱语法。](https://contactform7.com/configuration-errors/invalid-mailbox-syntax/) - [发件人电子邮件地址不属于站点域。](https://contactform7.com/configuration-errors/email-not-in-site-domain/) - [存在无效的邮件标题字段。](https://contactform7.com/configuration-errors/invalid-mail-header/) - [附件文件不存在。](https://contactform7.com/configuration-errors/file-not-found/) - [不允许使用 wp-content 目录之外的文件。](https://contactform7.com/configuration-errors/file-not-in-content-dir/) - [附件文件的总大小太大。](https://contactform7.com/configuration-errors/attachments-overweight/) #### 消息选项卡中的错误 - [HTML 标签用于消息中。](https://contactform7.com/configuration-errors/html-in-message/) #### “附加设置”选项卡中的错误 - [使用过时的设置。](https://contactform7.com/configuration-errors/deprecated-settings/) # 为什么我的 AJAX 联系表单不能正常工作？ Contact Form 7 支持 AJAX 提交。因此，Contact Form 7 中正确配置的联系表单的工作方式与以下演示表单完全相同。尝试在字段中输入任何文本并提交。 您的姓名（必填） 您的电子邮件（必填） 您的留言 它怎么样？它是否像您网站上的联系表一样工作？有些人可能会惊讶地注意到您的表单和这个演示表单之间的差异，并认为，“我的表单在提交后总是重新加载页面，但这个表单不会。” 如果您的表单无法像这个演示表单那样工作，则可能是 Contact Form 7 的 JavaScript 在您的网站上无法正常运行。我会告诉你一些可能的原因。 - JavaScript 文件未加载这是我最近看到的原因。这是由于您的主题模板缺少用于排队 JavaScript 的调用函数。所需的功能是wp\_head()和wp\_footer()，它们分别在header.php和 中footer.php，在大多数正确的主题中。 - 与其他 JavaScript 的冲突许多插件和主题加载自己的 JavaScript。其中一些可能创建不正确，因此与其他插件冲突。在大多数情况下，当发生此类冲突时，您可能能够通过浏览器的脚本控制台找到 JavaScript 错误。 - HTML 结构无效与其他 JavaScript 一样，Contact Form 7 的 JavaScript 遍历和操作 HTML 的结构。因此，如果原始 HTML 结构无效，它将无法工作。您可以使用 HTML 验证器检查您的 HTML 是否有效。在这种情况下，我建议使用[W3C 标记验证服务](https://validator.w3.org/)。 # Jetpack 覆盖联系表单 Jetpack是一种流行的插件，可让您在自托管的 WordPress 站点上利用[WordPress.com](https://wordpress.com/ "WordPress.com") 的许多功能。我喜欢 Jetpack 并在我的许多网站上使用它。 不幸的是，Jetpack 的联系表单模块是 Jetpack 1.3 新引入的，与其他联系表单插件（包括 Contact Form 7）冲突。 一个典型的问题是 Jetpack 劫持了其他插件的联系表单短代码。因此，您的自定义联系表单将被 Jetpack 的普通联系表单替换，并且提交的消息可能会发送到非预期的目的地。 我将在此处发布如何避免 Jetpack 问题并成功将 Contact Form 7 与 Jetpack 结合使用。 #### 停用 Jetpack 的联系表单模块 您可以停用联系表单模块并继续使用 Jetpack 的其他功能。如果您打算使用联系表单以外的 Jetpack 功能，这是避免问题的最简单方法。 您可以在 Jetpack 的管理屏幕上停用特定功能，但该过程令人困惑。请参阅以下步骤。 1. 打开 Jetpack 菜单 ![打开 Jetpack 菜单](https://docs.cocobook.com/uploads/images/gallery/2026-10/a1tpazdquwptc7yd.webp) 2. 单击“联系表单”窗格中的“了解更多”， ![点击了解更多](https://docs.cocobook.com/uploads/images/gallery/2026-10/eomtdxbqkjzlsp7p.webp)然后出现“停用”按钮 3. 点击“停用” ![单击停用](https://docs.cocobook.com/uploads/images/gallery/2026-10/4hd8dnjx7zqsjs7m.webp) #### 使用新的简码 Contact Form 7\[contact-form-7 ...\]默认使用简码格式，但使用\[contact-form ...\]Contact Form 7 v3.0 之前的格式。\[contact-form ...\]仍然支持旧的简码以实现向后兼容性。 使用旧简码的问题在于简码的名称“contact-form”是一个常用词，因此其他插件可能使用相同的名称。Jetpack 使用\[contact-form ...\]. 当多个插件使用同名的短代码时，会导致冲突。 您可以通过用新的短代码手动替换旧的短代码来最大程度地减少冲突。