クラス名と命名ルール | FreelanceForm 購入者向けフォーム設置ガイド

FreelanceFormのソースには、mf-form-shell、form-group、mail_address など、役割の違う名前が登場します。ここでは実際に使っている名前を手がかりに、装飾を変える場所と、処理につながる名前を見分けます。

このページのゴール FreelanceFormの名前を読んで、既存の動作を保ちながら自分の装飾用クラスを追加できること。

全てが同じ命名形式ではありません

mf- はFreelanceForm側の部品を見分ける目印として使われています。ただし、全てのクラスに付いているわけではありません。既存の構造には form-group や field があり、入力名には name-sei のようなハイフンと、mail_address のようなアンダースコアが混在しています。

名前の見た目を統一するための一括置換は避け、今の対応関係を保って追加するのが編集の基本です。

名前の例	役割	編集時の考え方
`.mf-form-shell`	入力フォームを囲む外枠	背景や外側の余白を調整する場所
`#mf-mail-form`	入力フォーム本体のID	CSSとJavaScriptが参照するため残す
`.form-group`、`.inner`、`.field`	項目内の構造	レイアウトだけでなく入力補助も参照
`.label-title`、`.label-caption`	項目名と補足文	表示する文言は編集できる。クラス名は残す
`.required`、`.optional`	必須・任意の表示	HTML属性・PHP設定とそろえる
`.is-invalid`、`.is-selected`	入力エラー・商品選択中などの状態	JavaScriptが切り替える名前
`.hero-outline`、`.hero-layered`	デザイン固有の見出し	対応するデザインのHTMLとCSSをセットで扱う
`--mf-blue`、`--color-primary`	CSSの共通設定値	使用中のCSSに応じて設定場所を選ぶ

1つの入力項目は、このまとまり

お問い合わせの会社名欄は、次の構造になっています。説明しやすいよう、一部の属性を省略した抜粋です。

HTML

<li class="form-group">
    <div class="inner">
        <label for="mf-company" class="optional">
            <span class="label-title">会社名・団体名</span>
            <span class="label-caption">任意</span>
        </label>
        <div class="field">
            <input type="text" id="mf-company" name="company"
                   maxlength="150" aria-describedby="mf-company-error">
            <span id="mf-company-error" class="error-message"
                  aria-live="polite"></span>
        </div>
    </div>
</li>

部分	役割
`form-group`	1項目のまとまり
`inner`	ラベル側と入力欄側を並べる領域
`field`	入力欄と、そのエラー表示を囲む領域
`label-title`	項目の名前。入力補助の案内にも参照される
`error-message`	その入力欄のエラーを表示する場所

姓・名のような横並びには .fields.two の中に複数の .field を置きます。validation.js は入力欄に近い .field の中から .error-message を探します。見た目だけを変えたいときは、この入れ子を保ってCSSを調整すると扱いやすくなります。

入力名・ID・エラー表示はセットで読む

会社名欄なら、次の対応です。

TEXT

PHPの項目キー      company
HTMLのname        company
入力欄のid        mf-company
labelのfor        mf-company
エラー表示のid    mf-company-error
aria-describedby  mf-company-error

name はPHPの項目定義と対応し、id はラベルや説明文との対応に使います。既存の多くの入力欄は mf- と項目名を組み合わせたIDですが、ラジオボタンなど複数の選択肢には個別のIDが必要です。同じ name を持つ入力でも、IDまで複製しないようにします。

表示名だけを「会社名・団体名」から「会社名」にする場合、company という内部名を変える必要はありません。HTMLの表示文言とPHPの label を編集します。詳しい対応はフォーム設定とHTMLのつながりへ。

処理の目印になっている名前

次の名前には、共通処理が意味を持たせています。

名前	使われ方
`mail_address`	自動返信先と運営者通知のReply-Toに使用
`postal_code`	郵便番号補助を起動する目印の1つ
`schedule`	カレンダー補助を起動する目印
`mf-initial-state`	入力復元用JSONのID。`mfInputState()` が出力
`form_id`、`csrf_token`、`draft_token`	用途・送信元確認・入力状態を共通PHPへ渡すhidden項目
`data-order-catalog`、`data-order-summary`	注文画面の数量・集計処理が参照する属性

たとえば mail_address を email に変えるだけでは、用途定義をそろえても自動返信先の処理と一致しません。こうした既存の名前はそのまま使いましょう。mfInputState() の出力も、手書きのhidden項目で置き換える必要はありません。

自分の装飾クラスを追加する例

部署名の行だけに補助的な背景を付けるなら、既存の form-group を残して独自クラスを追加します。以下の client-department-row は説明用に新しく付ける名前で、製品の既存クラスではありません。

HTML

<li class="form-group client-department-row">
    <!-- 中の .inner、.field、入力欄、エラー表示は残します -->
</li>

使用中の parts/form.css で追加したクラスを指定します。

CSS

#mf-mail-form .client-department-row {
    background-color: #f4f7fb;
}

既存の name やIDを変えずに、見た目の目印だけを足せます。デザインによっては内側にも背景が設定されているため、見え方は使用中のデザインで確認します。

CSSをフォーム内に限定する

既存のCSSは #mf-mail-form、.mf-form-shell などを手がかりに範囲を限定しています。追加CSSも同じ考え方で書きます。

CSS

/* フォーム内のボタンだけを変更 */
#mf-mail-form .btn-submit {
    border-radius: 8px;
}

button や .inner だけを指定すると、埋め込み先サイトの別の部品にも影響することがあります。is-invalid などの状態クラスはHTMLへ固定で追加せず、必要ならその状態の見た目をCSSで変更してください。

ここまでできたらOK 既存の名前と構造を残して独自クラスを追加でき、名前を変える前にHTML・CSS・JavaScript・PHPの参照を確認できればOKです。

次はCSS変数とデザインの設定場所で、色や余白をまとめて調整する入口を確認します。