冒険するために生まれてきた

成長を信じて挑戦する冒険者の記録

お問い合わせフォームを設置する

お問い合わせページを作ります。

 

Google でフォームを作る

ブラウザを Googlechrome にします。

 

右上の四角が固まっているところをクリック。

色々なサービスが出ますが、目的のサービスは、フォームです。

上の方にないので、<もっと>をクリックして、次のアイコンを探します。

f:id:lilychaco:20190316163205p:plain

見つけたら、クリックしましょう。

 

f:id:lilychaco:20190316175530p:plain

ページ真ん中にあるボタン「Googleフォームを使う」をクリック。

 

 

f:id:lilychaco:20190316163916p:plain

「新しいフォームを作成」画面で、+ をクリック。

 

 

f:id:lilychaco:20190316164045p:plain

紫色の画面が出るので、「無題のフォーム」部分をクリックして、「お問い合わせフォーム」とタイトルを入力します。

 

 

「フォームの説明」のところには、ここからお問い合わせくださいとか、自分の言葉を入力すれば良いのではないでしょうか。

今回は、「冒険するために生まれてきたのお問い合わせフォームです」と入力しました。

 

 

f:id:lilychaco:20190316164416p:plain

 ⬆️画像中の「無題の質問」のところを触ると、項目が増えます。

 

 

f:id:lilychaco:20190316164928p:plain

 右上 ラジオボタンのところをクリックすると、メニューがたくさん出ますので、記述式を選びます。

 

 

f:id:lilychaco:20190316171212p:plain

 

 

 

「無題の質問」部分を、「お名前(ニックネーム可)」に変えます。

f:id:lilychaco:20190316171727p:plain

必須項目にしましょう。

 

 

プラス(+)ボタンで、同様に項目を増やしていきます。

連絡先、件名、お問い合わせ内容を作りました。

この時、お問い合わせ内容は、「記述式」ではなく「段落」を選ぶと長文回答欄になるようです。

 

f:id:lilychaco:20190316171937p:plain

これで、フォームの完成です😅

 

 フォームのHTMLコードを取得する

 

HTMLコードを取るには、画面上の送信ボタンを押します。

f:id:lilychaco:20190316173315p:plain

作成したフォームは消えないので、信じてボタンをクリックしてみてください。

「フォームを送信」画面が出ます。

 

f:id:lilychaco:20190316175009p:plain

<> マークをクリックしましょう。

HTMLコードを表示する画面が出てきます。

 

f:id:lilychaco:20190316173455p:plain

コピーボタンを押して、HTMLコードをクリップボードにコピーします。

 

 

フォームのHTMLコードをはてなブログに貼る

フォームのHTMLコードを、はてなブログの固定ページに貼ります。

はてなブログダッシュボードに戻ります。

 

固定ページをクリック。

f:id:lilychaco:20190316173749p:plain

空欄にアドレスを入力して、「ページを作る」をクリック。

(otoiawase にしました。なんでもよいです。)

 

固定ページ編集画面になります。

普段の投稿記事を書くのと同じです。

普段は「編集見たまま」画面を使っていますが、今回は隣の「HTML編集」画面にします。

そこへ先ほどコピーしておいた、HTMLコードを、貼り付け(command+V)ます。

f:id:lilychaco:20190316174409p:plain

 

 

「編集見たまま」に戻って、ちゃんと表示されているかを確認しましょう。

f:id:lilychaco:20190316180403p:plain

 できていたら、公開して出来上がりです。

 

頑張りました〜😆

 

 

と思ったら、まだでした。

サイドバーに、お問い合わせページのリンクを貼る作業が必要です。

 

 

サイドバーに「お問い合わせ」バーを貼る

 お問い合わせページのアドレスをコピーします。

はてなブログダッシュボードに戻り、「デザイン」をクリック。

 

f:id:lilychaco:20190316181856p:plain

工具マークをクリックします。

次に「サイドバー」をクリック。

 

f:id:lilychaco:20190316182049p:plain

 

 

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

f:id:lilychaco:20190316182252p:plain

 

 

 

「リンク」 をクリック。

f:id:lilychaco:20190316182446p:plain

 

 

f:id:lilychaco:20190316183325p:plain

リンク集の小さい画面が出るので、上記のように入力します。

お問い合わせページのアドレスも入力。最後に適用ボタンを押すのを忘れずに。

 

 

ちょっと疲れてきたので、続きは次回追記します。

ごめんなさい😭

 

 

 

 

 参考にさせていただいたのは、

www.uxirisu.tokyoお世話になりました😊