はるなぴログ

WEBサイト作成技術研究

お問い合わせフォームの作成と設置方法

お問い合わせフォームの作成と設置方法について備忘録として書いておきます。

Google Adsenseやアフィリエイトをするならお問い合わせフォームは必須ですね。はるなぴは将来のことを考えて早めにお問い合わせフォームを早めに設置することにしました。

f:id:hal7pi:20180630173307j:plain

Google Formを利用してお問い合わせフォームを作成する方法

Googleフォームを利用してお問い合わせフォームを作成する方法について説明します。

Googleフォームでお問い合わせフォームを作成する

まずGoogle検索の画面の右上に表示されているルービックキューブを横から見たようなマークをクリックし「もっと見る」で更にGoogleのサービスを見ていきます。

f:id:hal7pi:20180630173619p:plain

「さらにもっと」をクリックします。

f:id:hal7pi:20180630173627p:plain

「フォーム」と書かれたマークを押します。

f:id:hal7pi:20180630173636p:plain

「Googleフォームを使う」をクリックします。

f:id:hal7pi:20180630173754p:plain

「新しいフォームを作成」の下の+(プラス)マークを押します。

f:id:hal7pi:20180630173813p:plain

「無題のフォーム」と書かれたフォームの雛形が表示されます。

f:id:hal7pi:20180630173828p:plain

「無題のフォーム」を「お問い合わせ」に書き換えます。

f:id:hal7pi:20180630173838p:plain

右側に表示されている+(プラス)ボタンで項目を追加します。

f:id:hal7pi:20180630173849p:plain

「記述式」を選択するとフォームに記述式で入力する項目が設定されます。「必須」のスライドバーをスライドすると入力が必須の項目として設定されます。「説明」にチェックを入れると説明文を追加することが可能になります。

f:id:hal7pi:20180630173907p:plain

お問い合わせフォームでは「お名前」「メールアドレス」「お問い合わせ内容」の3つの項目を設定しておけば良いでしょう。

f:id:hal7pi:20180630174022p:plain

最後にメール通知設定をしておきましょう。

「回答」のタブを選び「新しい回答についてのメールを受け取る」にチェックを入れます。

f:id:hal7pi:20180630174041p:plain

「回答を受け付け中」のスライダーがオンになります。

f:id:hal7pi:20180630174116p:plain

ブログに貼り付けるコードを取得する

ここまで終了したら「送信」ボタンを押してコードを取得します。

f:id:hal7pi:20180630174154p:plain

<>のマークを押すとコードが表示されますのでコピーしてテキストファイルに保存しておきましょう。

f:id:hal7pi:20180630174226p:plain

はてなブログへのお問い合わせフォーム設置方法

f:id:hal7pi:20180602173318j:plain

作成したお問い合わせフォーム用コードをはてなブログに設置します。

固定ページでお問い合わせ用の記事を作成する

ダッシュボードのメニューから「固定ページ」を選択します。

f:id:hal7pi:20180701084150p:plain

お問い合わせフォーム用のページのURLを決めて設定します。はるなぴはContactUsにしました。ウィンドウに入力して「ページを作る」を押します。

f:id:hal7pi:20180701084219p:plain

記事ページの作成画面になります。「お問い合わせフォーム」などとタイトルを入力します。「本文」のウィンドウには先ほどコピーして保存しておいたフォーム用のコードを貼り付けます。

f:id:hal7pi:20180630174410p:plain

サイドバーに固定記事を表示させる方法

固定ページとして作成したお問い合わせフォームをはてなブログのサイドバーに表示させる方法を書きます。

ダッシュボードから「デザイン」を選びます。

f:id:hal7pi:20180630174435p:plain

スパナマークのタブを選び「サイドバー」を選択します。

f:id:hal7pi:20180630174453p:plain

「+モジュールを追加」を押します。

f:id:hal7pi:20180630174503p:plain

「リンク」を選びます。

f:id:hal7pi:20180630174522p:plain

タイトルに「お問い合わせ」と入力します。その横のウィンドウには先ほど決めたお問い合わせ用のURLを入力します。左にある「適用」ボタンを押すのを忘れずに!

f:id:hal7pi:20180630174721p:plain

これでサイドバーメニューに「リンク」が追加されます。

f:id:hal7pi:20180630174734p:plain

ブログを確認して実際にお問い合わせページへのリンクが張られていることを確認しましょう。

f:id:hal7pi:20180630174835p:plain

最後に動作実験をするのも忘れずに。お問い合わせフォームに自分でメールアドレスなどを実際に入力してフォームを送信してみます。

f:id:hal7pi:20180630174846p:plain

スマホにGmailアプリをインストールしておこう

f:id:hal7pi:20180630175402p:plain

動作確認をしてGmailアドレスにメールが飛んでくればOK!完了です。

更にスマホですぐに受信できるようGmailアプリをインストールしておけばお問い合わせを見逃す危険が少なくなり安心です。

Gmailは手軽に使える無料メールアドレスとして良く利用されていますね。でも、はるなぴはGmailは基本的にGoogle関連サービスの受信用としてしか利用しないことにしています。

だってGoogle先生からのメールを見落としたら大変ですからね。お問い合わせフォームからの通知も見逃さないようにしましょう。

お疲れさまでした!