ほったらかし系資産運用に憧れるワーママXのブログ

ほったらかし系資産運用に憧れるワーママXのブログ

資産運用の事、育児の事なんかを徒然に・・・

はてなブログでお問い合わせフォームを作成&設定【超初心者向け】

 f:id:wa-mamax:20191028144336p:plain

こんにちは!ワーママXです。

読みに来て下さって、めちゃくちゃ嬉しいです!!

 

今回のテーマ、お問い合わせフォームの設置。

私自信、色々と検索しながらやっと完成しましたので

これまた誰かの参考になればという思いで書いていきます。

 

  

お問い合わせフォームを作る

これ実はめっちゃ簡単です。早速やっていきましょう!

↓↓↓ ご自身のGoogleアカウントでログイン後、右上のしかくをクリック

f:id:wa-mamax:20191219145917p:plain

↓↓↓ こんなのが出ますので【その他のソリューション】をクリック

f:id:wa-mamax:20191219145934p:plain

 

↓↓↓ 結構下の方までスクロールして【フォーム】をクリック

 

f:id:wa-mamax:20191219150843p:plain

↓↓↓ 【Googleフォームを使ってみる】をクリック

f:id:wa-mamax:20191219150856p:plain


↓↓↓ 空白の新規フォームをクリック

f:id:wa-mamax:20191219150913p:plain



↓↓↓ フォームタイトル、フォームの説明を入力

f:id:wa-mamax:20191219150928p:plain



↓↓↓ 項目を作成していきます。まずは【お名前】を作ってみましょう。

f:id:wa-mamax:20200529114402p:plain


↓↓↓ 【ラジオボタン】となっている箇所をクリックし、項目ごとの入力方法を

選択していきます。

f:id:wa-mamax:20200529114351p:plain



↓↓↓ 必須ボタンを右にずらせば必須項目に設定できます。

f:id:wa-mamax:20200529114439p:plain


↓↓↓ 後は同じ手順で項目を追加していくだけ。

私は【お名前】【メールアドレス】【内容(必須項目設定)】の3項目で

全て【記述式】で設定しています。

f:id:wa-mamax:20200529114644p:plain



↓↓↓ デザインの変更は画面上部のパレットマークをクリック

f:id:wa-mamax:20200529114454p:plain

↓↓↓ こういうの出ますので色とかヘッダー画像をお好きに編集して下さい。

f:id:wa-mamax:20200529114511p:plain



以上でフォームの作成は終了!Google先生のお陰でかなり簡単でしたね。

 

HTMLコードをコピーする

次に、ブログに設定する時に必要なHTMLコードをコピーする作業です。

 

↓↓↓ 画面右上の【送信】をクリック

f:id:wa-mamax:20200529115228p:plain

 

↓↓↓ こんなポップアップが出るので【<>】をクリック

f:id:wa-mamax:20200529115240p:plain

 

↓↓↓ この部分をコピーして下さい。

f:id:wa-mamax:20200529115255p:plain

はてなブログに設定する

いよいよ最終工程です!!

 

↓↓↓ ダッシュボード ⇒ 固定ページ(①)

URLを入力し(②)、【ページを作る】をクリック(③)

URLについては、私は下記の通り「toiawase」としました。

f:id:wa-mamax:20200529120357p:plain

 

↓↓↓ タイトルを入力し(①)、【HTML編集】をクリック(②)

f:id:wa-mamax:20200529120411p:plain


↓↓↓ 記事欄にGoogleフォームでコピーしたHTMLコードを貼り付け

f:id:wa-mamax:20200529120426p:plain

↓↓↓【編集見たまま】をクリックして、反映されているか確認して下さい

f:id:wa-mamax:20200529120440p:plain


↓↓↓ 先ほど作ったお問い合わせの固定ページのURLをコピーしておいて下さい

f:id:wa-mamax:20200529120451p:plain



↓↓↓ ダッシュボード ⇒ デザイン 

f:id:wa-mamax:20200529145600p:plain


↓↓↓ 工具マーク(①) ⇒ サイドバー(②) ⇒ モジュールを追加(③)

 

f:id:wa-mamax:20200529145549p:plain

 

↓↓↓ タイトル、リンクタイトル、リンクURLを入力し、左下の【適用】をクリック

 

f:id:wa-mamax:20200529145626p:plain



↓↓↓ 最後にデザイン設計画面上部の【変更を保存する】をクリック

 

f:id:wa-mamax:20200529145636p:plain



 

完成です!!(●‘u‘●)

なお、お問い合わせ内容は先ほどのGoogleフォームから確認・回答できますので

テストしてみて下さいね。

 

以上、お疲れ様でした~!