ちゅみみの虹色の太陽

鳥は前にしかすすまない!人生は前進あるのみ

【はてなブログPRO】簡単!Googleフォームでお問合せフォームを作成する方法

f:id:chu-mimi:20210719045458p:plain

 

はてなブログで、アドセンスなど収益化を図る際には、必ず必要なお問い合わせフォームの作成をGoogleフォームを使って簡単に設置する方法です。

 

お問合せフォームを設置することにより、アフェリエイトで商品の依頼がきたり、Googleアドセンスの審査に通りやすくなるともいわれています。

こちらのフォームをつかってメールが来るので連絡先などの個人情報を乗せる必要もないのが安心ですね。

 

このようなフォームを作成します。

f:id:chu-mimi:20210719103542p:plain

 

 

それではGoogleフォームを使ってサイドバー設置のお問い合わせを作ってみましょう。

 

www.google.com

 

Googleフォームを作成する

▼【Google フォームを使ってみる】をクリックし始めます。

f:id:chu-mimi:20210719025847p:plain

 

▼【新しいフォームを作成】で【空白】を選びます。

f:id:chu-mimi:20210719030308p:plain

 

フォームのタイトルを作る

▼フォームの作成画面で、タイトルを作ります。

f:id:chu-mimi:20210719030824p:plain

入力ポイント

①無題のフォームに【お問合せ】と入力します。

②フォームの説明には【お問合せはこちらからお願いします】と入力します。

 

名前の記入欄の作成

▼問合せをする方の名前を記入する欄を作成します。【無題の質問】をクリックします。

f:id:chu-mimi:20210719034308p:plain

 次のような画面になります。

f:id:chu-mimi:20210719042228p:plain

入力ポイント

①【お名前】と入力します。

②ラジオボタンと書いてある右側の▼をクリックして【記述式】を選択します。

 

メールアドレスの記入欄の作成

▼問合せする方がメールアドレスを入力する欄を作ります。右側の⊕マークをクリックします。そうすると同じ項目が追加されるのでそこに入力します。

f:id:chu-mimi:20210719042837p:plain

 続いて入力します。

f:id:chu-mimi:20210719053113p:plain

 

入力ポイント

①【メールアドレス】と入力します。

②【記述式】を選択します。

③ボタンをオンにして【必須】します。

 ▼下にある①をクリックします。

f:id:chu-mimi:20210719050518p:plain

入力ポイント

点のところをクリックして表示を出します。

②【回答の検証】をクリックしてチェックをいれます。

【回答の検証】を設定しておくと、メールアドレス以外の文字が入った時に『有効なメールアドレスを入力してください』などのエラーになります。誤記入防止の為に設定しておくと便利です。 

 

f:id:chu-mimi:20210719051147p:plain

入力ポイント

①▼で【テキスト】を選択します。

②▼で【メールアドレス】を選択します。

 

お問い合わせ内容の項目を作成

 ▼問い合わせする方が内容を記入する項目です。メールアドレスの項目を追加した際に追加したのと方法は同じです。⊕をクリックしてさらに入力項目を追加します。

 

f:id:chu-mimi:20210719052853p:plain

入力ポイント

①【お問い合わせ内容】と入力します。

②【段落を選択】します。

③【必須】のボタンをオンにします。

 

これでフォームの型が完成しました。

 

 詳細設定を行う

 

f:id:chu-mimi:20210719054232p:plain

入力ポイント

①上部の真ん中にある【回答】をクリックします。

②点のところをクリックします。

 点をクリックすると下記の様にあらわれるので【新しい回答についてのメールを受け取る】にチェックをいれます。

f:id:chu-mimi:20210719054741p:plain

 

※チェックを入れておくことで、問い合わせがあった時にGmailにメールが届くようになります。

 

▼次は画面右上にある歯車の【設定】アイコンをクリックします。 

f:id:chu-mimi:20210719055403p:plain

 次の画面がひらきます。

f:id:chu-mimi:20210719102858p:plain

入力ポイント

①【プレゼンテーション】を選ぶ

②【別の回答を送信するためのリンクを表示】のチェックを外す。

③【お問い合わせありがとうございます。】と入力します。

④【保存】を押します。

 このようにフォームができたと思います。お疲れ様でした。

f:id:chu-mimi:20210719103542p:plain

次は、はてなブログに設置していきます。

 

はてなブログにお問合せフォームを設置する

 

HTMLをコピーする

①先ほどのGoogleフォームで完成したフォームの右上の紫の部分の【送信】をクリックすると下記画面になります。

f:id:chu-mimi:20210719104750p:plain

設置方法

①【送信】をクリックします。

<>を選択します。

③【HTMLを埋め込む】をクリックします。

④【コピー】します。

 ※クリップボードにはりつけられた状態になりました。

これをはてなブログに貼り付けます。

 

はてなブログのPROの固定ページを作成する

▼①はてなブログの固定ページをクリックします。

f:id:chu-mimi:20210719110554p:plain

設置方法

①固定ページを開きます。

②URLに【otoiawase】とローマ字で入力します。

③【ページを作る】をクリックします。

 ▼固定ページの下書きになります。

f:id:chu-mimi:20210719135842p:plain

設置方法

①【HTML編集】にします。

②タイトルには【お問合せフォーム】と入力します。

③ここに先ほどコピーしたHTMLを貼り付けます。一度プレビューで確認してください。フォームがうまく表示されていたら④の公開ボタンを押します。

④【公開】する

 (後ほど上記②で作成した、お問い合わせ固定ページのURLを入力する項目があります。メモ帳などにコピペで貼り付けて保存していてもいいですし、後ほど画面を開いてコピペでもOK)

 

サイドバーにお問合せフォームを設置する

デザイン】→【スパナ型のマークのカスタマイズ】→【サイドバー】を選択してください。

 

+モジュールを追加】をクリックします。

f:id:chu-mimi:20210719141532p:plain

 

 下記画面があらわれます。

f:id:chu-mimi:20210719142344p:plain

設置方法

①【リンク】をクリックします。

②タイトルには【お問い合わせ】または【このサイトについて】と入力します。

③リンクのタイトルには【お問い合わせ】と入力します。

④先ほど作成した固定ページのお問い合わせのURLを貼り付けます。URLの確認方法は※下にのせておきます。

⑤すべて入力出来たら【適用】をおします。

 管理画面の【変更を保存する】ボタンも忘れずにクリックしてくださいね。

 

※固定ページで作成したお問い合わせページのURLの確認方法

上記④で入力する固定ページで作成したURLの確認方法です。

f:id:chu-mimi:20210719143852p:plain

固定ページをひらき、ページの管理【記事タイトル】にお問合せフォームがあります。右側の【記事を見る】を右クリックするとでてくる画面で【リンクのアドレスをコピー】できます。

 

最後はサイドバーにお問い合わせが追加されているか確認してみてくださいね。

 

f:id:chu-mimi:20210719143337p:plain

 以上で終了です。

役にたつと嬉しいです。