気の向くままに歩き続ける.log

気の向くままに、日ごろの気になることについて綴れたら最高!

【はてなブログ無料】お問い合わせフォームを設定する方法。

f:id:naRTmo:20190330233112j:plain


こんにちは。


Google アドセンスの審査に合格するための1歩として、お問い合わせフォームを設定します。


まだ、Amazonアソシエイトの審査にも合格してませんが。。。


気を取り直して、サクッと設定しましょう。

GoogleのGoogleフォームを使って作成


いろいろな方法があるようなのですが、私はGoogleフォームで作成していきます。


Google アドセンスに合格したいので、完全なるゴマスリしてます。。。なんて(笑)


では、サクッと!


まずはGoogleアカウントでログイン → 右上のサイコロの6の目のようなボタンをクリック!


一番下の「もっと見る」をクリック!


f:id:naRTmo:20190330004958p:plain


更に一番下に「もっと見る」があるのでクリック!


f:id:naRTmo:20190330005238p:plain


Googleフォームの作成


Googleサービス一覧の「フォーム」をクリック!


f:id:naRTmo:20190330124139p:plain


下のような画面に遷移するので「Googleフォームを使う」をクリック!


f:id:naRTmo:20190330124528p:plain


フォーム作成画面に遷移したら「+(空白)」をクリックして、新しいフォームの作成を開始しましょう。


f:id:naRTmo:20190330124818p:plain


Googleフォームの設定

お問い合わせフォームなので、設定する項目を決めておきました。


①タイトル
②フォームの説明
③名前(*)
④メールアドレス
⑤件名(*)
⑥お問い合わせ内容(*)


(*)は必須項目としました。


これだけあれば十分ですので、①から作成していきましょう。


①と②はすでにデフォルトとしてありましたので文言の変更のみだけでOK。


f:id:naRTmo:20190330130103p:plain


①無題のフォーム → お問い合わせフォーム
②フォームの説明 → 「ブログのタイトルなど」のお問い合わせフォームです。


に変更しました。


次に③の名前の項目を作成していきます。
③についてもすでに項目がありましたので、デフォルトの項目を使用します。


f:id:naRTmo:20190330162222p:plain


「無題の質問」となっている箇所を「名前」に変更します。


また、このままだと「ラジオボタン」になってしまうため、ラジオボタンの右側にある「▼」をクリック。


f:id:naRTmo:20190330162459p:plain


名前が入力できるように、「記述式」に変更します。


記述式は短文を入力するときに指定します。


f:id:naRTmo:20190330162955p:plain


名前は必須項目としたいので、右下の「必須」をONに変更することで、入力が必須項目になります。


次に、④のメールアドレスの作成に進みたいのですが、ここからデフォルトの項目がないので、新規で作成します。


右側にある「+」をクリック!


項目名を「メールアドレス」へ変更して、③の名前と同様に「ラジオボタン」を「記述式」に変更します。



f:id:naRTmo:20190330165444p:plain


また、メールアドレスの入力になるので、アドレスとして正しく入力されているかをチェックため、「必須」の右隣にある、サイコロの3の目のようなボタンをクリックして、「回答の検証」を選択します。


f:id:naRTmo:20190330165819p:plain


「数値」のプルダウンより「テキスト」選択して、「次を含む」のプルダウンより「メールアドレス」を選択します。


入力したメールアドレスが正しい入力でない場合に、エラーメッセージ内容を入力します。


f:id:naRTmo:20190330170430p:plain


よくある文言ですが、「エメールアドレスが正しく入力されておりません。」を入力しました。


残っている「
⑤件名」と「⑥お問い合わせ内容」も同様に作成していきます。


⑥のお問い合わせ内容だけ、設定を「段落」にします。


お問い合わせ内容ですので、長文の入力が必要になるためです。


段落は長文を入力するときに設定します。


f:id:naRTmo:20190330164150p:plain


テーマ色のカスタマイズとプレビュー確認

パレットのマークをクリックすると、お問い合わせフォームのテーマ色を変えることができます。


目のマークをクリックすると、お問い合わせフォームがプレビューから確認できます。


テーマを緑色に変更してみました。


f:id:naRTmo:20190330164832p:plain


これで、お問い合わせフォームは完成です!


では、このお問い合わせフォームをブログに設定しましょう。

HTMLの取得

作成したお問い合わせフォームのHTMLを取得します。


右上にある「送信」ボタンをクリック!

f:id:naRTmo:20190330172615p:plain


送信方法の真ん中にある「<>」ボタンをクリックして、HTMLをコピーします。


f:id:naRTmo:20190330173108p:plain


ブログにお問い合わせフォームを設定


ようやく、ブログに作成した「お問い合わせフォーム」を設定します。


記事を書く → HTML編集をクリック!


先ほど取得したHTMLを貼り付けます。



f:id:naRTmo:20190330175216p:plain


また、カスタムURL欄には「contact」などのように、お問い合わせフォームだとわかるURLにしましょう。


f:id:naRTmo:20190330175423p:plain


編集方法に設定を変更して、きちんと表示されてるかを確認します。


正しく表示されていることが確認できれば「公開」ボタンをクリック!


f:id:naRTmo:20190330180300p:plain


サイドバーにお問い合わせフォームを設定


先ほど公開した、お問い合わせフォームのページURLを取得します。


f:id:naRTmo:20190330180953p:plain


サイドバーにお問い合わせフォームを設定したいので、


「ダッシュボード」 → 「デザイン」 → 「カスタマイズ(スパナマーク)」をクリック!


サイドバーを開きます。


f:id:naRTmo:20190330223349p:plain


サイドバーの中にある「モジュールの追加」をクリックして、お問い合わせフォームをサイドバーに追加していきましょう。


f:id:naRTmo:20190330223615p:plain


モジュールの追加をクリックすると、以下の画面へ遷移します。


左のメニューのリンクを選択して、


タイトル → サイドバーのタイトルになるので「お問い合わせ」にします。
リンク  → お問い合わせフォームのリンク名になるので、お問い合わせフォームにします。


リンクの隣には、お問い合わせフォームのページURLを貼り付けます。


f:id:naRTmo:20190330224342p:plain


「適用」ボタンをクリックすれば、ブログのサイドバーにお問い合わせフォームが表示されています。

↓こんな感じにできあがりました!


f:id:naRTmo:20190330224557p:plain


完成はしましたが、この状態ですと作成した「お問い合わせフォーム」はサイドバーの一番下に表示されているので、もう少し上にあげて表示させましょう。


私は、プロフィールの真下の表示させたいので表示場所を変更しました。


f:id:naRTmo:20190330225047p:plain


これで完成です!!


f:id:naRTmo:20190330225229p:plain

まとめ


冒頭で、サクッと設定しましょう。


なんて、甘っちょろいこと言っちゃってましたが、この投稿が今までで一番の大作になりました。


画面キャプチャの数もそうですが、4000文字を超えました。ゴクリ。。。


お問い合わせフォームがブログに設置できたので、Google様には少しでも信頼あるブログと認識されたのでしょうか。


まさかのメディアからのオファーなんて届いちゃったりして!!


なんて。。。この最弱なブログでは、夢のまた夢のまた夢のまた・・・ですけどね。(笑)


でも、お問い合わせフォームを設置したので、可能性は「ゼロ」ではなくなったということです!


また、ブログを読んで頂いている方や、いろいろな方と繋がるツールとして使っていきたいと思います。


ってことで、何かございましたら、こちらよりお問い合わせをお願いします!


https://nartmo.hatenablog.com/entry/contact


ではでは~


www.nartmo.com