# フリーランスフォーム パッケージ
用途別フォーム10種類と、入力画面のデザイン10パターンを収録しています。各用途は1ファイル・番号なしで、初期CSSを使用します。用途とデザインは組み合わせて使えます。
開発プロジェクトでは、販売用の一式を `mailform-dev/package/` にまとめています。プロジェクト直下の `index.html` は紹介サイトのトップページです。特徴・デザイン・用途・機能・料金・導入方法・利用者の声・FAQ・ドキュメントの案内ページも用意しています。紹介サイトの編集方法は、プロジェクト直下の `README.md` を参照してください。
## 用途別フォーム
| 用途 | 入力ページ | 主な内容 |
|---|---|---|
| お問い合わせ | [index-contact.php](index-contact.php) | ご質問・ご相談 |
| 予約 | [index-reservation.php](index-reservation.php) | 希望日時・人数・利用内容 |
| 通販・取り寄せ注文 | [index-order.php](index-order.php) | 商品写真・価格・商品別数量・配送先・希望日 |
| デリバリー・店頭受取 | [index-delivery.php](index-delivery.php) | 商品写真・価格・商品別数量・当日の配達／受取 |
| 採用応募 | [index-recruit.php](index-recruit.php) | 学歴・職歴・自己PR・PDF書類 |
| 見積もり依頼 | [index-estimate.php](index-estimate.php) | 依頼内容・予算・納期 |
| 資料請求 | [index-request.php](index-request.php) | 希望資料・メール／郵送 |
| イベント申込 | [index-event.php](index-event.php) | 希望企画・開催枠・人数 |
| 入会申込 | [index-membership.php](index-membership.php) | 希望プラン・利用開始時期 |
| アンケート | [index-survey.php](index-survey.php) | 満足度・ご意見。氏名とメールは任意 |
予約・注文は希望内容の受付です。決済、在庫管理、配達手配、予約枠の空き状況管理、自動確定は含みません。開催枠・プランなどの選択肢は、設置先の内容に変更してください。
注文フォームは複数の商品をまとめて選べます。商品写真・商品名・説明・税込価格・数量上限・送料は `form/php/config/catalogs.php` で変更し、入力画面・確認画面・メールの金額に反映します。各商品は初期設定で0〜20点、注文全体で1点以上が必要です。詳しくは [08 商品・価格・送料の変更](../docs/order-products/index.html)を参照してください。
## デザイン見本
[デザイン一覧を開く](designs.html)。01〜05は幅広いサイトへの合わせやすさ、06〜10はタイトル・文字組み・大きなレイアウトの個性を重視しています。01の基本レイアウトを維持し、全10パターンでメインカラーとフォントを揃えています。
青 `#174bff` をメインカラーとし、青のごく薄い色、白・薄グレーを組み合わせます。赤は必須・エラー表示に使用します。日本語は **Noto Sans JP**、英字・数字の見出しは **Manrope** です。色とフォントは `form/css/addon/brand.css` で管理します。フォームは `.mf-form-shell` で囲み、背景・外側の余白を設定します。CSSはフォーム内に限定し、埋め込み先の `body` や他の要素に影響しません。Google Fontsを読み込めない場合はシステムのサンセリフ体で表示します。
| 番号 | デザイン | 方向性 | 特徴 |
|---|---|---|---|
| 01 | [スタンダード](index-design-01.php) | 汎用 | 端正な見出しと、慣れ親しんだ入力レイアウト。基本の構成に、共通の青とフォントを。 |
| 02 | [クリアビジネス](index-design-02.php) | 汎用 | 白い背景と薄グレーの入力欄。左右に分けた、明快な導入。 |
| 03 | [ライトグレー](index-design-03.php) | 汎用 | 薄グレーの背景と白い入力面。縦に読み進められる、静かな構成。 |
| 04 | [ブルーフレーム](index-design-04.php) | 汎用 | 青いラッパーと白いフォーム。外側のpaddingで幅を調整。 |
| 05 | [ソリッドコンタクト](index-design-05.php) | 汎用 | 大きな白抜き英字。白いフォームと薄グレーの入力欄。 |
| 06 | [アウトラインテーブル](index-design-06.php) | 個性 | アウトライン英字とリボン。青地・白文字の項目見出し。 |
| 07 | [レイヤードコンタクト](index-design-07.php) | 個性 | 透かし英字と斜めの裾。薄グレーの項目見出しと枠線。 |
| 08 | [ブルースタジオ](index-design-08.php) | 個性 | 大きな英字と青。PCでは導入と入力欄を左右に並べるレイアウト。 |
| 09 | [オフセットコンタクト](index-design-09.php) | 個性 | 大きな英字とずらした青い色面。スマホでは項目ごとのカードに。 |
| 10 | [コンタクトカード](index-design-10.php) | 個性 | 項目ごとの白いカード。スマホでもラベルと入力欄をひとまとまりに。 |
見本は従来の共通お問い合わせ項目を使います。各用途の入力ページで、2つ目のCSSの参照先を変更するとデザインを適用できます。
```html
```
たとえば2行目を `./form/css/design-06/style.css` に変更します。初期CSSとデザインCSSの両方を重ねて読み込む必要はありません。
通販・取り寄せ注文とデリバリー・店頭受取では、商品カード用の `./form/css/addon/order-cart.css` も読み込みます。デザインを変更するときも、この追加CSSはデザインCSSの後に残してください。
02〜10は導入のHTMLと文言も個別に設計しています。CSSのみの差し替えで標準見出しにも対応し、導入まで再現するときは各見本の `.form-heading` をコピーします。[見出しの変更と共通UX](../docs/design-customization/index.html)も参照してください。
販売用CSSは1つのプロパティごとに改行し、日本語コメントで編集箇所を案内しています。文字サイズ・余白はpxを基本とし、画面幅1024〜1280px・768〜1023px・767px以下のメディアクエリで調整します。ローカルCSSの読み込みURLにはバージョン用クエリを付けていません。
共通UXとして、初回入力中・日本語変換中に急いでエラーを出さない検証、項目へ移動できるエラー要約、テキストエリアの自動伸長、文字数上限がある欄のカウンター、モバイル向け入力補助を同梱しています。[09 入力操作のカスタマイズ](../docs/input-ux/index.html)に設定と検証方法をまとめています。
## 共通処理
```text
package/
├─ index.php / index-design-01.php ～ index-design-10.php
├─ index-contact.php など用途別10ページ
├─ form/css/・form/js/
├─ form/images/products/ サンプル商品画像8点・生成記録
├─ form/php/
│ ├─ input.php・common.php 入力状態・検証・添付・メールの共通処理
│ ├─ order-products.php 共通の商品一覧
│ ├─ confirm.php・send.php 共通の確認画面・送信
│ ├─ thanks.php・result-view.php 共通の完了・エラー表示
│ └─ config/
│ ├─ config.php SMTP・送信元・受信先の設定
│ ├─ forms.php 用途別の項目定義
│ └─ catalogs.php 商品写真・税込価格・数量上限・送料の設定
├─ PHPMailer/ 同梱メールライブラリ
└─ tests/ ローカル確認用
```
確認・完了・エラーのPHPは全用途・全デザインで共用します。`thanks-order.php` のようなファイルは追加しません。これらの画面は従来の共通CSSを使い、入力画面のデザイン選択には連動しません。
## 動作環境と添付ファイル
- PHP 8.1以上、`mbstring`、`fileinfo`、セッションが利用できるWebサーバー。
- SMTP接続先と、PHPから書き込めるセッション保存先・一時保存先。TLS接続ではOpenSSL拡張も必要です。
- JavaScriptとCookieが有効なブラウザー。入力内容の復元や条件付き必須表示に使用します。
- PHPMailer 6.9.3を同梱しています。送信処理は同梱の `PHPMailer/src/` を読み込みます。
SMTPなどの設定場所は `form/php/config/config.php` です。認証情報は公開資料に記載せず、設置先の設定ファイルで管理してください。
採用の `resume` はPDFを1ファイル、従来の `index.php` とデザイン見本の `attachment[]` はPDF・JPEG・PNGを2ファイルまで添付できます。1ファイル5MBまでです。`php.ini` の設定例は `upload_max_filesize = 8M`、`post_max_size = 20M`、`max_file_uploads = 2` 以上です。PHPの設定変更後はWebサーバーを再起動してください。
添付は確認・修正中に一時保存され、送信完了時に削除されます。入力情報と添付の保持期限は最終更新から1時間です。期限切れの削除は次回の入力・確認処理で行うため、アクセスのない間に時刻どおり消える仕組みではありません。
## はじめ方・検証
詳しい設置・設定手順は [Webドキュメンテーション](../docs/index.html) にまとめています。Markdown原稿は販売パッケージに含めません。このREADMEのドキュメントリンクは、開発プロジェクト内の配置を基準にしています。
[01 導入方法](../docs/installation/index.html)、[02 Gmail設定](../docs/gmail-setup/index.html)、[03 項目変更](../docs/form-fields/index.html)、[04 デザイン変更](../docs/design-customization/index.html)、[08 商品・価格・送料の変更](../docs/order-products/index.html) を参照してください。商品写真8点は生成したサンプルです。[画像の生成記録](form/images/products/SOURCES.md)も同梱しています。
XAMPPでの確認先は `http://localhost/mailform-dev/package/index-contact.php` です。ファイルをダブルクリックして開く方法ではPHPは動きません。
`package/` ディレクトリで次を実行します。HTTPテストにはNode.jsが必要です。ローカルのWebサーバーを起動してから実行してください。既定の接続先は `http://localhost/mailform-dev/package/` で、変更時は環境変数 `MAILFORM_BASE_URL`、PHP実行ファイルの指定には `PHP_BIN` を使います。
```sh
php tests/form-validation.php
node tests/http-flow.cjs
```
これらのテストは実際のメールを送信しません。ブラウザーから「送信する」を押す操作は実際のSMTP送信になるため、送信先設定を確認したうえで行ってください。
CSSの変更後は `node tests/css-layout.cjs` で、デザイン見本・用途別ページ・注文フォームと全デザインの組み合わせを9段階の画面幅で確認できます。開発用にPlaywrightとMicrosoft Edgeが必要です。Playwrightを別の場所に用意している場合は `PLAYWRIGHT_MODULE` にモジュールディレクトリを指定します。`CSS_SCREENSHOTS` に保存先を指定すると、PC・スマートフォンの画面画像も保存します。この検査はフォームを送信しません。