contact form7 よくあるカスタマイズ

2013/01/13 WordBench京都

Cherry Pie Web 川井昌彦

Contact Form7のよくあるカスタマイズ

2

自己紹介●川井昌彦（かわいまさひこ） @sakuragi_kei　東京の制作会社で24年間勤めた後、　京都府舞鶴市に帰郷してフリーランスで活動中

　　実は、DTPのほうが経験が長い　（このスライドも InDesign で作っています）　　実は、MovableTypeのほうが経験が長い

　小桜インコ・シロハラインコ・黒い柴犬のパパ

Cherry Pie Web http://www.cherrypieweb.com

http://www.cherrypieweb.com

3

Contact Form7 について

4

Contact Form7とは？WordPressに「メールフォーム」を追加するプラグイン

一から作ると、プログラミングが必要でめんどくさい「メールフォーム」を、

管理画面の設定だけで作成できます

5

メールフォームの流れ

チェック、送信部分は、HTMLだけでは作れない

入力• Formタグ、

Inputタグなどで構成

• HTMLのみで作れる

チェック• 入力値の

チェック• プログラミング

が必要

送信• メール本文構築、

メールサーバーとの通信

• プログラミングが必要

6

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

必須チェック、メールアドレスチェック、確認用入力の整合チェック　　　　　　　　　　　　・・・なんかも必要です

7

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

8

本日のメニュー≫ よくあるカスタマイズ●公式サイトを見ればすぐにできること1. 自動返信メールを送信する2. 送信日時などをメールに挿入する3. フォームのデフォルト値を設定する・透かし文字を入れる4. Google Analyticsで送信完了イベントを取得する

●公式サイトを読めば書いてあるけど、わかりにくいこと1. セレクトメニュー・ラジオボタン・チェックボックスで、

表示文字と送信される値を異なる値にする2. テキストフィールドへ値を渡す

9

●公式サイトには書いてないこと（非推奨なものあり）1. IME（日本語入力）の自動切り替えをする2. 送信ボタンを画像にする3. 郵便番号入力で住所を自動入力する4. メールアドレス入力時に、確認用メールアドレスを入れて整合チェックをする5. 送信完了画面を表示する6. 確認画面を表示する

≫ トラブルシューティング1. メールフォームから大量のスパムメールが送られてくる2. メールが届かない3. 送信ボタンを連打される

10

Contact Form7 よくあるカスタマイズ

11

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

書いてある

12

送信日時などをメールに挿入する特別なメールタグを使う

（例）[_date]　送信日付[_time]　送信時刻[_remote_ip]　送信者のIPアドレス[_post_title]　メールフォームのある投稿のタイトル

書いてないわかりにくい書いてある

13

フォームのデフォルト値を設定する

たとえば、こんな感じ

書いてある

14

⑴テキスト" " で囲んでデフォルト値を指定します[text text1 "デフォルト値"]

watermarkオプション → 透かし文字になります[text text2 watermark "入力の説明"]

15

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

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 になります！

18

テキストフィールドへ値を渡すフォームへGETパラメータで渡す1. フォームで値を渡したい部分に名前をつけます<p>お名前 (必須)<br /> [text* your-name] </p>

<p>題名<br /> [text your-subject] </p>

2. フォームへのリンクに GETパラメーターを仕込みます

<a href="/wp/?page_id=n&yourname=名前&subject=題名">フォームへ</a>

（フォームとパラメータの名前は違うものにしたほうが、後でデバッグしやすいです）

わかりにくい

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

しかし！　これだと、IEで日本語のパラメータが　　文字化けしてしまいます！！→ フォームへのリンクで、urlencode関数を使います<a href="/wp/?page_id=xxx &yourname=<?php echo urlencode('名前'); ?> &subject=<?php echo urlencode('題名'); ?>">フォームへ</a>

（読みやすいように改行しています）

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

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

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

送信ボタンを画像にする⑴ 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

⑵自前の送信ボタンにする<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

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

書いてない書いてない

27

1. Contact Form7 のフォームに 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

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

※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

メールアドレス入力時に、　確認用メールアドレスを入れて　　整合チェックをするフィルターフックにチェックプログラムをひっかける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%83%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/

書いてない

http://hello.lumiere-couleur.com/smilkobuta/2010/12/02/contact

31

1. フォームに確認用のタグを追加します<p>メールアドレス<br /> [email* your-email] </p>

<p>メールアドレス (確認用）<br /> [email* your-email_confirm] </p>

確認用メールアドレスの名前は、メールアドレスの名前に、 _confirm を付け足したものになります

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

送信完了画面を表示する

もし、クライアントから「送信完了画面を作ってください」と言われたら・・・まず、

「何のために必要なんですか？」

と聞いてください

34

そしてもし、「Google Analyticsで　　　　　　　　　

　　　フォーム送信をトラッキングしたいから」

と言われても・・・

（つまり、「送信完了ページへの移動」を　　　　　　「フォーム送信完了」としたいということ）

35

「そのために、　送信完了画面を作る必要は

　　あ　り　ま　せ　ん　！」

36

Google Analyticsで送信完了イベントを取得する方法_trackPageviewを使う●フォーム送信を Google Analytics でトラッキングするhttp://contactform7.com/ja/tracking-form-submissions-with-google-analytics/

（注意）上記のページに書いてある方法は「同期式」トラッキングコード使用時のものですが、最近はほとんど「非同期式」です。非同期式の場合の説明もあるのですが、わかりづらいので注意してください。

書いてある

http://contactform7.com/ja/tracking

37

管理画面のフォーム設定ページの一番下に「その他の設定」の項目があるので、そこに以下の行を挿入しますon_sent_ok: "_gaq.push(['_trackPageview', 'complete.html']);"

※書式 _gaq.push(['_trackPageview', '仮想ページ名']);

　　仮想ページ名は、実際に存在しなくても構いません。

ページへのリンクとして認識されるので、　目標値（コンバージョン）に設定できます。_trackEventを使って、フォーム送信をイベントとしてとらえることもできます。イベントも目標値として設定できるらしいです。また、仮想ページを目標値にすると、ウェブマスターツールでクロールエラーが記録されることがあるらしい（検索パフォーマンスには影響がない）です。

38

話が脱線したので、元に戻します・・・

では、Google Analyticsのトラッキングが目的でない場合は・・・？たとえば、「完了メッセージが下の方に出るので、気づきにくい」

「送信完了後に、メールフォームが残ってたらカッコ悪い」

「違うページへのリンクや、バナーを表示したい」

なんてときです。

39

⑴送信完了後、完了ページへ飛ばす1. 固定ページなどで完了ページを作ります2. フォーム設定の「その他の設定」に、下記のように記述し

ますon_sent_ok: "location = '完了ページのURL';"

先ほど出てきた「on_sent_ok」は、送信完了後に、そのあとに記述したJavaScriptを実行します

40

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

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; }

フォームが送信されると、ContactForm7プラグインによって、 formタグに .sentというクラスがつけられるので、送信完了後にdivで囲んだ部分が非表示になります

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.html"><img src="/img/sample.jpg"></a></p> </div>

2. style.cssに下記のように記述します.wpcf7-form .complete-display { display: none; } .wpcf7-form.sent .complete-display { display: block; }

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.html"><img src="/img/sample.jpg"></a></p> </div>

これだと、フォームよりもメッセージが上に表示されます

44

確認画面を表示するContactForm7の作者は、確認画面は「いらないもの」という考えらしいです・・・http://ja.forums.wordpress.org/topic/648

で、いろいろググってみたけれど、　プラグインなど、　　管理画面だけで解決する方法は見当たりません

書いてない

http://ja.forums.wordpress.org/topic/648

45

JavaScriptで、送信ボタンを押す前に確認フェーズを「割り込ませる」●wordpressのcontact form7で確認画面を出す　手軽なライブラリhttp://aulta.jp/library/wordpress/contactForm7Confirm.html

JavaScriptをアップロードして、設定部分を修正し、 header.php とかで読み込ませるだけこれなら、なんとかできそうかも？

http://aulta.jp/library/wordpress/contactForm7Confirm.html

46

1. フォームに class="title" をつけます囲まれた部分がタイトルとして認識され、エラー表示の時に使われます送信ボタンは、任意のクラスで囲みます

<p><span class="title">本文</span><br /> [text your-text] </p>

<p><span class="title">メールアドレス</span><br /> [email* your-mail] </p>

<p><span class="title">メールアドレス（確認用）</span><br /> [email* your-mail_confirm] </p>

<p class="submit-btn"><input type="image" value="送信" src="/wp/wp-content/themes/wbkyoto2013_1/img/btn_submit.jpg" class="wpcf7-form-control wpcf7-submit" /></p>

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

（送信ボタンを画像にした場合）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

送信ボタンを、<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

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

　　と・こ・ろ・が・・・「確認用メールアドレスの整合チェック」　　　　　　　　　　　　と組み合わせると、

確認画面では、　確認用メールアドレスが違っていてもエラーが出ず、確認画面で送信ボタンを押した後で、　「確認用メールアドレスが合っていない」　　　　　　　　　　　　というエラーが出る・・・

52

確認画面で、エラーを出したいので、

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

53

1. 冒頭の設定部分に、確認用メールアドレスチェック時のエラーメッセージを追加します

email : { match : /^[A-Za-z0-9]+[\w-]+@[\w\.-]+\.\w{2,}$/, before : '', after : 'を確認してください。' },

email_confirm : { before : '', after : 'が合っていません。' }

直前の } の後に、カンマを追加するのを忘れないように！

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

} 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

Contact Form7 トラブルシューティング

57

メールフォームから大量のスパムメールが送られてくる●主な対策1. CAPTHA　（標準機能）

2. クイズ　（標準機能）

3. Akismet　（標準対応）

4. Honeypot　（追加プラグイン） ←おすすめ！

58

⑴CAPTHA画像で表示された文字を入力させる

⑵クイズクイズを用意して、答えを入力させる

上記の２つは・・・・効果が高い・ContactForm7標準で使える・ユーザーに面倒を強いる（利用率が非常に落ちる）

59

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

60

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

「ContactForm7 Honeypot」プラグイン

61

メールが届かない！まずは、ContactForm7のFAQを読んで、設定ミスがないか確認しましょうPHPの動作モードによって、対策をしないと動かないことがあります

　　それでも、メールが届かない場合・・・

　　　または、一部にだけメールが届かない場合・・・　　　（Gmailには届くのに、さくらには届かないとか）

62

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

63

クライアントからのメールは届くのに、WordPressからは届かない場合

同じドメインなのに、WordPressからだけ届かない！

1. 送信側のメールサーバーがブラックリストに登録されていても、受信側のメールサーバーがそのブラックリストを使っていなければ、メールが届きます

2. Webサーバーとメールサーバーが違うかも（Google Appsを使っている場合など）

→いずれにせよ、WordPressで対策が必要です

64

WordPressで使うメールサーバーを指定する強制的に他のメールサーバーを指定するプラグイン・WP Mail SMTP・Cimy Swift SMTP

設定項目が多少違うが、普通に使う分にはどちらでもOKメーラーソフトに設定するのと同じような項目を設定することで、他のサーバーからメールを送ることができる

65

送信ボタンを連打されるContact Form7で作成したフォームは、送信ボタンを連打すると二重送信されてしまいます

●JavaScriptで防止しますjQueryでsubmit（送信）ボタンの2度押しを禁止する「disableDoubleSubmit」プラグイン　※WordPressのプラグインではありません！

http://www.alink.co.jp/tech/wiki/index.php?jQuery%2F%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%82%B3%E3%83%BC%E3%83%89%2Fsubmit%EF%BC%88%E9%80%81%E4%BF%A1%EF%BC%89%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE2%E5%BA%A6%E6%8A%BC%E3%81%97%E3%82%92%E7%A6%81%E6%AD%A2%E3%81%99%E3%82%8B

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

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

今日は、このへんで、おしまいです。

　ご清聴ありがとうございました。

contact form7 よくあるカスタマイズ

Technology