まねきねこのきままブログ

シンママ×会社員ときどきブログ

【超初心者】はてなブログProにしてやってみたこと(お問い合わせフォーム)

Googleフォームではてなブログに設置していくのが簡単そうなので、

こちらでお問い合わせフォームを設置していこうと思います。

 

f:id:manekineko8:20200428083342p:plain

 

 

 

 

お問い合わせフォームの作成

 

Googleアカウントが必要なので、まだ持っていないという方は作成してから下記の手順で進めてください。

 

Googleアプリを開きます。(丸が9個四角に並んでいるボタンです)

f:id:manekineko8:20200324083537p:plain

 

その他のソリューションを開きます。

f:id:manekineko8:20200324083600p:plain

 

こちらのフォームを使用して作成していきます。

f:id:manekineko8:20200324083711p:plain


トップページのgoogleフォームを使ってみるをクリックします。

f:id:manekineko8:20200324083752p:plain

 

新しいフォームを作成

f:id:manekineko8:20200324083816p:plain

 

「無題のフォーム」のところを書き換えることができます。

“お問い合わせ”等お好みで変更してください。

f:id:manekineko8:20200324083844p:plain


次に、お問い合わせ者に入力してもらう項目を作成していきます。

f:id:manekineko8:20200324083954p:plain

「無題の質問」を「お名前」に変更してください。

右側にある、「ラジオボタン」となっている箇所の▼をクリックしてください。

ここで、入力形式を選ぶことができますので、「お名前」を入力してもらう場合は“記述式”に変更してください。

 

右側の+ボタンを押すと、質問項目が追加されます。

f:id:manekineko8:20200324084036p:plain

先ほどと同じように、お好みで項目を追加します。

・メールアドレスは「記述式」

・件名は「記述式」

・本文は「段落」

上記3点は追加していたほうが良いかと思います。

 

f:id:manekineko8:20200324084108p:plain


右下の「必須」という箇所をクリックすると、選択している項目を入力必須項目にすることができます。

 

 

お問い合わせフォームの設定

右上にある歯車のマークをクリックしてください。

f:id:manekineko8:20200324094905p:plain


設定の画面でプレゼンテーションのタブをクリックしてください。

f:id:manekineko8:20200324094939p:plain


「別の回答を送信するためのリンクを表示」のチェックははずしてください。
「確認メッセージ」とは送信が終わった後に表示するメッセージのことです。
「お問い合わせいただきありがとうございます。」など、送信してもらった後に自動で届く文章を入力します。

設定が終わったら右下の「保存」ボタンをクリックしてください。

 

 

お問い合わせフォームのテーマをカスタマイズ

 

先ほどの設定の近くにあるパレットのようなアイコンをクリックしてください。

f:id:manekineko8:20200324095023p:plain


右側に「テーマオプション」が出てきます。

f:id:manekineko8:20200324095041p:plain

ここから「ヘッダー」「テーマの色」「背景色」「フォントスタイル」の項目を変更することができます。

 

お問い合わせフォームの回答設定

「質問」タブから「回答」タブに切り替えてください。

f:id:manekineko8:20200324095106p:plain


右側にある縦になった三点リーダーをクリックしてください。

「新しい回答についてのメール通知を受け取る」をクリックしてチェックしてください。

f:id:manekineko8:20200324095234p:plain

これで回答があればメールで通知がくるようになります。

 

はてなブログへ設置

まずタグを取得します。

右上の「送信」ボタンをクリックします。

f:id:manekineko8:20200324095304p:plain

 

「フォームを送信」という画面が出てきます。

f:id:manekineko8:20200324095341p:plain

その中の「<>」というタブをクリックしてください。
右下の「コピー」ボタンをクリックするとコードがコピーできます。

 

次にはてなブログに張り付けます。

はてなブログの「記事を書く」から「HTML編集」のタブをクリックしてください。

f:id:manekineko8:20200324095557p:plain

f:id:manekineko8:20200324095615p:plain

f:id:manekineko8:20200324095626p:plain

そこに先ほどコピーしたコードを貼り付けます。


編集オプションからカスタムURLを「contact」にします。

f:id:manekineko8:20200324095651p:plain

最後に「公開する」をクリックすれば完了です。

 

固定ページの作成

固定ページとは、最新記事として掲載するのではなく、固定のURLだけで見れるページです。

ダッシュボードから「固定ページ」をクリックすると以下のような画面になります。

f:id:manekineko8:20200324095745p:plain

「 ページを作る」で作成していきます。

 

先ほどの【はてなブログに張り付ける】で行った作業をここでやります。

f:id:manekineko8:20200324095810p:plain

フォームを作成した際の「<>」というタブでコピーしたコードを「HTML編集」の記事に張り付けてください。

 

 はてなブログへのお問い合わせフォームへのリンク

ページ管理の「記事を見る」のタブを開いてください。

f:id:manekineko8:20200324095903p:plain


お問い合わせフォームを作成した記事が開きます。

画面のURLをコピーしてください。後で使用します。

f:id:manekineko8:20200324095928p:plain


ダッシュボードからデザインのページに入り、カスタマイズを開くと「サイドバー」が出てきます。

f:id:manekineko8:20200324100017p:plain


モンジュールを追加します。

f:id:manekineko8:20200324100521p:plain

モンジュールを追加することにより、サイドバーの項目を増やすことができます。

リンクを開きます。

f:id:manekineko8:20200324100553p:plain


タイトルに「お問い合わせ」とか「ご質問はこちら」などお問い合わせフォームのタイトルをつけます。

f:id:manekineko8:20200324100610p:plain


リンクのタイトルところに「お問い合わせフォーム」と入れます。

その横に先ほどコピーしたお問い合わせフォームの記事のURLを張り付けてください。

必ず適用ボタンを押してください。



変更を保存するを押してください。

f:id:manekineko8:20200324100659p:plain

f:id:manekineko8:20200324102235p:plain

このようにサイドバーにちゃんと表示されていれば設置は完了です。

 

 

 

いつかはGoogleアドセンスに合格できればと思っているので作ってみました。

ついでにプライバシーポリシーもつけてみました。

先輩ブロガーさん!!

Googleアドセンスに合格する秘訣を教えてください!!!

 

 

 

 

↓ポチッと応援お願いします。

にほんブログ村 ライフスタイルブログへ
にほんブログ村

にほんブログ村 主婦日記ブログへ
にほんブログ村