【ワードプレス】HPなどの問い合わせフォームの設置方法

ネットショップを作ったり、募集サイトを作った際にお問い合わせフォームを作成したいと思ったことはありませんか?
またお問い合わせを一覧で管理するのも大変です。今回は問い合わせから管理まで無料でできるツールのご紹介です。

最近は無料で使えるお問い合わせフォームが増えましたが中でも特におすすめの2つをご紹介します。

問い合わせプラグインを導入する

ワードプレスを利用したHPの場合はプラグインを入れるだけで簡単に
お問い合わせフォームが導入出来ます。

お勧めは以下の二つ。
手軽に始めたいならcontact form 7が簡単です。
カスタマイズしたり、確認画面などを表示させたり管理画面で問い合わせを管理したりできるのはtrust formです。
問い合わせが増えてくると管理が大変なのでtrust formで始めた方がゆくゆくは便利です。
「contact form 7」
「trust form」

googleフォームを利用する

まずはgoogleフォームへアクセスします。
SnapCrab_NoName_2014-11-20_16-29-47_No-00
そして作成ボタンから「フォーム」を選択します。
SnapCrab_NoName_2014-11-20_16-33-4_No-00
内容はテキスト形式だけでなく、ラジオボタンやチェックボタンなど自由にカスタマイズできます。
「テーマを変更」ボタンで外観を変更できます。
「ライブフォームを表示」で実際に入力してもらう画面が開きます。
「回答を表示」でお問い合わせの状況を一覧で確認できます。
SnapCrab_NoName_2014-11-20_16-36-59_No-00

さらにgoogleフォームでは内容をメールに転送して通知することも可能です。
このスプレッドシートに新しい回答が登録されたらメールを送信するようにしてみましょう。
「ツール」→「スクリプト」→「スクリプトエディタ」を選択

function sendForm(e){
// 件名、本文
var subject = "[問い合わせフォームからの問い合わせ]";  //件名
var body = "問い合わせ内容\n------------------------------------------------------------";  //本文
// 入力カラム名の指定
var PRE='\n\n[';
var AFT=']\n\n';
var NAME_FORM_NAME = 'お名前'; //フォーム作成時に設定した項目名
var MAIL_FORM_NAME = 'E-mail'; //フォーム作成時に設定した項目名
var BODY_FORM_NAME = '内容'; //フォーム作成時に設定した項目名
// メール送信先
var to    = "ここに通知先のEmailアドレスを記入する";
var name = e.namedValues[NAME_FORM_NAME];
body+=PRE+NAME_FORM_NAME+AFT+name;
var mailAddress = e.namedValues[MAIL_FORM_NAME];
body+=PRE+MAIL_FORM_NAME+AFT+mailAddress;
var content = e.namedValues[BODY_FORM_NAME];
body+=PRE+BODY_FORM_NAME+AFT+content+"\n";
MailApp.sendEmail(to, subject, body);   //メールを送信
}

今度は、このスクリプトがフォームの送信時に実行されるようにします。
スクリプトエディタの「トリガー」→「Current script’s triggers…」を選択

<参考サイト>
Googleドキュメントのフォーム機能からGoogle Apps Scriptを使ってメール送信
Googleフォームで『特定のメールアドレス』に通知を飛ばす方法〜Google Apps Script〜