作者：诗语

Constant Contact 集成

披露：此说明的作者是常联系会员，这意味着如果您决定通过插件作者的链接进行购买，插件作者将获得佣金，您无需支付任何费用。

Constant Contact 集成模块允许您将通过您的联系表格收集的联系数据发送到 Constant Contact API 。您可以通过几个简单的步骤创建可靠的电子邮件订阅服务。

您需要一个 Constant Contact 用户帐户才能使用此集成。如果您还没有帐户，请先注册以创建一个帐户，然后再继续。

• 连接到 API
• 联系人属性映射
• 获得同意
• 指定联系人列表

连接到 API #连接到 API

此集成模块使用 Constant Contact V3 API 。要从您的 WordPress 网站开始使用 API，您首先需要注册一个应用程序以获取稍后将使用的 API 密钥和应用程序机密。

要注册应用程序，请移至 app.constantcontact.com 上的 “我的应用程序” 页面，然后单击右上角的 “新建应用程序” 按钮。

系统会要求您提供应用程序名称。您可以随时更改名称，所以暂时将其命名为 “Contact Form 7 Integration for (your site title) ” 。

单击保存，然后您将被定向到详细信息页面。

在详细信息页面上，您将在第一个字段中找到 API 密钥。单击 API Key 字段旁边的 Generate Secret 按钮以生成应用程序密钥。复制 API 密钥和应用程序机密，因为您将在下一步中使用它们。

接下来，在浏览器的另一个选项卡中打开 WordPress 网站的管理屏幕。移动到 Contact > Integration 菜单页面，找到一个名为 Constant Contact 的框。

单击设置集成按钮；它将显示一些输入字段。将您在上一步中复制的字符串粘贴到 API Key 和 App Secret 字段中。

您将在两个字段下找到 Redirect URI 只读字段。复制此字段值并将其粘贴到 app.constantcontact.com 上 “详细信息” 页面上的 “重定向 URI” 字段中。

在 “详细信息” 页面上更改字段值后，单击右上角的 “保存” 按钮。

现在，您几乎完成了必要的设置。返回 WordPress 管理屏幕中的 Contact > Integration 菜单页面，然后单击 Connect to the Constant Contact API 按钮开始授权过程。

如果您已正确设置所有内容，您将被定向到 Constant Contact 登录页面（如果您尚未登录），并会被要求授权您注册的应用程序以访问您的 Constant Contact 帐户.

之后，您将被重定向回 WordPress，并发现框的边框颜色已更改为蓝色。蓝色边框表示已成功创建与 API 的连接。

联系人属性映射#联系人属性映射

现在，您的联系表单和 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-name	first_name
your-last-name	last_name
your-name	first_name 和 last_name(*1)
your-email	email_address
your-job-title	job_title
your-company-name	company_name
your-birthday-month	birthday_month
your-birthday-day	birthday_day
your-birthday	birthday_month 和 birthday_day(*2)
your-anniversary	anniversary
your-phone-number	phone_numbers
your-address-street	street_addresses.street
your-address-city	street_addresses.city
your-address-state	street_addresses.state
your-address-postal-code	street_addresses.postal_code
your-address-country	street_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 编码来创建过滤器功能，但您可以使用此过滤器自定义联系人创建请求中的任何内容。

获得同意#获得同意

强烈建议您在将联系人数据添加到订阅列表之前获得联系表单提交者的明确同意。这不仅是因为未经同意收集和使用个人数据是非法的。这也是因为将电子邮件发送给非预期接收者会导致垃圾邮件投诉率很高。

对于检查提交者是否同意将其联系数据添加到 Constant Contact 订阅列表的表单字段，Contact Form 7 提供了 consent_for:constant_contactform-tag 选项。您可以使用以下示例中的选项：

[接受您的同意可选 consent_for:constant_contact]
将我添加到 Constant Contact 订阅列表。
[/验收]

如果您的联系表单中有此表单标签（接受复选框），则仅当提交者选中该复选框以确认他们的同意时，Contact Form 7 才会将联系数据发送到 Constant Contact API 。

指定联系人列表#指定联系人列表

Constant Contact 允许您将收集到的联系人数据分组到联系人列表（也称为 “电子邮件列表” 或简称 “列表”）中。

Contact Form 7 的 Constant Contact Integration 支持为通过您的联系表格收集的新联系人指定联系人列表。

如果您还没有联系人列表，请转至 “ Constant Contact” 仪表板并尝试创建您的第一个列表。然后，返回 WordPress 管理屏幕。在联系表单编辑器屏幕中，您会发现在那里添加了 Constant Contact 选项卡面板。在此选项卡面板中，如果您想通过此联系人表单向联系人列表添加新联系人，请选中联系人列表复选框，然后选择联系人列表。

上次修改 2021.12.27

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 “[email protected]” 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 ([email protected]), the sales department ([email protected]) and the support department ([email protected]).

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 “[email protected]”
“[email protected]”
“[email protected]”]

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|[email protected]”
“Sales|[email protected]”
“Support|[email protected]”]

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…