第9章 フォームを作る

← 目次にもどる

「お問い合わせ」や「資料請求」など、訪問者に入力・送信してもらう入力欄フォーム機能 で作ります。 作ったフォームはページに設置でき、送信された内容は指定したメールアドレスに届きます

この章では、フォームの作り方から、ページへの設置、送信内容の受け取り方までを説明します。


フォームとは

フォームは、訪問者が名前やメールアドレス、問い合わせ内容などを入力して送信する「入力用紙」です。

フォームを使うときは、大きく次の流れになります。

  1. フォームを作る(フォーム管理で、入力してもらう項目を決める)
  2. フォームをページに置く(ページにフォームのブロックを追加する)
  3. 送信された内容を受け取る(指定したメールアドレスに届く)

ワンポイント フォームは「作る場所(フォーム管理)」と「置く場所(ページ)」が分かれています。 一度作ったフォームは、いろいろなページにくり返し設置できます。


フォーム機能を使う流れ

全体は、次の4ステップです。まずは流れ全体をつかんでください。

  1. フォームを作る(フォーム名・送信先メールを決める)
  2. 項目(フィールド)を追加する(お名前・メール・お問い合わせ内容など)
  3. フォームをページに設置する(フォームのブロックを追加)
  4. 送信された内容をメールで受け取る

以下、順番に説明します。


ステップ① フォームを作る

左側のメニュー 「管理」→「フォーム管理」 を開きます。 右上の 「新規作成」 をクリックすると、フォームの編集画面が開きます。

左メニューのフォーム

フォーム管理の一覧と「新規作成」ボタン

編集画面の 「基本設定」 で、次の項目を入力します。

項目 内容
フォーム名 ※必須 管理用の名前(例:お問い合わせ)
送信先メールアドレス ※必須 送信された内容が届くメールアドレス(例:info@example.com
メール件名 届くメールの件名(初期値は「お問い合わせが届きました」)

入力できたら、「フォームを作成」 を押します。 これでフォームの入れ物ができ、続けて項目(フィールド)を追加できるようになります。

⚠️ 先にフォームを作成してください 項目(フィールド)の追加は、フォームを作成したあとにできるようになります。 「フォームを作成」を押す前は、フィールドの追加ボタンは押せません。

フォーム設定


ステップ② 項目(フィールド)を追加する

フォームに、入力してもらう項目を追加します。 「フィールド」 の欄にある 「フィールドを追加」 をクリックすると、項目の設定画面(フィールド設定)が開きます。

「フィールドを追加」ボタンと設定済みフィールド

フィールド設定の画面

項目の種類(フィールドタイプ)

入力欄には、次の種類があります。入力してほしい内容に合わせて選びます。

種類 使いどころ
テキスト お名前・会社名など、1行の入力
メールアドレス メールアドレスの入力
電話番号 電話番号の入力
パスワード 会員登録フォーム用(後述)
テキストエリア お問い合わせ内容など、長めの文章
セレクトボックス ▼から1つ選ぶ(都道府県など)
ラジオボタン 選択肢から1つ選ぶ
チェックボックス 選択肢から複数選ぶ
ファイル添付 写真や資料などのファイルを送ってもらう(後述)
HTML 個人情報の取り扱いなどの説明文を差し込む(入力欄ではありません)

フィールドタイプセレクト画面

項目ごとの設定

種類を選んだら、次の内容を設定します。

設定 内容
ラベル ※必須 項目の名前(例:お名前)。入力欄の見出しになります
プレースホルダー 入力欄にうすく表示される見本(例:山田 太郎)
注意書き 項目の下に表示する、注意やただし書き
必須項目 チェックを入れると、入力しないと送信できなくなります

セレクトボックス・ラジオボタン・チェックボックス を選んだときは、「選択肢」 を1つずつ入力します(「選択肢を追加」で増やせます)。

設定できたら 「保存」 を押します。追加した項目は一覧に並び、⠿ハンドルをつかんでドラッグすると並べ替えできます。

ワンポイント:メールアドレスの項目を入れておきましょう 「メールアドレス」タイプの項目を1つ入れておくと、後述の自動返信メールが使えるようになります。


「ファイル添付」項目について

写真や見積書・資料などのファイルを送ってもらいたいときは、「ファイル添付」タイプの項目を追加します。

送ってもらえるファイルの種類

セキュリティのため、送信できるファイルの種類はあらかじめ決められています。

種類 対応形式
画像 JPG・PNG・GIF・WebP・HEIC(※SVGは送信できません)
文書 PDF・Word(doc/docx)・Excel(xls/xlsx)・PowerPoint(ppt/pptx)・テキスト(txt)・CSV
圧縮ファイル ZIPのみ(RAR・7zなどは送信できません)
音声・動画 MP3・MP4・MOV・WAV

⚠️ ファイルの件数・容量には上限があります 1回の送信で添付できるのは、最大10ファイル・合計10MBまでです(1ファイルごとの上限ではなく、合計の上限です)。超えた場合はエラーになり、送信できません。

ワンポイント:添付ファイルはサーバーに保存されません 送られてきたファイルは、CMSのサーバーやデータベースには保存されず、その場でメールに添付されて送信されるだけです。 「送信内容をDBに保存する」を有効にしていても、データベースに残るのはファイル名のみで、ファイルの中身は残りません。届いたメールの添付ファイルを確認・保管してください。


送信設定(保存・自動返信・完了後)

フォーム編集画面の 「送信設定」 では、送信されたときの動きを決められます。

設定 内容
送信内容を顧客サーバーのDBに保存する チェックすると、送信内容の控えをサーバーにも記録します(※通常はメール受信が基本です。詳しくは下記)
自動返信メールを送る チェックすると、送信した訪問者にも自動でお礼メールが届きます(「メールアドレス」項目が必要)
自動返信メール文面 自動返信で送る本文
送信完了後のURL 送信後に別ページへ飛ばしたいときに指定します(空欄なら、同じページ内で完了メッセージを表示)

設定を変えたら 「設定を保存」 を押します。


ステップ③ フォームをページに設置する

作ったフォームを、実際のページに置きます。 フォームは、ページ編集画面で 「フォーム」という種類のブロック を追加して設置します。 (ブロックの追加方法は 👉 4. ページを編集する と同じです)

ブロックの設定画面の 「フォームの設定」 で、次を選びます。

フォームブロック

設定 内容
使用するフォーム ▼から、さきほど作ったフォームを選びます
フォームスタイル 見た目のひな形を選びます(A:グレー背景/B:白・角丸/C:ラベル左)
送信後のアクション 完了メッセージ表示(そのページにメッセージを出す)か、リダイレクト(別ページへ飛ばす)を選びます
  • 完了メッセージ表示 … 表示する文章を入力します(未入力なら「送信しました。」と表示されます)。
  • リダイレクト … 送信後に飛ばす先のURL(例:/contact/complete)を入力します。

ブロック設定の「フォームの設定」

設定できたら、ページを 一括保存 → ページに反映 すれば、フォームが公開されます。 (保存と反映のちがいは 👉 6. 公開のしくみ(サイトへの反映)

ワンポイント フォームがまだ無い状態でも、「フォーム管理でフィールドを編集・新規作成 →」のリンクからフォーム作成画面へ移動できます。


ステップ④ 送信された内容を受け取る

訪問者がフォームを送信すると、その内容は ステップ①で指定した「送信先メールアドレス」に届きます。 「自動返信メールを送る」を設定していれば、送信した訪問者にもお礼のメールが届きます。

⚠️ 送信内容の受け取りは「メール」が基本です 送信された内容は、指定したメールアドレスに届くのが基本の受け取り方です。 「送信内容をDBに保存する」にチェックを入れると控えは記録されますが、 管理画面から過去の送信内容を一覧で見る画面は用意されていません。 大切な問い合わせを見逃さないよう、送信先メールは、必ず日常的に確認するアドレスを指定してください。


会員登録フォームについて

フォームに 「パスワード」タイプの項目 を入れると、そのフォームは 会員登録フォーム として使えます。

  • パスワード項目には、16文字以上・大文字小文字・記号を含むという安全なルールが自動で適用されます。
  • 入力されたパスワードは安全な形式(ハッシュ)に変換して保存され、元のパスワードのままメールやデータに残ることはありません(変換後のデータから元のパスワードを復元することもできません)。
  • このフォームを会員グループに紐づけると、送信した人が会員として登録されます。

会員登録フォームの使い方、会員の承認、限定ページの作り方については、次の章で説明します。

くわしくは 👉 10. 会員機能を使う(オプション) をご覧ください。


まとめ

  1. フォーム管理で「新規作成」→ フォーム名・送信先メールを決めて 「フォームを作成」
  2. 「フィールドを追加」 で、入力してもらう項目(お名前・メール・内容など)を追加(ファイルを送ってもらいたいときはファイル添付タイプを追加)
  3. 必要なら 送信設定(自動返信・完了後URL)を調整
  4. ページに 「フォーム」ブロック を追加し、使用するフォームを選んで反映
  5. 送信された内容は 送信先メールアドレスに届く(履歴の一覧画面は無いため、メールを必ず確認)

← 目次にもどる / 次は 👉 10. 会員機能を使う(オプション)