ブログの問い合わせにはGoogle フォームを使おう【プラグイン不要】

ブログにお問い合わせフォームは設置していますか？

お問い合わせフォームがあることで読者から質問や感想が届いたり、企業から仕事の依頼が来たりするので積極的に活用したいですよね。

WordPress では Contact Form 7 というプラグインをインストールしてコンタクトフォームを設置する場合が多いですよね。

Contact Form 7 はカスタマイズが比較的簡単で、スパム対策もできるので優秀です。

ただしプラグインを利用する場合には以下のようなデメリットもあります。

Google フォームを使ってみよう

Google のアカウントを持っていれば Google フォームを使えます。主にアンケートを取るときなどに使われるのですが、今回のようにブログのお問い合わせフォームとして使うこともできます。

まずは Google フォームのページへアクセスしましょう。

Googleアカウントにログインした状態で、左のパーソナル「Google フォームを使ってみる」をクリックします。

新しくフォームを作成するので左の「+」を選択します。

タイトルを設定

最初はタイトルが「無題のフォーム」となっているので任意のフォーム名に変更しましょう。

例) XXXXX (ブログ名)からのお問い合わせ

タイトル下のフォームの説明は入力しなくても問題ありません。

　次に、フォームの内容を項目ごとに1つずつ設定していきましょう。最低限以下のような項目があればお問い合わせとして成立します。

名前の項目を作成

それでは1つめの項目を作成します。

初期で「ラジオボタン」になっているところをクリックして、一番上の記述式を選択しましょう。記述式は1行入力できる欄を作成できます。

「無題の質問」を「お名前」などに変更します。

そして、右下の「必須」にチェックをいれましょう。こちらにチェックを入れるとこの項目が未回答だとフォームを送信できないようにします。

連絡先メールアドレスの項目を作成

次は、フォーム送信者の連絡先メールアドレスを入力してもらう項目を作成しましょう。

右の 縦に並んでいるアイコンを選択して項目を追加できます。

「質問内容」は「連絡先メールアドレス」などにして、同じように「記述式」を選択します。

この項目も「必須」にチェックをしておきます。

この項目はメールアドレスなので、別の内容を入力されたら困りますよね。そういった場合は入力内容が正しいかを自動的に判断させましょう。

必須ボタン右のアイコンから「回答の検証」を選びます。

「テキスト」> 「メールアドレス」として、エラーメッセージを「メールアドレスの形式が間違っています。」としておきましょう。

もしフォーム送信者が誤った内容を入力した場合はに設定したエラーメッセージを表示することができます。

件名の項目を作成

また右の「+」マークをクリックして新規項目を追加します。

最初に作った名前と同じ方法で、件名を作成しましょう。この項目がなくても問題ない場合は、必須のチェックを外すか、項目自体作成しなくてもOKです。

この件名を「質問・仕事の依頼・その他」などの項目から選択してもらう方式にしてもよいかと思います。

メッセージの項目を作成

本文であるメッセージ入力する項目を作成しましょう。

「お問い合わせ内容」などと名前をつけて、今度は記述式ではなく「段落」を選択します。段落では複数行にわたる内容を入力できます。

そして、必須にもチェックを入れておきましょう。

フォーム送信後のメッセージを設定

フォームが送信された後に表示させるメッセージを設定しておきましょう。

上部の歯車アイコンをクリックします。

スパム対策もしておこう

スパムとは迷惑メールのことです。何の対策もせずにこのままフォームを設置すると誰でもフォームからメッセージを送れてしまいます。

こういったいらない広告メッセージが来るのを防ぐためにスパム対策をしておく必要があります。

かんたんな方法ですが効果があります。私の場合は設置後1通もスパムが届かなくなりました。

ただし、ロボット(サイトを巡回して手当たりしだいに送りつけるツール)の場合には有効ですが、人間がいたずら目的で送っている場合にはあまり意味はありません。

記述式の項目を1つ作成しましょう。

右下の必須横のボタンから「回答の検証」をクリックします。

左から「正規表現 > 一致する > みかん」としたあと、エラーテキストは「入力内容を確認して下さい。」などと入力します。

続いて、また必須ボタン横のアイコンから「説明」をクリックして下さい。この項目についての説明ができます。

ここではこの入力欄に「みかん」という文字列を入力してほしいので、「ここにひらがなで「みかん」と入力してください」などと入れておきます。

「みかん」の文字列は、自由に設定して下さい。

日本人だけが送れるようにひらがな、カタカナあたりにしておきましょう。ネコでもくるまでもひこうきでもオッケーです。難しい内容だとお問い合わせしたい人がうんざりしてしまうので簡単な文字列のほうがよさそうです。

こうしておくことで、この入力欄に「みかん」と入れないとフォームを送信できないようにすることができます。

これでお問い合わせフォームは完成です。

完成したフォームをプレビュー

右上の 目のアイコン をクリックすると実際に表示されるお問い合わせフォームをプレビューできます。

メールアドレス欄に適当な文字を入れるとエラーがでるか、スパム対策のところが機能しているかなどをチェックしてみましょう。

あとはデザインなどを整えていきましょう。

デザインをカスタマイズ

右上の パレットアイコンからフォームの色を変更できます。

自分のブログのテーマカラーに合った色をしてするとよさそうです。

Googleフォームをブログに設置する

送信方法のところの 「 < > 」を選択して下さい。

下に 埋め込み用の HTMLコードが表示されるのでコピーしましょう。Windowsなら Ctrl +C 、Macなら ⌘ + C でコピーできます。

こんな感じのコード

<iframe src=”https://docs.google.com/forms/d/e/XXXXX/viewform?embedded=true” width=”640″ height=”964″ frameborder=”0″ marginheight=”0″ marginwidth=”0″>読み込んでいます…</iframe>

このコードをWordPressで使えるようにします。

WordPress の管理画面を開いて「固定ページ> 新規追加 」で新しい固定ページを作成しましょう。

タイトルは「お問い合わせ」などにします。

次に、「カスタムHTML」ブロックを追加してコピーしたコードをそのまま貼り付けましょう。

いったん保存したら、投稿画面右のメニューから「パーマリンク」を「contact」などにしておきます。

これでGoogleフォームをワードプレス上で利用できるようになりました。

フォームの回答をチェック

フォームが送信されると、自分宛てメールが届きます。

メールの「概要を表示」をクリックすると、回答を確認できます。

お問い合わせのような内容であれば「個別」で1つずつチェックしたほうが見やすいです。

一歩進んだカスタマイズをしてみよう

とりあえずお問い合わせフォームができましたがまだ改良の余地があります。

• フォームの内容を自分宛てにメール
• スプレッドシートに保存
• フォーム入力文字数の制限
• 正しく入力されたら分かるようにする
• Google フォームのデフォルトデザインをやめてオリジナルのデザインにする方法