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