Wordplessでお問合せフォームを設置したいときは、やはり「Contact Form 7」のプラグインを使うのが一番簡単かつ、操作性も快適です。設定メモとして残しておきます。詳しいことは、参考にしたサイトを見てください。
Contact Form 7でできること
- サンキューページ設定（別ページに飛ばす）
- 問合せユーザへの自動返信メール
- 問合せフォーム内でのHTMLタグ編集（一部可能）
- 承諾の確認機能（個人情報に同意しましたボタンを押してからの送信ボタンの有効化）
- WPtouchを利用してスマホ表示の最適化を行っても、デザインが崩れないし、スマホからもメール送信問題なし
Contact Form 7でデフォルトではできないけど、簡単に機能を付け加えられたもの
- 郵便番号からの住所の自動変換
AjaxZip3を使うことによって簡単に実装可能でした。＾＾ｖ
Contact Form 7でデフォルトでは、できないこと
- 問合せのDB化
- 確認画面をかませる
ライブラリがいくつか出ています。でも、私は両方ともうまく動作しませんでした（T_T）ライブラリ配布先
Wordplessで「Contact Form 7」でのお問合せフォームの設置
「Contact Form 7」というプラグインをダウンロードし、それを利用したフォームの設置。とりあえず今回行った作業をメモしておきます。
やり方
- Wordplessのプラグインページで、「Contact Form 7」のファイルをダウンロードする
- ダウンロードしたファイルを解凍。
ローカルにあるWordplessフォルダの以下の場所にそのまま移動する。wp-content/plugins
- pluginsフォルダに、解凍したフォルダをそのままコピー。そして、サーバ上の同じ場所にアップロード
- Wordplessの管理画面にログインし、
管理画面＞プラグイン
で、「Contact Form 7」があると思うので、それを［有効化］する
- そうすると、管理メニューに「お問合せ」というのが増えるので、それを選ぶと、お問合せフォームの作成画面に移る。
お問合せフォーム作成
- 管理画面＞お問合せで、問合せフォームを作成し、フォームのコードをコピーしておく。
- 管理画面＞固定ページで、お問合せフォームページを新規で作成し、内容部分にさきほどのコードを張り付ける。
- 管理画面＞固定ページで、サンキューページを作成
- ［header.php］もしくは［footer.php］の、</head>手前に、下の一文を追加
<script>
document.addEventListener( ‘wpcf7mailsent’, function( event ) {
location = ‘https://サンキューページのＵＲＬ’;
}, false );
</script>
※問合せフォームの［その他］の部分に[on_sent_ok: “location.replace(‘http://xxx’);”]で、サンキューページに飛ばすやり方は非推奨となり、使えなくなりました。
お問合せフォーム設置の情報源
有益な情報、ありがとうございます。とてもわかりやすくて助かりました！
Contact Form 7で郵便番号からの住所の自動変換機能を付け加える
株式会社人気組様が公開している、郵便番号検索ライブラリ「AjaxZip3」を使うことによって簡単に実装可能でした。＾＾ｖ
やり方
- テンプレートファイルの［header.php］に、以下の文を追記する。その際、必ずwp_head()の下に挿入すること！
<?php wp_head(); ?>
<script src=”http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js”
charset=”UTF-8″></script>
<script type=”text/javascript”>
//<![CDATA[
jQuery(function(){
AjaxZip3.JSONDATA=”http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/zipdata”;
jQuery(‘#postcode’).keyup(function(event){
AjaxZip3.zip2addr(this,”,’your-pref’,’your-address’);
})
})
//]]>
</script>
上記ソースを追記したら、FTPでサーバにアップロード。」 - 管理メニュー＞お問い合わせ お問合せ作成画面の［フォーム部分］を以下のように指定
<p>ご住所 (必須） ※郵便番号を入力すると、都道府県、市区町村までは自動で入力されます。</p>
郵便番号 [text* your-postcode id:postcode 10/]
都道府県 [text* your-pref 10/]
市区町村 [text* your-address]
番地以下 [text* your-address2]※ここは、お問合せフォームとして、表示される画面です。
- 管理メニュー＞お問い合わせ お問合せ作成画面の［メール部分］を以下のように指定
住所 : 〒[your-postcode][your-pref][your-address][your-address2]
※ここは、管理者宛てに送られるメールの内容を編集する画面です。
郵便番号変換機能の情報源
有益な情報、ありがとうございます。とてもわかりやすくて助かりました！ 私はこちらのサイトで紹介されているソースを利用しただけになります。本当はこのまま掲載しちゃいけないのかもしれないんですが、忘れないメモとして残させてください。もし問題があれば削除します。
