俺の独断と偏見を聞いてほしい

仕事と育児の狭間でカキカキしているブログです。キャッシュレス決済を中心に役立つ情報を発信しています!

【初心者でもわかる】問い合わせフォームを作成し、はてなブログへ登録する方法

f:id:tanakayuuki0104:20190303090615j:plain

そう言えばこのブログ、

「問い合わせフォーム」がないことに気づきました。

 

自分の学びも含めて、

最初から作成方法を紹介していきたいと思います!

 

問い合わせフォームとは?

よくある、こんなやつですね。

f:id:tanakayuuki0104:20190302165652p:plain

名前や連絡先と質問内容を入力してもらい、

個人間でやり取りをするためのフォームになります。

 

グーグルアプリで上記のフォームを作成し、

はてなブログにHTMLを貼り付けるという作業になります。

 

私も早速、サイドバーの【リンク】に追加してみました! 

よかったら、参考に見てみてくださいね。

https://www.re-menn.com/inqury

 

問い合わせフォームの作り方

・まずグーグルのトップ画面を立ち上げます。

・右上にグーグルアプリ(●が9つ並んだやつ)がありますので、選択。

・小窓がでますので、下のほうにある「もっと見る」をクリックします。

f:id:tanakayuuki0104:20190302171651p:plain

 

 ・また下の方へいき、「さらにもっと」を選択。

f:id:tanakayuuki0104:20190302204025p:plain

 

・サービス一覧にある、「フォーム」を選択します。

f:id:tanakayuuki0104:20190302204123p:plain

 

・以下のような画面になりますので、「Googleフォームを使う」を選択。

f:id:tanakayuuki0104:20190302204203p:plain

 

・新しいフォームの作成から「空白」を選択します。

f:id:tanakayuuki0104:20190302204249p:plain

 

ここから、いよいよ本格的なフォーム作りとなります!

 

・フォームに記載する項目を追加していきます。 

 ①フォームのタイトル
 ②フォームの説明
 ③名前*
 ④メールアドレス*
 ⑤件名
 ⑥内容*

 上記以外の項目を追加しても構いません。

 私は(* )入力必須事項としています。お好みです。

 

・まずは①、②を入力します。

・①はフォームのタイトルとなりますので、「お問い合わせ」でもなんでも構いません。

・②はフォームの説明です。どんなフォームなのかを簡単に説明しておきましょう。

f:id:tanakayuuki0104:20190303073815p:plain

・③〜⑥は、上画像の四角枠を追加する形で増やしていきます。

 

③〜⑤を作成していきます。

・表題を入力し、右にあるプルダウンメニューから「記述式」を選択します。

f:id:tanakayuuki0104:20190303073945p:plain


 ・入力必須項目は右下の必須を有効にします。

f:id:tanakayuuki0104:20190302214142p:plain

 

・項目を増やすために、右にある「+」を選択します。

f:id:tanakayuuki0104:20190303074528p:plain

・④、⑤を同様に作成します。

 

・⑥については、「記述式」ではなく、「段落」を選択しましょう。

  •  記述式は短文(1行)のみ
  •  段落は長文(改行可能) 

f:id:tanakayuuki0104:20190302214229p:plain

 

・最後に調整です。

・右上に以下のアイコンがあります。 

f:id:tanakayuuki0104:20190302214326p:plain

・パレットアイコンは「色の変更」

・目のようなアイコンは「プレビュー表示」ができます。 

・仕上がりを確認しておきましょう!!

 

これでフォーム作成は完了です。

 

はてなブログへの登録方法

フォームのHTMLを取得する

・右上にある「送信」を選択します。

f:id:tanakayuuki0104:20190302214358p:plain

 

「<>」アイコンを選択しましょう。

f:id:tanakayuuki0104:20190302214434p:plain

 

・HTMLが表示されますので、コピー 。

f:id:tanakayuuki0104:20190302214510p:plain

 

 はてなブログへの貼り付け

・はてなブログ管理画面の「固定ページ」を選択。

・「ページを作る」にページのURLを入力します。

 なんでも構いませんが、私はinqury(問い合わせ)にしています。

f:id:tanakayuuki0104:20190302215833p:plain

・その後、右にある「ページを作る」ボタンを選択 

 

・「編集見たまま」画面で表題を入力します。f:id:tanakayuuki0104:20190302215910p:plain

 

・次に「HTML」画面に移動し、コピペしたHTMLを貼り付けましょう!
f:id:tanakayuuki0104:20190302215944p:plain

・プレビュー画面で確認し、OKなら「公開する」を選択します。

f:id:tanakayuuki0104:20190303080536p:plain

 

これで問い合わせページの作成も完了しました。

 

あとはブログの適当な位置に設置しておきましょう。

私は、サイドバーに表示させています。

f:id:tanakayuuki0104:20190303080918p:plain

 

通知の設定

最後になりますが、

問い合わせフォームに回答がきたとしても、通知はありません。

なので、通知が来るように設定をしておく必要があります。

 

・まずは「Googleフォーム」に入ります。

f:id:tanakayuuki0104:20190302204203p:plain

 

・先ほど作成したフォームがありますので、選択します。

f:id:tanakayuuki0104:20190303081931p:plain


「回答」欄を選択し、右側にある「3つ●アイコン」を選択します。

・そこにある「回答先の選択」をクリックします。

f:id:tanakayuuki0104:20190303082509p:plain

 

・新しいスプレッドシートを作成にチェック(初期設定)

・右側のファイル名欄を記入します。

 最初は「無題」になっていますので、「お問い合わせ」にでもしておきましょう。

・その後「作成」を選択。

f:id:tanakayuuki0104:20190303082631p:plain

 

 

・先ほど作成したスプレッドシートを確認します。

・まずは「ドライブ」へアクセス。

f:id:tanakayuuki0104:20190303084109p:plain

 

・マイドライブにファイルが作成されていることを確認し、選択します。

f:id:tanakayuuki0104:20190303084124p:plain

 

「ツール」を選択し、「通知ルール」をクリックします。

f:id:tanakayuuki0104:20190303084216p:plain

 

・下記2つの選択を有効にしましょう。

f:id:tanakayuuki0104:20190303084311p:plain

・完了したら「保存」で完了です。

・これでGoogleアカウントに登録されたメールアドレスへ通知が来ますよ。

 

まとめ

以上で作業は完了となります。

お疲れ様でした。

 

念の為、

自分で問い合わせフォームに入力して、

通知が来るか確認しておきましょう!