ozn-form（オゾン・フォーム） EFO対応 汎用PHPメールフォーム
ozn-form 機能紹介
ozn-form（オゾン・フォーム）は、いわゆる「EFO（入力フォーム最適化）」における代表的なセオリーを盛り込んだ、コーポレートサイト向けのPHP製汎用メールフォームです。
基本的なHTMLとCSSの知識があれば、高機能なメールフォームを少ない工数で設置できます。
高機能な入力値検証・入力支援機能
フロントエンドには、PCリテラシーが高くないユーザーでも入力しやすく、ストレスになりにくい配慮を盛り込みました。
不要な機能はOFFにできます。
- リアルタイムバリデーション
入力欄からカーソルが外れた時点ですぐに入力内容を検証し、枠の色とアイコンでエラーの有無を伝えます。エラー文面や出力箇所も編集可能です。
特にメールアドレス入力欄では、ただ「形式が誤っています」だけでなく、どの部分が間違っているのか詳しいエラー文を表示します。
- メールアドレスのドメインサジェスト
入力間違いを減らすため、主要なドメインは候補から選択できるようにしました。
さらに、ユーザーが携帯キャリアメールのアドレスを入力した場合のみに特定の注記文を表示できます。
候補ドメイン・キャリアドメインのリストも編集可能です。
- フリガナ自動補完
氏名入力欄などではキー入力を感知し、対応するフリガナ欄にカナを自動入力させることが可能です。
- 日付をカレンダーから入力
日付の入力欄では、Datepicker UIを使えます。
- 全角英数字・半角カナ等の自動変換
電話番号やメールアドレス、フリガナなどの入力欄で、ユーザーが全角英数字や半角カナで入力をしても検証エラーを出さず、入力終了時に半角英数字・全角カナに自動変換します。
- 郵便番号から住所補完
郵便番号を入力すると、自動的に住所も入力されます。都道府県・市町村入力欄を分ける場合、分けない場合どちらでも対応可能です。 - ファイル添付機能
解像度の高い画像は送信前にリサイズ可能。許可する拡張子も編集可能です。 - 離脱防止アラート
フォーム画面から送信以外のアクションで離脱する際にアラートを出します。特定のリンクからの離脱はアラートOFFにすることも可能です。 - 送信ボタンの二重クリック防止
送信ボタンをクリックした瞬間にボタンが無効化され、二度押しにより同じメールが2通飛んでしまうことを防ぎます。 - エンターキーでの誤送信防止
入力中にエンターキーを押したら誤って途中送信してしまった、というイライラ事案を防ぎます。 - 入力エラーがある項目だけを残して表示
入力不備がある状態で「次へ進む」ボタンを押すと、エラーがある項目だけを残し、問題ない項目は非表示にします。
どこがエラーになっているのか、迷いにくくするための配慮です。 - 入力のない項目は、確認画面やメール文面で非表示に
任意入力欄で入力がなかった場合、確認画面や自動返信メールの文面では見出しごと非表示にすることができます。
サイト運営に便利な機能
サイト運営者（クライアント企業）が問い合わせ対応しやすいような機能・工夫も入れています。
- 問い合わせ履歴のダウンロード
問い合わせ履歴をSQLiteデータベースに保存し、CSVでダウンロードできます。 - 管理者向けメール内にリファラー出力
ユーザーがフォームの1つ前にどのページを見ていたか分かるため、問い合わせ時のスムーズな対応に活かせます。 - CC, BCC指定可能
管理者向け・客先向けメールとも、CCやBCCで複数の送信先を指定できます。 - Google reCAPTCHA v3 によるスパム対策
機械的にスパムメールを送信してくるbotを防ぐための対策として、reCAPTCHA 機能を利用できます（利用にはGoogleアカウントが必要です）。
Google reCAPTCHA v3 は訪問ユーザーの行動を「スコア」という独自の数値で判定し、自動的に人間かbotかを判別する仕組みのため、ユーザーがボックスにチェックをしたり、ぐにゃぐにゃの文字を読まされたり、荒い画像の中から自動車や信号機を探す必要はもうありません。
Google reCAPTCHA v3 で保護されているページには、右下にバッジが表示されます。
フォーム設置作業者にやさしい仕様
ウェブ制作会社・デザイナー・コーダー（マークアップエンジニア）が設置することを考慮し、プログラミングの知識が少なくても設置しやすいように設計しました。
HTML, CSSの知識があれば、表示を柔軟にカスタマイズできるようになっています。
フロントエンド・PHPともに特定のフレームワークに依存していないので、どんな環境でも組み込みやすいと思います。（多分）
- 各ステップとも通常のHTMLの知識でカスタマイズ可能
フロントエンドはプログラム側でハードコーディングされていないため、入力画面・確認画面・送信完了画面すべて自前のHTML, CSSで柔軟にスタイリングできます。 - 機能設置はHTML要素にclassやdata-*属性をつけるだけ
JavaScript, PHPのコードを極力書かなくても機能実装できるようにしています。 - 複数のフォーム設置に対応
1サイトに複数のフォームを設置したい場合でも、ozn-formコアファイルは1つだけで対応できます。 - 1つ前のページから情報の引渡しが可能
フォーム設置ページへの流入時、問い合わせ対象の商品名・サービス名などが既に入力された状態にできます。
1つ前のページからフォーム設置ページへのリンクに、URLパラメータで補完したい入力欄のnameとvalue値を仕込むだけです。 - ステップ分割・省略に対応
項目数の多いフォームでは、入力ステップを分割できます。
その逆に、入力内容の確認画面をスキップし、即送信させることも可能です。 - 送信完了時、完了画面の代わりに任意のURLへリダイレクト可能
送信完了画面のみ既存のCMSで作成したページへ飛ばしたい、等の要件にも対応可能です。 - 条件付き必須入力に対応
とある入力項目の選択内容に応じて、バリデーション条件を追加することができます。
（例）「その他を選んだ場合のみ詳細入力必須」「納期希望ありを選んだ場合のみ日付欄の入力が必須」など - 自動返信メールの文面編集も柔軟
住所欄など、複数の入力欄に分かれた項目もつなげて出力できます。
また、入力項目のvalue値を本文以外にも適用可能。例えば、「お問い合わせ種別」の選択内容をメール件名に反映する、といった運用がおすすめです。
フォーム付属のCSSについて
多くのウェブ制作者にとって、メールフォームのコーディングは手間のかかる作業だと思います。
ozn-form標準のclassやサンプルHTMLのソースをそのまま流用すれば、スマートフォンでも使いやすいEFO・レスポンシブ対応のフォームが実装できます。もちろん標準スタイルが気に入らない場合は使わなくても大丈夫です。
- 入力欄の余白・フォントサイズを大きめに取り、PCでもスマートフォンでも入力しやすくしました。
- 見やすい「必須」「任意」ラベルを用意しました。
- 送信・戻るボタン用のclassもあります。ボタンの文言はご自由に変更してください。
- 入力完了までの流れを示すステップバーも作っておきました。
- フォーム付属のCSSを案件ごとに編集したい制作者の方向けに、Sass形式のファイルもお渡しできます。
導入事例
- イベントパートナー様 | フォーム設置ページ
- 運営堂様 | フォーム設置ページ
- 住感工房様 | フォーム設置ページ
- BabyFit保育園・BabyStep保育園様 | フォーム設置ページ
- グリーンタクシー・楠公タクシー様 | フォーム設置ページ
※Google Maps連携はご利用者様による独自カスタマイズです。
動作要件（最新バージョン 2.7.0）
- PHP 7.0 以上（PHP 8.0.9 まで動作確認済み）
PHP5.6.x でも動作はしますが公式サポート対象外です。できる限りサーバー側のPHPをアップデートしたうえでお使いください。 - SQLiteが使用できること（問い合わせ履歴管理機能ONの場合）
- 動作には jQuery 1.8 以上の読み込みが必要です（1.8 未満は動作対象外）。既存サイトに組み込んで使用する場合は導入済みのライブラリとの競合にご注意ください。
動作検証済みレンタルサーバ
- さくらのレンタルサーバ
- エックスサーバー
- Zenlogic
- CPI ACE01
- ロリポップ！
- heteml
- FutureWeb3
- シックスコア
上記以外のサーバでも動作要件を満たせば使えます。また、上記ホスティング会社のサーバでも、かなり古い契約でPHPのバージョンアップができない場合は動作要件外となりますのでご注意ください。
購入・設置代行依頼前に、導入予定のサーバでの動作状況をお知りになりたい方はお問い合わせください。
利用者側の推奨環境
- PC各ブラウザ(Edge, Google Chrome, Firefox, Safari, Opera)は最新バージョンを推奨。
- Internet Explorerは11で動作確認済み。IE9, 10では一部CSSが再現されませんがおそらくメール送信部分は動作すると思います。ただし動作保証外となります。
- スマートフォンは以下の環境で動作確認しております。
- iPhone: iOS 9.0以上 （ブラウザ：Safari）
- Android: 6.0以上 （ブラウザ：Chrome）
価格 （消費税込み）
| 設置代行あり 製品マニュアルなし |
標準テンプレートで設置 （背景色・ロゴ差し替え程度のみ） |
1サイト 33,000円 →標準テンプレート見本 |
|---|---|---|
| デザインカスタマイズあり （既存サイトとデザイン統一したい等） |
1サイト 55,000円〜 ※要見積 |
|
| 設置代行なし 製品マニュアルあり |
設置数制限なし （自社で設置できる制作会社さん等向け） |
110,000円 |
- お支払い方法は銀行振込のみとなります。ご発注確定後、請求書を発行いたしますので、指定期日までにお振り込みください。
- 設置代行ありの場合は、導入環境の事前調査が必要です。必要事項をお伺いした後、お見積書を発行いたします。
- 設置代行ありの場合は、設置先となるサーバーへの接続情報のご提出が必要です。
- 設置代行なしの場合は、ご入金を確認後、プログラム本体と製品マニュアルのダウンロードURLをメールにてお送りいたします。このメールの送信をもって、納品といたします。
ご利用にあたってのよくある質問
バージョンアップがあった際は追加費用がかかりますか？
- 製品マニュアルありで購入していただいた方には、バージョンアップも追加費用なしでご提供します。将来的に大きなリファクタリングをおこなうようなことがあれば別製品として費用をいただくかもしれませんが、その際は個別にご案内いたします。
- 設置代行あり・製品マニュアルなしでのご提供の場合は、費用はあくまで設置代行役務に対する報酬なので、バージョンアップも有料対応です。
設置代行あり・製品マニュアルなしで導入しましたが、複製して利用しても良いですか？
- 設置代行を受けた人が複製して別サイトに設置することに対しては、規約違反とはなりません。マニュアルもサポートありませんが、自分で対応可能であればご自由にお使いください。
- 過去に設置代行ありで導入された方がその後製品マニュアルを追加購入される場合は、定価100,000円 → 30,000円引きになります。ご希望の方は個別にご相談ください。
設置代行なし・製品マニュアルありで購入しましたが、設置が難しいので、代行をお願いできますか？
- 要見積（22,000〜）になりますが、対応可能です。ただし、ozone notesの通常制作業務スケジュールの合間での対応となりますので、お急ぎでの対応が難しいことが多いです。繁忙期には設置まで2週間程度かかることがありますので、あらかじめご了承ください。
設置代行なし・製品マニュアルありで購入しましたが、設置に関してサポートを受けられますか？
- 製品価格に、設置方法に関するお問い合わせ対応・設置後のサポート費用等は含まれません。ただし、製品の不具合が疑われる場合はこの限りではございませんので、エラー状況等、詳細情報を添えてご報告ください。
- 設置に関するサポートを受けたい場合は、ozone notesで提供している有償サポートのご利用をご検討ください。
発注元がozn-formを購入し、外注先のエンジニアにプログラムを渡して複数のサイトに設置してもらうのは、問題ないですか？
- 外注先の方が、発注元（購入者）の複数の案件に対してozn-formを導入したりマニュアルを活用するのはOKです。
- 外注先の方が、発注元（購入者）と関係ない別の案件で流用する場合は、その外注さんご自身で製品マニュアルを購入していただく必要があります。
利用規約
- 本製品の著作権は西三河情報システムおよびozone notesに帰属します。
- ただし、プログラム本体にリンクしているライブラリ群に関しては、各ライブラリが定めるライセンス規定が本条項に優先します。各ライセンス条項に定める通り、いかなる保証もなされないものとします。
- 購入者は本製品の利用にあたり、商用・非商用、利用目的、設置サイト数を問わず自由にお使いいただけます。
- 購入者は本製品の利用にあたり、プログラム本体内の著作権表示の改変・削除はできません。
なお「プログラム本体内の著作権表示」とはPHPソースコード内に記載されている記述を指します。フォームを設置したページやメール本文内に表示をする必要はありません。 - 製品マニュアルの再販・再配布は、改変の有無を問わず禁止します。
- 本製品を利用することにより発生する、ウェブサイト等への影響や情報漏洩の発生、その他一切の結果について、西三河情報システムおよびozone notesはいかなる責任も負わないものとします。
- 本製品の特性上、本製品に重大な瑕疵・欠陥が認められる場合を除き、納品後の返品はお請けいたしかねます。本製品に重大な瑕疵・欠陥が認められる場合は、納品後14日以内にご連絡ください。
- 本製品の販売価格・設置代行費用には、設置対象となるウェブサイトの修正費用・設置方法に関するお問い合わせ対応・設置後のサポート費用等は含まれません。
変更履歴
[v2.7.0] - 2021-08-16
- Changed: 内部ライブラリ群のバージョンアップ
- Changed: 動作要件を PHP7.0.0〜8.0.x に変更
[v2.6.1] - 2020-12-15
- Fixed: 問い合わせ履歴CSV出力ページのタイトル修正
- Added: マニュアルに「問い合わせ履歴CSV出力機能」ページ追加
[v2.6.0] - 2020-10-15
- Changed: 動作要件を PHP5.6.x〜7.4.x に変更
- Changed: jQuery の動作要件に v3.x を追加
- Changed: ozn-form/css/ozn-form.min.css のフォントサイズ単位を em による相対指定に変更
[v2.5.0] - 2019-08-27
- Added: Google ReCAPTCHA v3 機能を追加
- Added: マニュアルに「連続クリック防止」設定例追記、「その他の活用例・トラブルシューティング等」ページ追加
[v2.4.0] - 2019-08-01
- Added: CSRF対策のため、トークン出力機能を追加
- Changed: 内部ライブラリ群のバージョンアップ
- Changed: 動作要件を PHP5.6.x〜7.3.x に変更
[v2.3.1] - 2018-12-20
- Added: 製品マニュアル追加
[v2.3.0] - 2018-04-30
- Added: 任意の項目の選択肢によって、管理者宛てメールの送信先を振り分ける機能を追加
- Fixed: iOS11で、メールアドレス入力欄で日本語キーボード使用時、メールアドレスサジェストを使うと、日本語の未確定文字が残ってしまう問題に対応
[v2.2.0] - 2018.01.21
- Added: 客先宛メールが送信失敗した時に表示する専用のエラー画面用ファイルを追加
[v2.1.4] - 2017-12-27
- Added: バリデーション条件を追加（メールアドレスで、@が複数入力された場合をエラーに）
- Added: アップロード済みファイル検証関数に日付のチェックを導入
- Fixed: バグフィックス 検証条件のある項目をリアルタイム検証するとき、一部の条件判定でエラーとなっていた部分を修正
[v2.1.1] - 2017-12-26
- Added: バリデーション条件を追加（チェックボックスの値に指定地を含むかどうか）
- Fixed: 軽微なバグフィックス
[v2.0.0] - 2017-08-07
- Added: 問い合わせ履歴のCSVダウンロード機能を追加
- Added: バーチャルホスト環境でドキュメントルートのパスを指定できるように
- Fixed: 汎用化に伴うリファクタリング、バグフィックス
[v1.0] - 2017.03.10
- 基本機能を実装した最初のリリース
お問い合わせ先
本製品についてのお問い合わせは ozone notes にて承ります。