「Google Forms」を使ってブログにメールフォームを作る
こんにちは、発狂ねこです(^ ・∀・^)
今回は「Google Forms」という機能を使ってブログにメールフォームを作る方法をご紹介します。
「連絡をもらえる手段を置いておきたいけど、セキュリティの問題などからアドレスを直接ブログに貼りたくない~」という方におすすめです。
こんな感じになります→お問い合わせフォーム - A CAT'S EDEN
※名前通りGoogleの機能なので、Googleアカウントの取得が前提です。
作成準備
下記からGoogle Formsのトップページに飛び、ページ中央の「Googleフォームを使う」をクリックしてください。
Googleにログイン状態になっていない場合はログインを求められますので、必要な情報を入力してログインしてください。
移動したページの右下に、フォームの新規作成ボタンがあるのでクリックしてください。
赤い円の中に「＋」の記号が入ったボタンです。
ボタンを押して下記のような画面に飛べばOKです。
ここから作成を行っていきます。
作成
まずはメールフォームのタイトルと、説明を記入しましょう。
タイトルは「〇〇にメール」「お問い合わせフォーム」など、意味が通じれば何でもいいと思います。
次にメールを送る側が記入すべき項目を設定します。
基本的には「名前」「メールアドレス」「本文」があればメールフォームとしては成立しますね。
項目名を入力し、項目のタイプを「名前」「メールアドレス」の場合は「記述式」、「本文」の場合は「段落」に設定し、それぞれ必須項目の設定をONにしてください。
項目の追加は右側の「＋」ボタンをクリックすることで行えます。
作成ページ右上のパレットアイコンから色の変更、瞳のアイコンからプレビューを確認できます。
それぞれの項目を設定した後、プレビューで下記のようになればOKです。
これでフォームの作成自体は完了です。
ちなみに受信メールを確認する際もこのページを使うので、ブックマーク推奨です！
続いてこれをブログに埋め込む手順を説明します。
フォームの埋め込み
まずは作成したフォームのHTMLタグを取得しましょう。
フォーム作成ページの右上の「送信」ボタンを押し、ウィンドウを出現させます。
ここで送信方法のタブから埋め込みコード表示を表す「< >」を選択します。
デフォルトの高さが 500ピクセルになっていますが、このままだと埋め込んだ際に縦幅が狭くシークバーを使わないと全ての項目が表示されないため、高さを調節する必要があります。
研究の結果、上記3つの項目の場合には950ピクセルがちょうどよい高さでしたので信じて設定してみてください。
その後に表示されるHTMLが、ブログに埋め込む際に必要なHTMLタグになりますので、メモ帳などにメモしておくことを推奨します。
次に上記タグをブログに埋め込んで行きます。
ブログの管理画面で「固定ページ」というページを作成できる機能があれば、固定ページとして作成することを推奨します。
記事の1つとしてページを作成してもいいのですが、他の記事と同じ扱いになるためにアーカイブなどの記事一覧に表示されてしまいます。
どちらにせよ、「HTML編集モード」を選択し、タグを貼り付けてページを作成すれば埋め込み完成です。
フォームへのリンク作成
折角メールフォームを埋め込んだページを作ってもブログ閲覧者に知られないことには意味がありませんので、サイドバーなどにリンクを作りましょう。
ブログのサイドバーなどの機能に「リンク」があれば、そこからリンクさせるのもいいでしょう。
作成したページのアドレスを設定するだけなので容易くできるはずです。
しかし、もし他のリンクと区別して配置させたいという場合は、HTMLを自由に書ける機能があれば、下記のコードを書くことでリンクを設置することができます。
コピペし、言葉の調整、アドレス差し替えを行えば完了です。
<p>何かあれば下記からご連絡ください</p>
<p><a href="メールフォームを埋め込んだページのアドレス">メールフォーム</a></p>
こんな感じになります！
受信メールの確認
受信メールの確認については、フォームを作成したページで行うことができます。
フォーム作成の際に使っていた「質問」のタブから「解答」のタブに切り替え、「個別」を選択することでメールの内容を確認できます。
またGoogleのGメールを使用している場合、右上の3点リーダーをクリックした時に出現する項目の「新しい回答についてのメール通知を受け取る」をクリックして有効にすることで、メールをもらったことを通知するメールがGメールに送られます。
以上となります。
実は私、英語で「バナナを購入した代金40ドルを払え！」という架空請求メールが来てから、メールのセキュリティには敏感になっています。
日本語だったら「そ、そんなバナナ」と古いギャグで返信するところでした。
皆さんもくれぐれも気をつけてくださいね。
それではお後がよろしいようで((((^ ・∀・^)
