アメブロでブログを開設している方から「今までメールアドレスをブログに載せていたが、迷惑メールがたくさん届くのでなんとかしたい。メールフォームを設置することはできないか」と問い合わせをいただきました。
アメブロのコメント欄だとやり取りを他のユーザーからも見られるようになっているので、込み入ったやり取りはメールで、とメールアドレスを載せているとのことですが、ブログやホームページなどにメールアドレスを載せるということは、それだけ迷惑メールが送られてくるリスクが高まります。
一昔前なら、HTMLやCGIなどを使ってメールフォームを作成・設置することがほとんどだったのですが、今ではメールフォームはレンタルできる時代、自分で作成しなくてもメールフォームは利用できるようになります。
いくつかメールフォームがレンタルできるサービスをご紹介したのですが、どれも広告が入るのが気になるとのこと。
それならと、ブログにGoogleフォームで作成したメールフォームを設置してみてはどうかと提案させていただいたところ、やってみたいとのことでしたので、その方法をご紹介しました。
この記事では、無料ブログサービス(今回はアメブロ)に、Googleフォームで作成したメールフォームを設置する方法を書いていきます。
アメブロにGoogleフォームで作成したメールフォームを設置する方法
Googleフォームでメールフォームを作成する
Googleを開き、右上にあるアプリアイコンをクリック→「ドライブ」をクリックし、Googleドライブを開きます。
Googleドライブを開いたら、画面左上にある「新規」ボタンをクリック
「Googleフォーム」→「テンプレートから」をクリック
テンプレート一覧が表示されたら、その中から「パーソナル」にある「連絡先情報」をクリックします。
連絡先情報と入力されているところ(タイトル)をクリックし、任意のタイトル(今回はお問い合わせ)に入力し直します。
Google フォームで作成したメールフォームからメールが送信されたら通知されるように設定する
このままでもいいのですが、メールフォームからメールが送信されたらGmailに通知されるように設定しておくと見忘れを防ぐことができます。
Googleフォームで作成したメールフォームからメールが送信されたら通知されるように設定するには、「回答」タブをクリック→「…」をクリック
「新しい回答についてのメール通知を受け取る」をクリック
自動返信を設定しておく
次に、メールフォームからメールを送信した人にメールが送信できたことを通知する「自動返信」を設定します。
「設定」タブをクリック→「メールアドレスを収集する」のスライダーをオンにする
自動返信メールの内容は、「プレゼンテーション」の欄にある「確認メッセージ」の「編集」をクリック
確認メッセージに入力した内容が自動返信メールに反映されますので設定しておきましょう。
最後に、Googleフォームのテンプレート「連絡先情報」に設定されている項目で不要なもの(住所や電話番号など)は「質問」タブをクリックして、メールフォームの外観を表示し、項目をクリックして削除しておきましょう。
メールフォームがどのように表示されるかを画面右上にある「プレビュー」ボタンをクリックして確認しましょう。
アメブロはメールフォームを直接設置できない
できあがったメールフォームをアメブロの記事に設置します。が、ここでアメブロだとできないことがあります。
それは、インラインフレームでのメールフォーム設置です。
インラインフレームとは、画面全体が親、画面の一部が子という表示方法なのですが、アメブロはインラインフレームのタグ(iframe)を禁止タグに設定しています。
無料ブログサービスの中にはアメブロのように禁止タグに設定されているタグがありますので、どの無料ブログサービスでもおそらく設置できるであろう「リンク」を使って、アメブロからメールフォームへのリンクを設定していきます。
アメブロにGoogleフォームで作成したメールフォームへのリンクを設置する
Googleフォームで作成したメールフォームのURLをコピーする
Googleフォームで作成したメールフォームのURLをコピーするには、画面右上にある「送信」ボタンをクリック
リンクアイコンをクリックし、表示されたhttpsで始まるURLを「コピー」ボタンをクリックしてコピーします。
アメブロの記事にGoogleフォームで作成したメールフォームのURLを貼り付ける
アメブロの記事投稿画面を開き、お問い合わせはこちらなどの文言を入力して選択、「リンクを作成」ボタンをクリック
URLの枠の中に先ほどGoogleフォームで作成したお問い合わせフォームのURLを貼り付け、「リンクを挿入する」ボタンをクリックします。
とはいっても、毎回記事を投稿するたびにリンクを作成する手間を省くなら、アメブロのブログ記事に定型文を入れる方法と合わせて使うといいかなと思います。
Googleフォームを作成しアメブロの記事内にリンクを貼り付けたけれどスマホで動作しないというお問い合わせをいただきました。Googleフォームのコピーを使わず、Googleフォームの作成URLを貼り付けるとうまく動作したというご連絡をいただきました。お問い合わせくださったKさん、ありがとうございました。