ファイル構成とカスタマイズの入口 | FreelanceForm 購入者向けフォーム設置ガイド

「この部分を変えたいとき、どのファイルを開けばいい？」を探すための案内です。FreelanceFormは、入力ページ・設定・共通処理・見た目を分けています。この分担が分かると、編集する場所を絞れます。

このページのゴール 変えたい内容から編集先を選び、ほかの用途や画面にも影響する変更かを判断できること。

以下のパスは、購入したフォーム一式の index-contact.php と form/ があるフォルダを基準にしています。公開サイトのドキュメント用ファイルを編集する必要はありません。

まず開くファイルは、この3種類

変更したいこと	編集する場所	影響する範囲
お問い合わせの見出し・説明・入力欄の並び	`index-contact.php`	その入力ページ
項目の必須条件・文字数・確認画面の項目名	`form/php/config/forms.php` の `contact`	お問い合わせ用途の検証・確認・メールなど
入力フォームの見た目	読み込んでいるCSSの `parts/form.css`	そのCSSを使う入力ページ

予約なら index-reservation.php と forms.php の reservation を使います。「用途別ページを選ぶ → 対応する設定を開く → 必要ならCSSを調整する」の順番で考えましょう。

フォルダの地図

TEXT

フォーム一式/
├─ index-contact.php             お問い合わせの入力ページ
├─ index-reservation.php         予約の入力ページ
├─ index-design-01.php ～ 10.php  デザイン見本
└─ form/
   ├─ css/
   │  ├─ style.css               初期フォームのCSS読み込み口
   │  ├─ parts/                  初期・共通の見た目
   │  ├─ design-01/ ～ design-10/ デザイン別の差分
   │  └─ addon/                  色・フォント・入力補助など
   ├─ js/
   │  └─ main.js                 入力補助を呼び出す入口
   └─ php/
      ├─ config/
      │  ├─ config.php           メール送信先・SMTPなど
      │  ├─ forms.php            用途別の項目定義
      │  └─ catalogs.php         注文商品・単価・送料
      ├─ input.php               入力状態と用途別ルールの準備
      ├─ confirm.php             共通の確認画面
      ├─ send.php                送信処理の入口
      ├─ thanks.php              完了画面の入口
      ├─ result-view.php         完了・エラー画面の表示
      └─ common.php              検証・メール作成などの共通処理

これは主なファイルを抜粋した地図です。表示の変更だけなら、共通の送信処理を編集する必要はありません。

入力ページの先頭にある2つの変数

index-contact.php の先頭です。

PHP

<?php
$mfFormId = 'contact';
$mfInputPage = 'index-contact.php';
require __DIR__ . '/form/php/input.php';
?>

記述	FreelanceFormでの役割
`$mfFormId`	`forms.php` のどの用途を使うか。`contact` ならお問い合わせの定義
`$mfInputPage`	入力ページの名前。共通処理へ渡す情報
`require ... input.php`	セッション・入力の復元・用途別ルールを準備する処理の読み込み

通常の用途ページでは、戻り先は forms.php の page が基準です。$mfInputPage だけを変えても、戻り先の変更は完了しません。ファイルを改名するときは実ファイル名・この変数・用途定義の page をそろえます。フォルダの移動には各パスの調整も必要なので、設置仕様も確認してください。

index.php とデザイン見本は legacy という共通定義を使い、その定義は common.php にあります。用途別に項目を育てる場合は、index-contact.php などの用途ページを起点にすると、forms.php で管理しやすくなります。

CSSの入口は入力ページのheadで確認

用途別ページの初期状態は、この順番です。

HTML

<link rel="stylesheet" href="./form/css/reset.css">
<link rel="stylesheet" href="./form/css/style.css">
<link rel="stylesheet" href="./form/css/addon/input-ux.css">

デザイン06を使う場合は、2行目が ./form/css/design-06/style.css になります。その中の @import をたどると、実際に編集する parts/form.css や parts/variables.css が見つかります。

入力ページのCSS参照が、今使っているデザインの答えです。 ファイル名が index-contact.php でも、デザイン06を適用していればデザイン06側を編集します。

入力と確認・完了は別の画面です。入力ページのCSSを差し替えても、共通の確認・結果画面のCSS参照は変わりません。詳しくはCSS変数とデザインの設定場所で説明します。

設定ファイルを使い分ける

ファイル	主な設定	注意する範囲
`config.php`	SMTP、送信元、運営者の受信先	同じ設定を使う複数の用途に共通
`forms.php`	用途のタイトル、戻り先、項目、管理者通知の件名	編集した用途の定義
`catalogs.php`	商品、単価、受取方法、送料	そのカタログを使う注文フォーム

たとえば通知の宛先は forms.php の各項目ではなく、config.php の mail → to です。商品の値段は入力HTMLに直接書き足すより、catalogs.php で管理します。

関連する手順はメールの件名・本文、商品・価格・送料へ進んでください。

JavaScriptは「入口」と「機能別」に分かれる

form/js/main.js が #mf-mail-form を見つけ、機能別のファイルを呼び出します。

ファイル	主な役割
`input-state.js`	修正時の入力復元、条件付き必須の反映
`validation.js`	入力時のエラー案内
`input-ux.js`	文字数表示などの入力補助、ページ離脱の案内
`postal-code.js`	郵便番号からの住所入力補助
`order-cart.js`	商品数量に応じた画面上の金額表示

色の変更はCSS、必須条件の変更はHTMLと用途定義から着手します。項目変更のたびに main.js を書き換える構成ではありません。入力補助を詳しく調整するときは入力操作のカスタマイズを参照してください。

ここまでできたらOK 使用中の入力ページとCSSを特定でき、変更が「そのページだけ」「同じデザインを使うページ」「共通画面」のどこまで届くか説明できれば、編集の準備は完了です。

次はクラス名と命名ルールで、コードに出てくる名前を読み解きます。