はてな無料版、お問い合わせフォームの設置入門
(図 メールボックス Pixabay)
なんといってもブログ入門者なので、たいした事ではなくても、たーいへん! なことになっています。こまかく覚えていられませんので、まとめておくことにしました～
どなたかのお役にでも立てれば嬉しいです !
はてな無料版、お問い合わせフォームの設置入門
目的：はてな無料版へのお問い合わせフォームの設置。2020/1月時点での更新に対応した手順書の作成
環境：PC、グーグルのアカウント (Gmailは、事前にご登録ください)
手法：はてな無料版でのスタンダードな対応方法として、グーグルが提供している機能を使い、お問い合わせフォームを、はてなブログのページに設置します。
手順：慣れれば5分程度の作業時間です
① グーグルの「フォーム」アプリでお問い合わせフォームを作成
ブラウザで Google (www.google.co.jp)を開きます。
Google Chrome、Firefox、Microsoft Edge、いずれのブラウザでも構いません。
Googleの画面が表示されると、右上に4つのボタンが表示されます。
右端が「Z」(各自のイニシャル)となっているのは、グーグルアカウントにログインしている表示です。
- グーグルに、ログインしておいてください。
- 複数のアカウントをお持ちの方は、これから作るフォームで使うアカウントに切り替えておいてください。
まず、赤丸を付けた、右から2つ目の「Googleアプリ」ボタンをクリックしてください。
一覧が表示されましたら、一番下までスクロールしてください。赤丸を付けた「その他のソリューション」ボタンをクリックします。
下図左半分の画面が表示されましたら、ほぼ一番下までスクロールしてください。
上図右半分の、赤丸を付けた「フォーム」アプリをクリックしてください。
下図左半分の画面が表示されます。この画面左側の、赤丸を付けた「Google フォームを使ってみる」ボタンをクリックしてください。
上図右半分の画面が表示されます。ここがフォーム作成の場所です。(グーグルのアカウント名が、デフォルトに切り替わっていないか注意 !) ここで、赤丸を付けた「空白」を選択クリックしてください。
画面の中央にフォームが現れます。下図の丸囲み数字の部分、1.～5.を設定してゆきましょう。
- 「お問い合わせフォーム」と入力してください
- 「ブログ名のお問い合わせフォーム」と入力してください。ブログ名の部分は、ブログの名称か、ハンドルネームなどに変更してください
- 「お名前」と入力しください
- ラジオボタンをクリックして表示されるリストより、一番上の記述式を選択してください。記述式の設定で、短文回答の入力となります
- 項目への入力の、必須を選択してください
ここまで出来ましたら、赤丸を付けた項目の追加ボタンをクリックして、次の項目を設定してゆきます。
最後の「お問い合わせ内容」の項目のみ、赤丸を付けたラジオボタンの設定で、段落を選択して、複数行の記述ができるようにします。これでお問い合わせのフォームができました。
② お問い合わせフォームのHTMLコードを取得し、ブログのページに貼る
画面の右上にある「送信」ボタンをクリックします。
下図の「フォームを送信」ダイアログボックスが現れましたら、赤丸を付けたHTMLモード「< >」ボタンをクリックしてください。
フォームの大きさを、幅 760ピクセル、高1000ピクセルに変更して(おおよその目安の数値です)ます。右下の「コピー」ボタンをクリックしてください。HTMLコードをクリップボードにコピーすることになります。
次に、ブログで「記事を書く」を選択してページをご用意ください。
記事の編集を、赤丸を付けた「HTML編集」をクリックして、クリップボードにコピーされた内容を本稿部分に貼りつけします。(下図は、貼りつけたところ)
次に、この記事を「見たまま」編集にし、タイトル部分を「お問い合わせフォーム」と入力してください。
右の赤丸を付けた、編集オプション内の記事の日付を適当に古い日付に変更しください。
③ ブログのページを公開する
お問い合わせフォームを貼りつけたページの記事を、「公開する」にして実行してください。これで、お問い合わせフォームとなる記事がデビューしました。
最後に、ブラウザでのGoogleのフォーム・アプリを、ブラウザのお気に入りにブックマークしてから、ブラウザのタブなとを閉じて下さい。最初の手順で作成したフォームは、自動的に保存されます。ブラウザにブックマークすることで、手軽にアクセスすることができます。
- お問い合わせフォームにアクセスして、追加の編集をすることができます。こうした編集は、お問い合わせフォームを貼ったブログのページに、自動的に反映されます。
試験的にフォームを埋めて、送信してみてくたさい。ブログ側で送信したら、ブラウザにブックマークしたフォームを確認してください。回答のところに届いているはずです。
以上になります。
参考記事
追加情報をご希望の方は、コチラをご覧ください。
uxirisu.tokyonakomii.hatenablog.com勉強させていただき、ありがとうございました。
ブログ アレンジのシリーズ
zzak.hatenablog.jpzzak.hatenablog.jp
いつも、お読みくださりありがとうございます。
