フォーム項目の追加・削除

用途別フォームの項目は、入力ページのHTMLと form/php/config/forms.php の定義を対にして変更します。定義を共通処理が読み込むため、項目ごとに confirm.php・send.php・thanks.php を増やしたり、各画面へ同じ項目一覧を書き足したりする必要はありません。

変更する場所

index.php とデザイン見本10件は従来の共通項目を使用し、その定義は common.php の legacy にあります。新しく用途に合わせて編集する場合は、対応する用途ページと forms.php を使ってください。

フォーム先頭のPHP、mfInputState()、id="mf-mail-form" は残します。組み込み方法は 01 導入方法を参照してください。

id・for・name

FreelanceForm内の対応関係から知りたい方は、コード解説のフォーム設定とHTMLのつながりへ。fields の役割や、表示名・必須条件を変えるときにそろえる設定を、実際の項目で説明しています。

<label for="mf-department">部署名</label>
<input id="mf-department" name="department" type="text">

for と id を一致させると、ラベルから入力欄を選べます。name はPHPへ送る項目名です。項目定義のキーも同じ department にします。同じページ内の id は重複させないでください。

任意項目を追加する例

index-contact.php の ul.form-list に入力欄を追加します。

<li class="form-group">
    <div class="inner">
        <label for="mf-department" class="optional">
            <span class="label-title">部署名</span>
            <span class="label-caption">任意</span>
        </label>
        <div class="field">
            <input type="text" id="mf-department" name="department"
                   placeholder="例：営業部" maxlength="100"
                   aria-describedby="mf-department-error">
            <span id="mf-department-error" class="error-message"
                  aria-live="polite"></span>
        </div>
    </div>
</li>

forms.php の contact → fields に同じ位置で追加します。

'department' => [
    'label' => '部署名',
    'type' => 'text',
    'required' => false,
    'max_length' => 100,
],

fields の順番が、確認画面とメール本文の表示順です。HTMLの maxlength と定義の max_length も合わせます。

必須項目と条件付き必須

常に必須にする場合は、HTMLの入力欄へ required aria-required="true"、外側のラベルへ class="required" を指定し、定義も 'required' => true にします。「任意」という説明は削除します。

特定の選択肢を選んだ場合だけ必須にする例です。

'phone' => [
    'label' => '電話番号',
    'type' => 'tel',
    'required' => false,
    'required_if' => ['contact_method' => '電話'],
    'max_length' => 11,
],

この場合は「連絡方法に『電話』を希望する場合は必須です」と説明し、HTMLの初期状態は任意にします。共通JavaScriptが required と必須表示を切り替え、PHP側でも同じ条件を確認します。

現在の条件付き必須は次のとおりです。

required_if のキーは判定する項目の name、値は選択肢の value です。条件を複数書いた場合は、いずれかが一致すると必須になります。

型・選択肢・日付

主な定義は text、textarea、email、tel、postal、date、time、number、select、radio、checkbox、file、cart です。

• メールは name="mail_address" を自動返信先に使います。アンケートでは任意です。
• 郵便番号の定義は type => 'postal'、HTMLは type="text" と郵便番号の pattern を使います。
• 選択肢はHTMLの value と定義の options を一致させます。
• 人数・数量の整数欄はHTMLと定義の min・max を合わせます。
• 日付はHTMLの type="date"、時刻は type="time" を使います。30分単位の時刻はHTML・定義とも step を 1800 秒にします。空き枠や営業日の判定は行いません。
• デリバリーの希望受取時刻は15分単位で、step は 900 秒です。

選択肢の例です。

'receive_method' => [
    'label' => '受取方法',
    'type' => 'select',
    'required' => true,
    'options' => ['配送', '店頭受取'],
],

checkbox の複数選択はHTMLを name="項目名[]" とし、定義のキーには [] を付けません。単独の同意欄は privacy-policy、許可する値は 同意する です。

注文商品の項目

通販とデリバリーの商品一覧は cart 型を使います。商品を1種類ずつHTMLや forms.php に書き足す必要はなく、catalogs.php の商品設定から表示します。

'items' => [
    'label' => 'ご注文商品',
    'type' => 'cart',
    'catalog' => 'shipping', // デリバリーは delivery
    'required' => true,
],

商品ごとの入力名は items[coffee-beans] のようになります。PHPは商品IDと数量を受け取り、設定した単価から小計・送料・合計を計算して、共通の確認画面とメールへ明細を出します。商品追加、写真・値段の変更、送料設定は 08 商品・価格・送料の変更を参照してください。

添付ファイル

採用は resume でPDF1ファイル、従来の index.php とデザイン見本は attachment[] でPDF・JPEG・PNGを2ファイルまで扱います。どちらも1ファイル5MBまでです。次は複数添付の例です。

<input type="file" name="attachment[]" multiple
       accept=".pdf,.jpg,.jpeg,.png,application/pdf,image/jpeg,image/png">

'attachment' => [
    'label' => '添付ファイル',
    'type' => 'file',
    'required' => false,
    'accept' => ['application/pdf', 'image/jpeg', 'image/png'],
    'max_files' => 2,
    'max_size' => 5242880,
],

ファイル欄には対応するラベル・エラー表示も付け、form の enctype="multipart/form-data" を残します。HTMLの accept は選択時の補助です。PHPでも拡張子・MIME・容量・個数を確認します。許可する種類は共通処理の対応範囲内で設定してください。

確認画面にはファイル名が表示され、修正画面では保持中のファイルを確認できます。添付は管理者メールだけに付けます。php.ini の容量設定と一時保存の1時間の期限は 01 導入方法を参照してください。

削除・改名と確認

項目を削除する場合は、HTMLの li.form-group と同じキーの定義を削除します。改名する場合は、HTMLの name、定義のキー、関連する required_if を合わせて変更します。

変更後は未入力・不正な形式・選択肢・条件付き必須を確認し、入力→確認→修正で内容が揃うか確かめてください。添付欄を変更した場合は、許可された種類と容量超過の両方を確認します。

コマンドによる検証は制作担当者向けの検証にまとめています。通常の編集では、変更した項目が入力・確認・メールの3か所でそろうことを確かめてください。