もののもの

20台後半の無職デザイナー 。会社を勢いで辞めたので収入を得ようと奮闘してます! いつの日か移住することが目標! このブログは、ブログ、デザイン、フリーランス、商品紹介などについて記事を書いていきます。

はてなブログ 固定ページの活用 問い合わせフォームを作ってみた

はてなブログPro、固定ページの活用

はてなブログProで固定ページが作れるよになったようです。

早速活用してみます。

 

何を作るか

固定ページを活用して、以下の内容があるページの作成

  • プライバシーポリシー
  • サイトへのお問い合わせ

 

参考先

固定ページ

固定ページを作成できるようにしました(はてなブログPro) - はてなブログ開発ブログ

 プライバシーポリシー

【ひな形利用OK】プライバシーポリシー設置!Googleアドセンスやアナリティクス用です

 問い合わせフォームはこちらを

Google フォームを使って、はてなブログにメールフォームを設置する - めかりる

 

 

 

フォームの作成方法

参考にしたサイトでは、以前のフォーム形式での作成でしたが、

新しい形式でのデザインを使用してみます。

 

グーグルフォームにアクセス

https://docs.google.com/forms/u/0/

 

右下の赤いボタンをクリック

 

このような画面になります。

フォームの題名を作成
  1. 「無題のフォーム」を「(あなたの名前)へお問い合わせ」に変更
  2. フォームの説明はあってもなくても
続いて質問の作成
  1. 「無題の質問」を「お名前」に変更
  2. ラジオボタンのプルダウンを記述式へ変更
  3.  必須をチェック
二つ目の質問。右の➕質問を追加
  1. 「無題の質問」を「返信用メールアドレス」に変更
  2. ラジオボタンのプルダウンを記述式へ変更
  3.  必須をチェック
三つ目の質問、繰り返し
  1. 「無題の質問」を「お問合わせ内容」に変更
  2. ラジオボタンを段落へ変更
  3. 必須をチェック
四つ目の質問、繰り返し 
  1. 「無題の質問」を「webサイトやブログなどのアドレス」に変更
  2. ラジオボタンを記述式へ変更
  3. 必須はチェックしない

 

このようになります。 

 

 

完成したら、右上の送信をクリック 

 

するとウインドウが出てきます。

 

  1. 送信方法を<>に変更
  2. HTMLを埋め込むからコピー

 幅高さはお好みで。私は600X1100くらいに設定しています。

 

 

固定ページの作成

次に、作ったフォームをブログに取り付ける作業です。

 

 

 

  1. ブログ管理ページの左ナビゲーションから固定ページをクリック
  2. ページを作るで、URLを任意な文字に

私の場合、文字列を privacypolicy にしておきました。

 

 

ページに記述します
  1. プライバシーポリシーを記載
  2. フォームのHTMLを貼り付け

※問い合わせフォームのhtmlは、html編集で追加してください。

 

完成

ちなみにこのブログで作った問い合わせページはこちらです。

www.mononomono.net

 

 

 

よかったら参考にしてみてください。