「Googleフォーム」お問合せフォームを設置&メールに自動転送する

googleform-contact-min

最近珍しくお問合せが来ていましたが内容が文字化けしていました。最初はスパムみないなものかなと放置していましたが、最近数件来ていた問い合わせが全て文字化けしているじゃありませんか。

試しに自分でお問合せフォームを使って当サイトに送ってみると、やはり文字化け!これはと、文字化けしていた送り主のURLを見るとまともな感じのサイトやサービスのようです。今となってはどんな問い合わせかわかりませんが、今後も考えると機会損失です…。

どんなお問合せフォームサービスを使っているのかは伏せておきますが、今は早いとこサービスを乗り換えるしかありません。

SPONSORED LINK

▼目次

  1. お問合せフォームを設置するメリット
  2. Googleフォーム
  3. メール宛てに自動送信する

色々見てみましたが、WordPressだとContact Form7などのプラグインを使った方法が手っ取り早いようです。僕はプラグインはできるだけ使いたくないので、他になにかいい方法はないものかと探してみました。

お問合せフォームを設置するメリット

設置するメリットを考えてみました。デメリットもあるようですが、メリットの方が多いかと思います。

365日、24時間受付することができるというのはチャンスを取りこぼさないためのメリットですね。メールだとどうしても夜中は気を使ってしまいますから。ECサイトなどで定休日がある場合でもお問合せフォームなら受付することができますしね。

一応「24時間受付してます」といったこと宣言して書いておくといいかもしれません。

  • メールアドレスを非公開にできる
  • 送信者側からみて記入に手間がかからない
  • 24時間受付する事ができる
  • 機会損失を防ぐ

メリットばかりのようですが、サイトによっては「名前」、「URL」が必須になっていたりと匿名性が薄い場合もあります。また、大手サービスの場合すぐに電話で聞きたいのにお問合せフォームしかなくワンクッション置いた感じが手間と感じてしまうということもあるようです。

Googleフォーム

Googleフォームが良さそうだったので使ってみることにしました。このサービスはお問合せフォームだけでなくWEBアンケートにも使われているサービスです。

まずはこちらにアクセス。真ん中の「Google フォームを使う」を選択します。

googleform-contact2-min

するとこのような画面になります。赤文字で記したところが設定する際のポイントとなるところなので覚えておきましょう。

googleform-contact3-min

緑色で記した「回答」というところは、「質問=お問合せ項目」に対する「回答=お問合せ内容」です。設定をしないとユーザーからのお問合せ内容をここから見るしかありませんが、ある設定をする事でメールで受信できるようになります。その設定方法については後程。

「フォーム」作成方法

では、早速作ってみましょう。ちゃっちゃっと作っていきますよ。

googleform-contact4-min

1. 「項目タイトル」… ここでいったら名前、アドレス、ホームページ、お問合せ内容

2. 「プルダウンから選択」
googleform-contact5-min

「記述式」を選択。お問合せ内容になる項目は「段落」を選択。その他「ラジオボタン」「プルダウン」もある。

3. 「必須」… 入力を必須にする場合は有効にする

4. 「削除」… 項目を削除する

5. 「+」… 項目を追加する

6. 「移動」… 項目を移動、順番を変える

はい、このような操作方法の流れで作っていきます。そして作ったフォームがこちら。上の「プレビュー」から確認できます。

googleform-contact6-min

埋め込み

フォームが完成したら上の「送信」から一番右の項目を選択。あとは表示させたいページにこのHTMLを埋め込むだけです。

googleform-contact7-min
ここで気にしたいのが「高さ」です。これが低いとフォーム全体が内部でスクロールしてしまいます。僕の環境では1300px以上であればしっかりと表示させることができました。

メール宛てに自動送信する

これだけでは作業は終わりません。自分でスクリプトを設定しないとメールに飛ばすことができないのです。といってもスクリプトをあまり知らないのでこちらの記事を参考にしました。

問い合わせフォームを簡単に作成できる「Googleフォーム」とGoogle Apps Scriptを使って、問い合わせメールへ自動で返信するシステムを作ろう。

上のメニューから「1」→「2」と選択します。

googleform-contact8-min

▼するとこのような画面が開くのでこちらのコードをコピー

function submitForm(e){
var itemResponses = e.response.getItemResponses();
var message = ”;
for (var i = 0; i < itemResponses.length; i++) {
var itemResponse = itemResponses[i];
var question = itemResponse.getItem().getTitle();
var answer = itemResponse.getResponse();
message += (i + 1).toString() + ‘. ‘ + question + ‘: ‘ + answer + ‘\n’;
}
var address = ‘☆あなたのGmailアドレスを記入☆’;
var title = ‘お問い合わせフォームが送信されました’;
var content = ‘以下の内容でフォームが送信されました。\n\n’ + message;
GmailApp.sendEmail(address, title, content);
}

&ペーストします。

次に「リソース」→「現在のプロジェクトのトリガー」→プロジェクト名の編集「OK」と選択。

googleform-contact9-min

「保存」→「許可を確認」
googleform-contact10-min

「許可」する
googleform-contact11-min

確認してみる

それではちゃんと設定してみるか確認してみましょう。自分で自分に問い合わせしてみます。

↓成功です。しっかり自動転送されています。

googleform-contact12-min

自動転送の設定が面倒な気がしましたが、Googleが提供しているサービスなので文字化けなどの不具合の心配はないでしょう。皆さんもぜひGoogleフォームでお問合せフォームを設置してみて下さい。

関連記事




この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterでめちゃログをフォローしよう!