医-ラーニング

医療事務や医療情報系のお勉強とその他イロイロ

【はてなPro】お問い合わせフォームの作成

はてなブログをPro化したけどその後は??

どもども。しよです。

はてなブログを無料版からPro版に変更したので、先日から記事にしています。

アドセンスの申請にはお問い合わせフォームも必要ということで、お問い合わせフォームを作成することにしました。

今回はお問い合わせフォームについてです。

 

前回分はコチラ ↓ ↓ ↓ 

www.shoku-pan.net

 

www.shoku-pan.net

 

www.shoku-pan.net

 

お問い合わせフォーム

お問い合わせフォームってどうしたらいいのだろうねぇ??

Googleフォーム使ったらいいよ!

なぬっ、Googleフォーム??

調べてみると、アンケートフォームみたいですが、お問い合わせにも使えます。

www.google.com

それでフォームを作って、ブログに貼り付けることにしました。

 

Googleフォームの作成

GoogleフォームでググるとGoogleフォーム作成のサイトがありますので、そこにアクセスします。

https://www.google.com/intl/ja_jp/forms/about/

Googleフォームのサイトを開いて、『Googleフォームを使う』をポチ。

f:id:sho-sh:20180926103345j:plain

この時、自分のアカウントでログインしていない場合は、ログインをしてください。

フォームの作成画面が表示されるので、『新しいフォームを作成』をポチ。

f:id:sho-sh:20180926103619j:plain

『新しいGoogleフォームのご紹介』というメッセージが表示されますので、使い方ガイドを確認してもいいのですが、不要な場合はスキップしてください。

f:id:sho-sh:20180926103654j:plain

フォームを作成する画面が表示されます。

  • タイトル
  • フォームの説明
  • 名前
  • メールアドレス
  • 内容

これを設定していきます。

f:id:sho-sh:20180926161454j:plain『無題のフォーム』にタイトルや名前を入力します。

 

『無題のフォーム』⇒タイトル

『フォームの説明』⇒説明文

 

『無題の質問』に『名前』『メールアドレス』『内容』を設定していきます。

 

『無題の質問』⇒名前

右にある『ラジオボタン』のままだと、複数の選択肢より回答を選択するものとなるので、『ラジオボタン』右にあるプルダウンメニューで『記述式』を選択します。

『記述式』を選択すると短文での回答フォームとなります。

必須にたい項目は、右下にある『必須』をポチっと。

f:id:sho-sh:20180926162226j:plain

入力が終了したら、画面右側にある『+』マークをポチ。

f:id:sho-sh:20180926164237j:plain

新しい『無題の質問』が表示されるので、先ほどと同じように『メールアドレス』を作成します。

f:id:sho-sh:20180926164653j:plain

最後、『内容』です。

『内容』は短文ではなく長文にしたいので、『記述式』と選んでいたところを『段落』にします。

『段落』にすると長文の回答が可能になります。 

f:id:sho-sh:20180926164819j:plain

フォームができたら、次はフォーム右上にあるボタンを使用していきます。

f:id:sho-sh:20180926165207j:plain

1番左のボタンでフォームの色などテーマを変更できます。ポチっと。。

好きな色に変更してください。

この時、画像を選択すると、画像を背景にもできるようです。

いい画像がないので、今回は色を選ぶだけ。

【注意】ブログのテーマによっては、そのテーマの色が優先されるようです。

f:id:sho-sh:20180926165312j:plain

先ほどのフォーム右上のボタンの左から2番目の『目』のボタンはプレビューができるので、そこで確認をしながら、作ってください。

f:id:sho-sh:20180926165610j:plain

プレビューをしてみると、このようになります。

f:id:sho-sh:20180926165732j:plain

これでよければ、あとはブログに貼り付けるURLを取得します。

f:id:sho-sh:20180926165840j:plain

右上にある『送信』ボタンをポチ。

送信方法の右にある『<>』ボタンをポチ。

f:id:sho-sh:20180926165905j:plain

そうすると、HTMLが表示されますので、これをコピーします。

f:id:sho-sh:20180926170029j:plain

以上でGoogleフォームでの操作は終了です。

次にはてなブログに設置してみましょう!

 

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

プライバシーポリシーと同様に、固定ページで問い合わせフォームを作成します。

『ダッシュボード』⇒『固定ページ』

ここの『ページを作る』ところにURL名を入力します。

今回は『contact』としてみました。

入力ができたら『ページを作る』をポチ。

f:id:sho-sh:20180926170456j:plain

いつもの記事作成画面が表示されるので、タイトルを入力し、『HTML編集』を選択します。

f:id:sho-sh:20180926170740j:plain

『HTML編集』画面で先ほどGoogleフォームでコピーした『HTML』を貼り付けます。

f:id:sho-sh:20180926170830j:plain

『編集見たまま』または『プレビュー』でできあがりを確認してみましょう。

f:id:sho-sh:20180926170958j:plain

よければ『公開する』ボタンをポチです。

f:id:sho-sh:20180926171106j:plain

ページを見てみましょう。

f:id:sho-sh:20180926171242j:plain

できてる!

おめでとうございます。

f:id:sho-sh:20180926172101j:plain

 

次回は

前回と今回で『プライバシーポリシー』と『お問い合わせフォーム』を作成しました。

ただ、今は作っただけで、ブログ内のどこにも表示されていません。

URLを直接指定しないと確認できない状況です。

次回でこの2つをサイドバーにでも設置していきましょう。

 

ブログランキング・にほんブログ村へ
ポチっとお願いします