Author 诗语

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

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 选项卡面板。在此选项卡面板中，如果您想通过此联系人表单向联系人列表添加新联系人，请选中联系人列表复选框，然后选择联系人列表。

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

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

Stripe 集成

Contact Form 7 的 Stripe 集成模块允许您将信用卡支付小工具添加到您的联系表格中。您可以通过简单的步骤开始收款。使用此模块无需额外费用。

您需要一个 Stripe 帐户才能集成。如果您还没有，请先创建一个帐户。另外，请注意您需要一个支持 HTTPS 的站点才能使用此模块。

连接到 API #连接到 API

该模块使用 Stripe Elements 和 Stripe.js，并与 Stripe API 交互工作。要开始使用它，请先获取您的 API 密钥。

1. 登录到 Stripe 仪表板。
2. 转到开发人员 > API 密钥。
3. 复制实时模式的可发布密钥和秘密密钥。

然后，打开另一个浏览器选项卡并按照以下步骤操作：

1. 登录到 WordPress 仪表板。
2. 转到联系 > 集成。
3. 单击 Stripe 面板中的设置集成。
4. 将可发布密钥和密钥粘贴到面板的输入字段中。
5. 单击保存更改。

就这样。如果 API 与您的网站之间的连接已成功建立，您将在 Stripe 面板的边框周围看到蓝线。

设置您的联系表格#设置您的联系表格

与 API 建立连接后，下一步是通过为 Stripe 支付小工具添加表单标签来设置联系表单。

联系表格 7 为 [stripe] 支付小部件提供了表单标签。以下是 [stripe]form-tag 的示例：

[stripe currency:usd amount:700 "Proceed to checkout" "Pay 7 USD"]

一个 [stripe] 表单标签由两个选项和两个值组成。

该 currency 选项表示付款货币。该值必须是 Stripe 支持的三字母货币代码。

该 amount 选项是支付的金额。请注意，金额必须以货币的最小单位提供。例如，USD 的最小单位是 1 cent（不是 1 美元），所以 currency:usd amount:700 在上面的例子中会收取 7 美元 （不是 700 美元） 。

Stripe 对某些货币的收费金额有稍微复杂的规则。强烈建议您查阅 Stripe 的文档。

下面两个值 （"Proceed to checkout"和"Pay 7 USD"上面例子中） 是可选的，如果你设置了它们，它们将用作提交按钮的标签文本；第一个将在初始提交阶段使用，第二个将分别用于二级阶段。

由于 [stripe] 表单标签包含一个提交按钮，因此您不需要在同一表单中使用另一个提交按钮。如果您在付款表单中有 [submit] 表单标签，则可以安全地将其删除。

付款完成后，将向买家发送收据电子邮件。默认情况下，「您的电子邮件」 字段用于获取买家的电子邮件地址，因此建议在表单中包含 「您的电子邮件」 字段。

另一个有用的提示：向电子邮件模板添加一个特殊的邮件标签 。这将被一个指向 Stripe 付款页面的 URL 链接取代，您可以在其中获取有关付款的详细信息。 [_stripe_payment_link]

安全考虑#安全考虑

付款表格是诈骗者极具吸引力的目标。使用 Contact Form 7 提供的安全模块保护您的表单。至少，reCAPTCHA 是支付表单的必备条件。也建议一起使用 Akismet 。

不幸的是，一些骗子仍有可能通过严格的安全措施偷偷摸摸。 Stripe 提供了可靠的解决方案和手册，您可以在付款表格遭到滥用时使用。

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

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

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

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

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