FreelanceFormでは、入力ページのHTMLと、PHPの用途別設定を組み合わせて1つのフォームを動かします。「どの値を変えると、どこに反映されるか」を、お問い合わせ用途の実際の設定で確認しましょう。
このページのゴール HTMLの入力名とPHPの項目定義を対応付け、表示名・必須条件・選択肢をそろえて変更できること。
contactが用途を選び、fieldsが項目を決める
入力ページ index-contact.php の $mfFormId = 'contact'; は、form/php/config/forms.php
の contact を選びます。その中の
fields が、入力内容を受け取るための項目定義です。
次は設定の構造を示す抜粋です。ファイル全体を置き換えず、既存の該当箇所を編集します。
'contact' => [
'title' => 'お問い合わせ',
'page' => 'index-contact.php',
'mail_subject' => 'お問い合わせフォームからの受付',
'fields' => [
'company' => [
'label' => '会社名・団体名',
'type' => 'text',
'required' => false,
'max_length' => 150,
],
// この前後にも、お名前やメールなどの既存項目があります。
],
],
| 設定 | 変わる部分 |
|---|---|
title |
共通画面やメールで使う用途名。入力HTMLの見出しは別に編集 |
page |
共通処理から戻る入力ページ |
mail_subject |
この用途の運営者通知の件名 |
fields |
受け取る項目、検証ルール、確認・メールでの並び |
fields
を変更しても、入力HTMLが自動で書き換わるわけではありません。一般の入力項目は、HTML側も合わせて編集します。商品一覧はカタログ設定から描画する仕組みなので、商品・価格・送料を参照してください。
HTMLのnameと、fields内のキーをそろえる
会社名欄には name="company" があり、PHPにも
'company' => [...]
があります。この一致によって、どの入力にどのルールを使うかが決まります。
入力HTMLの name="company"
↓
forms.php の contact → fields → company
↓
PHPで入力を検証
↓
確認画面とメールへ label・入力値を表示
fields
の順番が確認画面・メールの順番になります。HTMLだけ項目を並べ替えた場合、確認画面は同じ順番にはなりません。
変更例1：会社名の表示と文字数を変える
「会社名・団体名」を「会社名」にし、100文字までにする場合です。
| 編集箇所 | 変更前 | 変更後 |
|---|---|---|
HTMLの .label-title の中身 |
会社名・団体名 | 会社名 |
| HTMLの入力欄 | maxlength="150" |
maxlength="100" |
PHPの company → label |
会社名・団体名 | 会社名 |
PHPの company → max_length |
150 |
100 |
company
という内部名、id="mf-company"、エラー表示の対応はそのままで構いません。入力欄の文言だけなら、処理用の名前を変える必要はありません。
max_length はPHP側で受け取り時に検証する設定です。HTMLの
maxlength も合わせることで、利用者が入力中に気付けるようにします。
変更例2：任意から必須にする
会社名を必須にする場合は、次の3か所をそろえます。
| 場所 | 変更する内容 |
|---|---|
| HTMLのラベル |
class="optional" を
class="required" にし、「任意」の補足を外す
|
| HTMLの入力欄 | required aria-required="true" を追加 |
PHPの company |
'required' => true に変更 |
必須バッジの色はCSSですが、必須かどうかのルールはHTMLとPHPで管理します。バッジだけを変えると、表示と実際の判定が食い違います。
条件付き必須は、選択肢の値まで対応させる
お問い合わせの電話番号は、この設定です。
'phone' => [
'label' => '電話番号',
'type' => 'tel',
'required' => false,
'required_if' => ['contact_method' => '電話'],
'max_length' => 11,
],
contact_method は条件を判定する入力名、電話 は選択肢の値です。HTML側の
value="電話"、contact_method の options、上の
required_if が対応します。
選択肢を「電話連絡」に変えるなら、表示文だけでなく、変更する value・PHPの
options・required_if
もそろえます。条件が複数ある場合は、いずれかが一致すると必須になる実装です。
共通の
input-state.js
が、PHPから渡された定義を使って画面の必須属性や表示を切り替えます。送信時にはPHPでも条件を確認するため、HTMLの見た目だけの判定ではありません。
選択肢・複数選択・メールの名前
| 種類 | そろえる内容 |
|---|---|
| select・radio | HTMLの各 value と、PHPの options |
| 複数checkbox |
HTMLの name="項目名[]" と、[]
を付けないPHPのキー
|
| 同意欄 | 既存の privacy-policy と 同意する という値 |
| 自動返信先 | 既存の mail_address。共通の送信処理もこの名前を参照 |
項目名を変更する場合は、PHP定義だけでなく、条件付き必須やJavaScriptの参照も確認します。特に
mail_address
はそのまま使いましょう。単に別の名前へ変更すると、自動返信やReply-Toの取得と一致しなくなります。
入力の復元も、同じ設定を使っている
フォーム内の
<?php mfInputState(); ?>
は、用途ID・確認用トークン・入力復元用JSONを出力します。そのJSONには用途の
fields も含まれます。
入力ページ先頭で input.php を読み込む
↓
フォーム内で mfInputState() を呼ぶ
↓
input-state.js が前の入力とルールを読み取る
↓
確認から戻った入力を復元・条件付き必須を反映
このため、先頭のPHPと mfInputState()、form/js/main.js
の読み込みはセットで残します。部署名のような通常のテキスト項目を追加するだけなら、復元用のJavaScriptを項目ごとに書き足す必要はありません。
メール設定との境界
運営者への受信先やSMTPは config.php、用途別の通知件名は forms.php の
mail_subject です。mail_subject
を変えても、自動返信の件名が同じ値に変わるわけではありません。
また、従来の index.php とデザイン見本が使う legacy の定義は
common.php 側にあります。forms.php の
contact を編集しても、それらの入力項目には反映されません。まず使用中の入力ページの
$mfFormId を確認してください。
メールの本文・自動返信の編集範囲はメールの件名・本文にまとめています。
編集後に確認すること
- 入力画面で、変更した文言・必須表示・文字数を確認します。
- 空欄や不正な入力で、想定した案内が出るか確かめます。
- 確認画面で、項目名・値・順番を確かめます。
- 修正で戻り、値の復元と条件付き必須の切り替えを確かめます。
- 自分のテスト用受信先へ送信し、運営者通知と自動返信の内容を確認します。
ここまでできたらOK 入力・確認・修正・メールで、変更した項目が同じ意味と条件で扱われていればOKです。
新しい項目を追加する完成形の例は入力項目の追加・削除、名前の読み方はクラス名と命名ルールで確認できます。