はてなブログの設定:お問い合わせフォーム追加


どうも、果汁1%程度です

 

はてなブログの設定シリーズ

 

f:id:kajyu-1per:20200223143613p:plain

 

今回はお問い合わせフォーム

を追加してみようと思います

 

追加方法はこんな感じ

 

?

 

Googleフォーム作成

お問い合わせフォームはGoogleのフォームを利用します

フォーム作成へ移動

Googleのフォーム作成に移動します

 

Google検索サイトの右上の f:id:kajyu-1per:20200509144545j:plain マークをクリック

一番下までスクロールさせて

「その他のソリューション」をクリック

f:id:kajyu-1per:20200509144909j:plain

 

 表示されたページを下までスクロールすると

「すべての人向け」という中に「フォーム」

があるのでクリック

f:id:kajyu-1per:20200509145425j:plain

 

「フォームを使ってみる」 をクリック

f:id:kajyu-1per:20200509145656j:plain

 

フォームの作成

 新しいフォームを作成の中から「空白」をクリック

f:id:kajyu-1per:20200509145901p:plain

無題のフォームが表示されます

f:id:kajyu-1per:20200509145945p:plain

 

フォーム名を「お問い合わせ」

フォームの説明を「お問い合わせフォーム」

という感じに変更

f:id:kajyu-1per:20200509150042p:plain

 

名前入力欄追加

オプション1をクリックします

質問名は「お名前」

入力タイプは「記述式」

入力は「必須」に変更

f:id:kajyu-1per:20200509151422j:plain

 

メールアドレス入力追加

追加したお名前入力の右にあるf:id:kajyu-1per:20200509151156j:plainマークをクリック

f:id:kajyu-1per:20200509151104j:plain

質問名を「メールアドレス」

入力タイプを「記述式」

入力は「必須」に変更

f:id:kajyu-1per:20200509151649j:plain

 

件名入力追加

質問名は「件名」

入力タイプは「記述式」

入力は「必須」に変更

f:id:kajyu-1per:20200509152011p:plain

 

お問い合わせ内容入力追加

質問名は「お問い合わせ内容」

入力タイプは「段落」

入力は「必須」に変更

f:id:kajyu-1per:20200509152112p:plain

 

作成フォームの保存

作成したフォームは自動で保存されるようです

f:id:kajyu-1per:20200509153512p:plain

 

フォームの設置

はてなブログに作成したフォームを追加します

設置用URLの作成

フォーム作成画面の右上の「送信」ボタンをクリック

f:id:kajyu-1per:20200509153821j:plain


表示された画面の<>マークをクリック

f:id:kajyu-1per:20200509154009p:plain

 

右下の「コピー」をクリック

張り付けるコードがコピーされたので

メモ帳等に張り付けておきます

 

はてなブログへの設置

 作成したフォームをはてなブログに設置します

 

固定ページの作成

はてなブログでは固定フォームに追加しておきます

 

ダッシュボードの固定ページをクリック

f:id:kajyu-1per:20200509154354j:plain

 

「ページを作る」のURLを作成します

今回は「contact_us」にしました

自由につけて問題ありません

 

入力したら「ページを作る」をクリック

f:id:kajyu-1per:20200509154425p:plain

ページの題名は「お問い合わせ」等にしておきます

本文はHTML編集にしてURLの作成でコピーしておいた

コードを張り付けます

f:id:kajyu-1per:20200509171857j:plain

貼り付けたら公開するボタンをクリック

f:id:kajyu-1per:20200509155115j:plain

 

サイトバーへの追加

サイドバーに作成した固定ページへの

アクセスを追加します

 

ダッシュボードの「デザイン」をクリック

f:id:kajyu-1per:20200509155429j:plain

 

カスタマイズマークf:id:kajyu-1per:20200509155616j:plainをクリック

f:id:kajyu-1per:20200509155729j:plain

 

サイドバーをクリックして

「+モジュールを追加」をクリック

f:id:kajyu-1per:20200509155826j:plain

 

表示された画面の「リンク」をクリック

f:id:kajyu-1per:20200509160306j:plain

 

タイトルを「お問い合わせ」

リンクを「お問い合わせフォーム」

URLを固定ページ作成時に指定したcontact_usとします

例:http://ブログのURL/contact_us

 

f:id:kajyu-1per:20200509161328j:plain

 

入力したら「適用」をクリック

 

再度バーに無事追加されました

f:id:kajyu-1per:20200509161456j:plain

 お問い合わせの確認

お問い合わせを確認してみます

 

送信確認

必須項目を入力して送信をクリック 

f:id:kajyu-1per:20200509172546j:plain

 

お問い合わせが送信されました
f:id:kajyu-1per:20200509172616p:plain

 

受信確認

フォームを作成したサイトを開いてみます

回答が1となっています、回答をクリック

f:id:kajyu-1per:20200509173250j:plain


問合せ内容が確認できました

メール通知設定

お問い合わせがあった場合にメールで

通知されるよう設定をします

 

回答の右上のf:id:kajyu-1per:20200509174236j:plainマークをクリック

f:id:kajyu-1per:20200509174109j:plain

 

「新しい回答についてのメール通知を受ける」をクリック

f:id:kajyu-1per:20200509174443j:plain


クリック後に画面左下に下記が表示されればOK

f:id:kajyu-1per:20200509174625j:plain

 

以上、

はてなブログにお問い合わせフォームの追加でした