お問い合わせフォームを作成してみよう

Hirameki 7では、お問い合わせや資料請求など、さまざまな種類のフォームの作成ができます。

ここでは、はじめてHirameki 7のフォームを使う方向けに、実際の操作をイメージいただくため、フォームの編集手順をサンプルを元に紹介します。

ぜひ操作を進めてHirameki 7のフォームの機能を体験してみましょう。

この手順では、次のようなフォームを作成していきます。
※フォームにあらかじめ用意されている、お問い合わせ(初期テンプレート)のフォームを元に、編集操作を進めます。

画面キャプチャ

1.フォーム編集画面を開きます

Hirameki 7のトップページ(ポータル)から、フォームをクリックします。

画面キャプチャ

1-1.フォームの左メニューから、フォームをクリックしてフォーム一覧を表示します。

画面キャプチャ

1-2.フォーム編集画面を開きます

フォーム一覧の中に表示されている、お問い合わせ(初期テンプレート)が今回編集していくフォームです。

画面キャプチャ

お問い合わせ(初期テンプレート)の、一番右にある歯車アイコン(メニューと呼びます)をクリックします。

画面キャプチャ

1-3.内容を編集するをクリックします

画面キャプチャ

クリックした後に、フォーム編集画面が表示されます。

画面キャプチャ

2.フォームを編集します

お問い合わせ(初期テンプレート)のフォームには、画面右側(フォームエディターと呼びます)に、フォームを構成するパーツがあらかじめ配置されています。
このページの手順では、サンプルどおりにパーツを配置、削除して操作を進めていきます。

2-1.フォームを構成するフォームパーツを配置します

画面左側(パーツエリアと呼びます)から、都道府県をクリックします。
※パーツエリアの上にマウスを被せて、下方向へスクロールすると出てくる、セットパーツの中にあります。
各パーツの説明についてはフォームを作成するシングルパーツについてや、フォームを作成するセットパーツについてをご確認ください。

画面キャプチャ

クリックしたまま、画面右側のフォームエディターの住所パーツの下まで引っ張って離します。

画面キャプチャ

画面右側のフォームエディターに都道府県パーツが配置されます。

画面キャプチャ

2-2.パーツの設定を編集します

追加した都道府県パーツをクリックします。

画面キャプチャ

パーツの編集画面が開きます。

画面キャプチャ

今回は、都道府県の詰問を必須項目にします。
編集画面の左側に表示されている、必須項目にするにチェックを入れます。

画面キャプチャ

編集画面の右側に表示されている、簡易プレビューに表示されていた、任意が必須に変更されたことを確認して「OK」ボタンをクリックします。

画面キャプチャ

2-3.パーツを削除します

パーツを削除する場合は、パーツの右側に表示されている✕アイコン(削除ボタンと呼びます)をクリックします。

画面キャプチャ

確認画面が表示されるので「削除」ボタンをクリックして、パーツを削除します。

画面キャプチャ

今回はサンプルにあわせて、住所パーツを削除してみましょう。

2-4.編集したフォーム設定を保存します

フォームの編集が完了したら「フォーム設定を保存してメール設定へ進む」ボタンをクリックして、メール設定へ進みましょう。

画面キャプチャ

※ボタン上に表示されている、詳細を設定するをクリックすると、フォームの表示に関する詳細設定の画面が表示されます。
基本的な設定はすでに設定されていますので、今回はこのまま次へ進みます。

詳細を確認されたい場合は、フォーム編集画面について(フォーム設定、メール設定)をご確認ください。

画面キャプチャ

3.メール設定を編集します

この手順では、フォームが登録された際に、自分が受信するメールについて設定します。

画面キャプチャ

3-1.登録情報を受け取るメール本文を編集します

前の項目で編集したフォームの詰問どおり、フォームに登録された情報を受け取れるよう編集します。

画面下部にある、メール本文の項目まで移動します。

画面キャプチャ

メール本文内で、住所:☓項目なしと記載されている箇所までスクロールします。

画面キャプチャ

住所のテキストを都道府県に変更します。

画面キャプチャ

☓項目なしを削除します。
削除後に右クリックして、表示された項目の中から、都道府県をクリックします。

画面キャプチャ

これで、メール本文の編集ができました。

画面キャプチャ

3-2.入力されている送信元情報、送信先情報を確認します

サービス開始時に、ご登録いただいた情報があらかじめ入力されています。
入力されているメールアドレスなどに、間違いがないかを確認します。

※必要であれば入力されている内容を編集しましょう。

3-3.編集したメール設定を保存します

メール設定が完了したら「メール設定を保存して公開設定へ進む」ボタンをクリックして、公開設定へ進みましょう。

画面キャプチャ

4.公開設定を確認します

公開設定は、フォーム公開について設定できます。
受付期間を設定したり、定員制セミナーなどで受付人数を制限するなど、フォームの目的に応じて詳細に設定ができます。

画面キャプチャ

今回は設定変更せずに、このまま次へ進みます。
※公開設定を編集された場合は、「公開設定を保存」ボタンをクリックして、編集内容を保存してください。

詳細を確認されたい場合は、フォーム編集画面について(公開設定、タグ・CSS・JS)をご確認ください。

5.フォームの内容が変更されたことを確認します

これで、フォームの内容が変更されました。
実際に公開されるフォームの入力画面が、編集内容どおりに変更されているかを確認しましょう。

5-1.画面右上の「プレビュー」ボタンをクリックします

実際に公開される表示と同じ状態で、フォーム入力画面が表示されます。

画面キャプチャ

5-2.PC表示、SP(スマホ)表示、それぞれの表示を確認します

上のPC、SPのボタンを切り替えると、PC表示、SP(スマホ)表示と切り替えて確認できます。

画面キャプチャ

表示の確認が完了したら、ページのタブを削除して、ページ編集画面に戻りましょう。

画面キャプチャ

今回編集したお問い合わせ(初期テンプレート)のフォームはすでに公開されているため、この操作に公開設定の手順は含まれていません。

もしフォームを新規で作成して公開される場合は、公開設定の画面に表示される「フォームを公開」ボタンをクリックすると公開できます。

画面キャプチャ

この記事は役に立ちましたか?

  • はい
  • いいえ