WordBench京都 2013年1月13日 （2015年7月27日　Contact Form 7 の表記を正しく修正しました）

1. 2013/01/13
WordBench京都
Cherry Pie Web 川井昌彦
Contact Form 7の
よくあるカスタマイズ

2. 2
自己紹介
●川井昌彦（かわいまさひこ） @sakuragi_kei
東京の制作会社で24年間勤めた後、
京都府舞鶴市に帰郷してフリーランスで活動中
実は、DTPのほうが経験が長い （このスライドも InDesign で作っています）
実は、MovableTypeのほうが経験が長い
小桜インコ・シロハラインコ・黒い柴犬のパパ
Cherry Pie Web http://www.cherrypieweb.com

3. 3
Contact Form 7 について

4. 4
Contact Form 7とは？
WordPressに
「メールフォーム」を追加するプラグイン
一から作ると、プログラミングが必要で
めんどくさい「メールフォーム」を、
管理画面の設定だけで作成できます

5. 5
メールフォームの流れ
チェック、送信部分は、HTMLだけでは作れない
入力
• Formタグ、
Inputタグなどで
構成
• HTMLのみで
作れる
チェック
• 入力値の
チェック
• プログラミング
が必要
送信
• メール本文構築、
メールサーバー
との通信
• プログラミング
が必要

6. 6
チェックは面倒だけどおろそかにできない！
• セッション管理
• 不正なタグやコマンドを入力された場合の対処
• メール送信失敗時の対処
• もちろん、
必須チェック、
メールアドレスチェック、
確認用入力の整合チェック
・・・なんかも必要です

7. 7
でもContact Form 7なら
プログラミング不要！
難しそうなところは全部やってくれます
プログラミングとか、できなくても大丈夫
メールサーバーとか気にしなくてもOK
（気にしないといけないこともあるけど・・・）

8. 8
本日のメニュー
≫ よくあるカスタマイズ
●公式サイトを見ればすぐにできること
1. 自動返信メールを送信する
2. 送信日時などをメールに挿入する
3. フォームのデフォルト値を設定する・透かし文字を入れる
4. Google Analyticsで送信完了イベントを取得する
●公式サイトを読めば書いてあるけど、わかりにくいこと
1. セレクトメニュー・ラジオボタン・チェックボックスで、
表示文字と送信される値を異なる値にする
2. テキストフィールドへ値を渡す

9. 9
●公式サイトには書いてないこと（非推奨なものあり）
1. IME（日本語入力）の自動切り替えをする
2. 送信ボタンを画像にする
3. 郵便番号入力で住所を自動入力する
4. メールアドレス入力時に、確認用メールアドレスを入れて整合チェックをする
5. 送信完了画面を表示する
6. 確認画面を表示する
≫ トラブルシューティング
1. メールフォームから大量のスパムメールが送られてくる
2. メールが届かない
3. 送信ボタンを連打される

10. 10
Contact Form 7
よくあるカスタマイズ

11. 11
自動返信メールを送信する
メール（２）を使う
あて先のところに、メールアドレス入力フォームの名前を
指定すればOKです
[your-email] とかです。
書いてある

12. 12
送信日時などをメールに挿入する
特別なメールタグを使う
（例）
[_date] 送信日付
[_time] 送信時刻
[_remote_ip] 送信者のIPアドレス
[_post_title] メールフォームのある投稿のタイトル
書いてないわかりにくい書いてある

13. 13
フォームのデフォルト値を設定する
たとえば、こんな感じ
書いてある

14. 14
⑴テキスト
で囲んでデフォルト値を指定します
[text text1 デフォルト値]
watermarkオプション → 透かし文字になります
[text text2 watermark 入力の説明]

15. 15
⑵チェックボックス・ラジオボタン
defaultオプションで、何個目かを指定します
チェックボックスは、複数指定できます
ラジオボタンは、複数指定できません
[checkbox your-check2 default:2_4 a b c d e]

16. 16
⑶セレクトメニュー
defaultオプションで、何個目かを指定します
複数指定したいときは multipleオプションをつけます
[select your-select1 multiple default:2_4 a b c d e]
初期値を空にするときは、
include_blankオプションをつけます
[select your-select2 include_blank a b c d e]
（注意）表示は「…」ですが、
送信される値は null になります！

17. 17
セレクトメニュー・ラジオボタン・
チェックボックスで、表示文字と
送信される値を異なる値にする
値を | で区切る
[select your-select option1|value1 option2|value2 option3|value3]
書き出されるHTMLは、 | より前の文字になっていますが、
メールに埋め込まれる値は、 | より後の文字になります
※送信される値は送信時にプラグインが置き換えるので、
ユーザーに知られることがありません。
わかりにくい

18. 18
テキストフィールドへ値を渡す
フォームへGETパラメータで渡す
1. フォームで値を渡したい部分に名前をつけます
pお名前 (必須)br /
[text* your-name] /p
p題名br /
[text your-subject] /p
2. フォームへのリンクに
GETパラメーターを仕込みます
a href=/wp/?page_id=nyourname=名前subject=題名フォームへ/a
（フォームとパラメータの名前は違うものにしたほうが、後でデバッグしやすいです）
わかりにくい

19. 19
3. functions.php に、
フォームの内容に応じて下記のように記述します
function my_tag_filter($tag){
if ( ! is_array( $tag ) )
return $tag;
if(isset($_GET['yourname'])){
$name = $tag['name']; ←ここは変えちゃダメ！
if($name == 'your-name') $tag['values'] = (array) $_GET['yourname'];
}
if(isset($_GET['subject'])){
$name = $tag['name'];
if($name == 'your-subject') $tag['values'] = (array) $_GET['subject'];
}
return $tag;
}
add_filter('wpcf7_form_tag', 'my_tag_filter', 11);

20. 20
しかし！
これだと、IEで日本語のパラメータが
文字化けしてしまいます！！
→ フォームへのリンクで、urlencode関数を使います
a href=/wp/?page_id=xxx
yourname=?php echo urlencode('名前'); ?
subject=?php echo urlencode('題名'); ?フォームへ/a
（読みやすいように改行しています）

21. 21
投稿やページに入れる時はショートコードを使います
functions.php でショートコードを定義
function urlencode_text_shortcode($attr) {
extract(shortcode_atts(array(
'val' = '',
), $attr));
return urlencode($val);
}
add_shortcode('urlencode_text', 'urlencode_text_shortcode');
投稿やページでは、
a href=/wp/?page_id=xxx
yourname=[urlencode_text val='名前']
subject=[urlencode_text val='題名']フォームへ/a
他のブラウザだと問題がみつからないので、
IEでのテストは必ずやりましょう！

22. 22
IME（日本語入力）の
自動切り替えをする
フォーム設定画面でタグにclassを指定し、
CSSでIMEのモードを指定する
1. フォームでclass指定します
pお名前br /
[text your-name class:name] /p
pメールアドレスbr /
[email your-email class:email] /p
pメッセージ本文br /
[textarea your-message class:message] /p
書いてない

23. 23
2. style.cssでIMEのモードを指定します
form.wpcf7-form .email {
ime-mode: inactive; ←IME OFF
}
form.wpcf7-form .name,
form.wpcf7-form .message {
ime-mode: active; ←IME ON
}

24. 24
送信ボタンを画像にする
⑴ CSSで画像にする
フォーム指定時に、送信ボタンにclassをつけます
[submit class:imgsubmit]
style.cssで背景画像として設定します
input.imgsubmit {
border: none;
width: 100px; ←画像の幅
height: 30px; ←画像の高さ
background: url(送信ボタンの画像のURL) left top no-repeat;
text-indent: -9999px; ←ボタンのテキストを非表示にする
}
（読みやすいように改行しています）
書いてない書いてない

25. 25
⑵自前の送信ボタンにする
input type=image value=送信 src=ボタン画像のURL
class=wpcf7-form-control wpcf7-submit /
（読みやすいように改行しています）
・ボタン画像のURLは、絶対URLか、ルートディレクトリからのパス
・class=wpcf7-form-control wpcf7-submit をつけないと、
メール送信時にローディング画像が表示されません
マウスオーバーさせたいなら、こんな感じです
input type=image value=送信 class=wpcf7-form-control
src=通常のボタン画像のURL
onmouseover=this.src='マウスオーバー時のボタン画像のURL'
onmouseout=this.src='通常のボタン画像のURL'
class=wpcf7-form-control wpcf7-submit /
（読みやすいように改行しています）

26. 26
郵便番号入力で
住所を自動入力する
Ajaxzip3 を組み込む
（簡単なJavaScriptを組みます）
書いてない書いてない

27. 27
1. Contact Form 7 のフォームに id を設定します
p郵便番号br /
[text zip1] - [text zip2 id:zip]/p
p住所br /
[text address] /p
2. フォームに onKeyupイベントを追加するため、
JavaScriptを作成します
（テーマディレクトリ）/js/jquery.wpcf7.ajaxzip3.js
$(function(){
$(#zip).keyup(function(event){
AjaxZip3.zip2addr(zip1,zip2,address,address);
})
})
※AjaxZip3の書式
AjaxZip3.zip2addr(〒上3桁, 〒下4桁, 都道府県, 市区町村, 町域大字, 丁目番地 );

28. 28
3. functions.php で読み込みます
function cf7_ajaxzip3() {
wp_enqueue_script(
'ajaxzip3',
'http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js',
array('jquery'));
wp_enqueue_script(
'wpcf7-ajaxzip3',
get_stylesheet_directory_uri().'/js/jquery.wpcf7.ajaxzip3.js',
array('ajaxzip3'));
}
add_action('wp_print_scripts', 'cf7_ajaxzip3');
（読みやすいように改行しています）
wp_enqueue_script を使うと、
bodyの閉じタグの直前にスクリプトが出力されます。

29. 29
※jQueryは、読み込み直しましょう。
WordPressにはjQueryが組み込まれていますが、noConfrictが含められていて、関
数をカプセル化しないと使えない仕様になっていて使いづらいです。
また、下記の形で読み込んだほうが、一般的に高速で動作します。
function load_cdn() {
if ( !is_admin() ) {
wp_deregister_script('jquery');
wp_enqueue_script(
'jquery',
'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js',
array(),
'1.7.2'
);
}
}
add_action('init', 'load_cdn');
（jQueryのバージョンは、新しいものに置き換えていただいても良いと思います）

30. 30
メールアドレス入力時に、
確認用メールアドレスを入れて
整合チェックをする
フィルターフックに
チェックプログラムをひっかける
Contact Form 7で
確認用メールアドレスの入力フォームを加える方法
http://hello.lumiere-couleur.com/smilkobuta/2010/12/02/contact-form-7%E3%
81%A7%E7%A2%BA%E8%AA%8D%E7%94%A8%E3%83%A1%E3%83%BC%E3%83%AB%E3%82%A2%E3%8
3%89%E3%83%AC%E3%82%B9%E3%81%AE%E5%85%A5%E5%8A%9B%E3%83%95%E3%82%A9%E3%83%
BC%E3%83%A0%E3%82%92%E5%8A%A0/
書いてない

31. 31
1. フォームに確認用のタグを追加します
pメールアドレスbr /
[email* your-email] /p
pメールアドレス (確認用）br /
[email* your-email_confirm] /p
確認用メールアドレスの名前は、
メールアドレスの名前に、
_confirm を付け足したものになります

32. 32
2. functions.phpに以下を書きます
（参考サイトに載っているコードの丸写しでOK）
?php
add_filter( 'wpcf7_validate_email', 'wpcf7_text_validation_filter_extend', 11, 2 );
add_filter( 'wpcf7_validate_email*', 'wpcf7_text_validation_filter_extend', 11, 2 );
function wpcf7_text_validation_filter_extend( $result, $tag ) {
$type = $tag['type'];
$name = $tag['name'];
$_POST[$name] = trim( strtr( (string) $_POST[$name], n, ) );
if ( 'email' == $type || 'email*' == $type ) {
if (preg_match('/(.*)_confirm$/', $name, $matches)){
$target_name = $matches[1];
if ($_POST[$name] != $_POST[$target_name]) {
$result['valid'] = false;
$result['reason'][$name] = '確認用のメールアドレスが一致していません';
}
}
}
return $result;
}
?

33. 33
送信完了画面を表示する
もし、クライアントから「送信完了画面を作ってください」と
言われたら・・・
まず、
「何のために必要なんですか？」
と聞いてください

34. 34
そしてもし、
「Google Analyticsで
フォーム送信をトラッキングしたいから」
と言われても・・・
（つまり、「送信完了ページへの移動」を
「フォーム送信完了」としたいということ）

35. 35
「そのために、
送信完了画面を作る必要は
あ り ま せ ん ！」

36. 36
Google Analyticsで
送信完了イベントを取得する方法
_trackPageviewを使う
●フォーム送信を Google Analytics でトラッキングする
http://contactform7.com/ja/tracking-form-submissions-with-google-analytics/
（注意）
上記のページに書いてある方法は「同期式」トラッキングコード使用時のものですが、
最近はほとんど「非同期式」です。
非同期式の場合の説明もあるのですが、わかりづらいので注意してください。
書いてある

37. 37
管理画面のフォーム設定ページの一番下に「その他の設
定」の項目があるので、そこに以下の行を挿入します
on_sent_ok: _gaq.push(['_trackPageview', 'complete.html']);
※書式
_gaq.push(['_trackPageview', '仮想ページ名']);
仮想ページ名は、実際に存在しなくても構いません。
ページへのリンクとして認識されるので、
目標値（コンバージョン）に設定できます。
_trackEventを使って、フォーム送信をイベントとしてとらえることもできます。
イベントも目標値として設定できるらしいです。
また、仮想ページを目標値にすると、ウェブマスターツールでクロールエラーが記録され
ることがあるらしい（検索パフォーマンスには影響がない）です。

38. 38
話が脱線したので、元に戻します・・・
では、Google Analyticsのトラッキングが目的でない場
合は・・・？
たとえば、
「完了メッセージが下の方に出るので、気づきにくい」
「送信完了後に、メールフォームが残ってたらカッコ悪い」
「違うページへのリンクや、バナーを表示したい」
なんてときです。

39. 39
⑴送信完了後、完了ページへ飛ばす
1. 固定ページなどで完了ページを作ります
2. フォーム設定の「その他の設定」に、下記のように記述し
ます
on_sent_ok: location = '完了ページのURL';
先ほど出てきた「on_sent_ok」は、送信完了後に、
そのあとに記述したJavaScriptを実行します

40. 40
⑵CSSでなんとかする
実は、さきほどのようなことなら、CSSでなんとかなります

41. 41
●送信完了後、フォーム部分を非表示にして
メッセージだけ表示する
1. フォーム設定画面で、全体をdivタグで囲みます
div class=form-wrapper
pお名前br /
[text your-name]/p
pメールアドレスbr /
[email your-mail]/p
p[submit 送信]
/div
2. style.cssに下記のように記述します
.sent .form-wrapper { display: none; }
フォームが送信されると、Contact Form 7プラグインによって、
formタグに .sentというクラスがつけられるので、
送信完了後にdivで囲んだ部分が非表示になります

42. 42
●送信完了後、別のテキストや画像を表示する
（さきほどの応用です）
1. フォーム設定画面で、全体をdivタグで囲みます
さらに、送信後に表示したいものを、divで囲んで記述します
pお名前br /
[text your-name]/p
pメールアドレスbr /
[email your-mail]/p
p[submit 送信]
div class=complete-display
pこちらのページもご覧くださいbr /
a href=/hoge.htmlimg src=/img/sample.jpg/a/p
/div
2. style.cssに下記のように記述します
.wpcf7-form .complete-display { display: none; }
.wpcf7-form.sent .complete-display { display: block; }

43. 43
●メッセージの表示位置を変える
1. フォーム設定画面で、メッセージを表示したい位置に [response] を記述します
[response]
pお名前br /
[text your-name]/p
pメールアドレスbr /
[email your-mail]/p
p[submit 送信]
div class=complete-display
pこちらのページもご覧くださいbr /
a href=/hoge.htmlimg src=/img/sample.jpg/a/p
/div
これだと、フォームよりもメッセージが上に表示されます

44. 44
確認画面を表示する
Contact Form 7の作者は、
確認画面は「いらないもの」というお考えらしいです・・・
http://ja.forums.wordpress.org/topic/648
で、いろいろググってみたけれど、
プラグインなど、
管理画面だけで解決する方法は見当たりません
書いてない

45. 45
JavaScriptで、送信ボタンを押す前に
確認フェーズを「割り込ませる」
●wordpressのcontact form 7で確認画面を出す
手軽なライブラリ
http://aulta.jp/library/wordpress/contactForm7Confirm.html
JavaScriptをアップロードして、設定部分を修正し、
header.php とかで読み込ませるだけ
これなら、なんとかできそうかも？

46. 46
1. フォームに class=title をつけます
囲まれた部分がタイトルとして認識され、エラー表示の時に使われます
送信ボタンは、任意のクラスで囲みます
pspan class=title本文/spanbr /
[text your-text] /p
pspan class=titleメールアドレス/spanbr /
[email* your-mail] /p
pspan class=titleメールアドレス（確認用）/spanbr /
[email* your-mail_confirm] /p
p class=submit-btninput type=image value=送信 src=/wp/wp-
content/themes/wbkyoto2013_1/img/btn_submit.jpg class=wpcf7-form-
control wpcf7-submit //p

47. 47
2. ダウンロードしたファイルを解凍し、JSファイルを開き、設定をフォームに合わせて書
き換えます
path : フォームがある投稿／ページのパス（カンマで区切って複数可）
button :
areaClassName : 送信ボタンを囲ったクラス
confirm : 確認ボタンのHTML
rewrite : 戻るボタンのHTML
'path' : ['/wp/inquiry/'],
'button' : {
'areaClassName' : 'submit-btn',
'confirm' : 'input class=button-confirm type=button value=確認へ /',
'rewrite' : 'input class=button-rewrite type=button value=書き直す /'
}
フォームによってボタンを変えたいときは、このブロックを複製してください
※投稿の場合、パーマリンク設定が「投稿名」でないと動作しません
（ '/wp/?p=1' と指定しても動作しない）

48. 48
（送信ボタンを画像にした場合）
CSSで送信ボタンを画像にした場合は、styles.css に指定を追加します
.submit-btn input {
border: none;
width: 100px; ←画像の幅
height: 30px; ←画像の高さ
background: url(送信ボタンの画像のURL) left top no-repeat;
text-indent: -9999px; ←ボタンのテキストを非表示にする
}
.submit-btn input.button-confirm { /* 確認ボタン */
background: url(確認ボタンの画像のURL) left top no-repeat;
}
.submit-btn input.button-rewrite { /* 戻るボタン */
background: url(戻るボタンの画像のURL) left top no-repeat;
}

49. 49
送信ボタンを、input type=image ...で画像にした場合は、
スクリプト冒頭の設定で、「確認」ボタン、「戻る」ボタンを、
input type=image ...で指定します
'button' : {
'areaClassName' : 'submit-btn',
'confirm' : 'input class=button-confirm type=image src=/wp/wp-
content/themes/wbkyoto2013_1/img/btn_confirm.jpg value=確認へ /',
'rewrite' : 'input class=button-rewrite type=image src=/wp/wp-
content/themes/wbkyoto2013_1/img/btn_back.jpg value=書き直す /'

50. 50
3. ダウンロードしたCSSファイルと、先ほど修正したjSファイルをアップロードします
（テーマディレクトリの下に、jsディレクトリを作ってアップするのがおすすめ）
4. CSSファイルとJSファイルを、テンプレートで読み込みます
（page.php, single.php など）
?php
wp_enqueue_script('wpcf7-confirm', get_stylesheet_directory_uri().'/js/
contact-form7-confirm.js', array('jquery'), '0.0.1');
wp_enqueue_style( 'wpcf7-confirm-style', get_stylesheet_directory_uri()
().'/js/contact-form7-confirm.css', array('twentytwelve-style') );
?
?php get_header(); ?

51. 51
と・こ・ろ・が・・・
「確認用メールアドレスの整合チェック」
と組み合わせると、
確認画面では、
確認用メールアドレスが違っていてもエラーが出ず、
確認画面で送信ボタンを押した後で、
「確認用メールアドレスが合っていない」
というエラーが出る・・・

52. 52
確認画面で、エラーを出したいので、
「確認用メールアドレスの整合チェック」を
さきほどのスクリプトに組み込みます
（JavaScript初心者だと、ちょっと難しいかも）

53. 53
1. 冒頭の設定部分に、確認用メールアドレスチェック時の
エラーメッセージを追加します
email : {
match : /^[A-Za-z0-9]+[w-]+@[w.-]+.w{2,}$/,
before : '',
after : 'を確認してください。'
},
email_confirm : {
before : '',
after : 'が合っていません。'
}
直前の } の後に、カンマを追加するのを忘れないように！

54. 54
2. メールアドレスの形式をチェックする部分を探し、
その続きに追加で、
「確認用メールアドレス整合チェック」を組み込みます
if (child.hasClass('wpcf7-text')){
if (child.hasClass('wpcf7-validates-as-required') child.val().
length == 0){
error.append(jQuery('li').text(option.validates.required.before
+ title.replace('必須', '') + option.validates.required.after));
jQuery(this).parents('tr').addClass('error');
} else if (child.hasClass('wpcf7-validates-as-email') ( ! child.
val().match(option.validates.email.match))){
error.append(jQuery('li').text(option.validates.email.before +
title.replace('必須', '') + option.validates.email.after));
jQuery(this).parents('tr').addClass('error');
（この続きに・・・）

55. 55
} else if (child.hasClass('wpcf7-validates-as-email')) {
var email_conf_name = 'span.'+child.attr('name')+'_confirm input';
if ( jQuery(email_conf_name)[0] ) {
if (jQuery.trim( child.val()) != jQuery.trim(jQuery(email_conf_name).val())) {
error.append(jQuery('li').text(option.validates.email.before
+ title.replace('必須', '')
+ option.validates.email_confirm.after));
jQuery(this).parents('tr').addClass('error');
}
}
}
【解説】
子要素に class=wpcf7-validates-as-email をもつ要素のname属性を取得し、
それに _confirm を追加したname属性を持つ要素を探します
見つかった場合、それぞれの値を比較し、異なっていればエラーメッセージを設定します
この作業をした場合は、functions.php への追加記述は不要です

56. 56
Contact Form 7
トラブルシューティング

57. 57
メールフォームから
大量のスパムメールが送られてくる
●主な対策
1. CAPTHA （標準機能）
2. クイズ （標準機能）
3. Akismet （標準対応）
4. Honeypot （追加プラグイン） ←おすすめ！

58. 58
⑴CAPTHA
画像で表示された文字を入力させる
⑵クイズ
クイズを用意して、答えを入力させる
上記の２つは・・・
・効果が高い
・Contact Form 7標準で使える
・ユーザーに面倒を強いる（利用率が非常に落ちる）

59. 59
⑶Akismet
公開されているブラックリストを使用して、スパムかどうか
を判断する
• Akismetプラグインは、WordPressに入っている
• Contact Form 7では、簡単な設定で使える
• 営利目的のサイトは有償（5ドル／月）

60. 60
⑷Honeypot ←おすすめ！
スパムメール自動送信システムの動作を、逆に利用したス
パム対策
スパムメール自動送信システムは、全てのフィールドに何か
しらの入力を行うようになっている
そこで、非表示のダミーフィールドを作って、
そこに何か入力されていたら、メールを送信しない
「Contact Form 7 Honeypot」プラグイン

61. 61
メールが届かない！
まずは、Contact Form 7のFAQを読んで、設定ミスが
ないか確認しましょう
PHPの動作モードによって、対策をしないと動かないこと
があります
それでも、メールが届かない場合・・・
または、一部にだけメールが届かない場合・・・
（Gmailには届くのに、さくらには届かないとか）

62. 62
送信メールサーバーが
スパム扱いされているかも！？
Amazon EC2などでよくあるケース
DNS逆引き設定がされていない
IPアドレスがブラックリストに登録されている など
自分が悪いことしていなくても、ブラックリストに登録され
てしまうことはあります
サーバー管理者に言えば対応してくれますが、
Amazonやブラックリスト管理団体とは、
英語でのメールのやりとりが必要です

63. 63
クライアントからのメールは届くのに、
WordPressからは届かない場合
同じドメインなのに、WordPressからだけ届かない！
1. 送信側のメールサーバーがブラックリストに登録されて
いても、受信側のメールサーバーがそのブラックリスト
を使っていなければ、メールが届きます
2. Webサーバーとメールサーバーが違うかも
（Google Appsを使っている場合など）
→いずれにせよ、WordPressで対策が必要です

64. 64
WordPressで使う
メールサーバーを指定する
強制的に他のメールサーバーを指定するプラグイン
・WP Mail SMTP
・Cimy Swift SMTP
設定項目が多少違うが、普通に使う分にはどちらでもOK
メーラーソフトに設定するのと同じような項目を設定する
ことで、他のサーバーからメールを送ることができる

65. 65
送信ボタンを連打される
Contact Form 7で作成したフォームは、
送信ボタンを連打すると二重送信されてしまいます
●JavaScriptで防止します
jQueryでsubmit（送信）ボタンの2度押しを禁止する
「disableDoubleSubmit」プラグイン
※WordPressのプラグインではありません！

66. 66
1. スクリプト jquery.disableDoubleSubmit.js をダウンロードします
2. 新規に下記のJavaScriptファイルを作成し、適当な名前を付けて保存します
（例として、disableDoubleSubmit_init.js という名前を付けて保存します）
(function() {
$(function(){
$(form).disableDoubleSubmit(1000);
});
})(jQuery);
form と指定すると、全てのformタグに対して有効になります
form#mailform1 などと、idを指定することもできます
1000 は、再度送信ボタンが押せるようになるまでの時間（ミリ秒）です
サーバーが遅くて送信処理に時間がかかるときは、長く設定してください
3. 上記の2ファイルをテーマディレクトリのjsディレクトリにアップロードします
（テーマディレクトリの下に、jsディレクトリを作ってアップするのがおすすめ）

67. 67
4. functions.php で読み込みます
function cf7_disableDoubleSubmit() {
wp_enqueue_script('disableDoubleSubmit',
get_stylesheet_directory_uri().'/js/jquery.disableDoubleSubmit.js',
array('jquery'));
wp_enqueue_script('disableDoubleSubmit_init',
get_stylesheet_directory_uri().'/js/disableDoubleSubmit_init.js',
array('disableDoubleSubmit'));
}
add_action('wp_print_scripts', 'cf7_disableDoubleSubmit');
（読みやすいように改行しています）

68. 68
今日は、このへんで、おしまいです。
ご清聴ありがとうございました。