LW Simple Forms

説明

LW Simple Forms は、カスタマイズ可能なフォームを作成できる多機能な WordPress フォームプラグインです。日本式のワークフローである完全なフォーム送信プロセスをサポートしています:

  1. 入力画面 – ユーザーが情報を入力
  2. 確認画面 – ユーザーが送信前に入力内容を確認
  3. 完了画面 – 送信成功後のお礼メッセージ

このプラグインは、確認が不要な場合のシンプルなワンステップの送信プロセスもサポートしています。

対応するすべてのフィールドタイプを含むサンプルフォームが初回有効化時に自動的に作成されるため、すぐに使い始めることができます。

重要: キャッシュプラグインとの互換性
キャッシュプラグイン(例: WP Super Cache、W3 Total Cache、WP Total Cache、LiteSpeed Cache)やCDN(例: Cloudflare)を使用している場合、キャッシュされたページはPOSTデータを処理しないため、フォーム送信が正しく動作しない場合があります。フォームページのURL(入力、確認、完了、エラー)をキャッシュから除外してください。

CSSスタイリング
このプラグインはフォーム表示用のフロントエンドCSSを含みません。テーマのスタイルシートを使用してフォームのスタイルを設定してください。HTML/CSSサンプルはプラグインのウェブサイトで参考用に公開しています。

開発コンセプト

  • HTML ファーストアプローチ: このプラグインは、プラグインの制限に適応することを強制せず、設計された HTML フォーム、確認画面、エラー画面を忠実に再現するように設計されています。フォームはお使いのデザインに合わせて適応し、その逆ではありません。

  • Web プロフェッショナル向け:LW Simple Forms は、フロントエンド用の CSS や HTML テンプレートを提供しません。これは、フォーム画面をすでに設計しており、機能を実装する方法が必要な Web デザイナーや開発者向けに特別に作成されています (HTML/CSS サンプルは参考のために利用可能です)。

  • ミニマリスト哲学: このプラグインは意図的にミニマリストアプローチを維持し、過剰な機能よりもコア機能に焦点を当てています。サイトの速度とデータ使用量の最小化を優先し、ウェブサイトを効率的に運用できるようにしています。

主な機能

  • 完全なフォームワークフロー: 入力画面、エラー画面、確認画面、完了画面を備えたフォームを作成
  • 柔軟なデザイン: 独自の HTML で各画面をカスタマイズ
  • フォームバリデーション: 各入力フィールドのサーバーサイドとクライアントサイドの検証 (必須フィールド、メール形式、電話番号検証)
  • メール通知: 管理者とユーザーの両方に確認メールを送信
  • セキュリティ機能:CSRF 保護、データサニタイズ、入力検証、安全なデータ処理
  • 複数のフィールドタイプ: テキストフィールド、テキストエリア、チェックボックス、ラジオボタン、セレクトメニュー、マルチセレクトメニューのサポート
  • ショートコードサポート: ショートコードによる WordPress ページへの簡単な統合
  • カスタム HTML: 完全な HTML 自由度でフォームをデザイン
  • マルチフォームサポート: 単一のサイトで複数のフォームを作成および管理
  • データベースストレージ: フォームデータはセッションや Cookie ではなく、一時的にデータベースに保存され、無制限の送信データが可能
  • JavaScript/非 JavaScript サポート:JavaScript が無効な環境 (スクリーンリーダーなど) でもフォームは正常に機能
  • フィールド検証: カスタマイズ可能なエラーメッセージを備えた広範な検証システム
  • reCAPTCHA v3対応: スパム対策として Google reCAPTCHA v3を任意で統合可能
  • 重複送信防止:PRG (Post-Redirect-Get) パターンにより、ページリロード時のフォーム二重送信を防止
  • セキュリティ対策:CSRF 攻撃やヘッダーインジェクションなどの一般的な脆弱性に対する保護

使用ガイド

  1. 入力画面、確認画面、完了画面の HTML をデザインして作成
  2. 各画面を WordPress ページとして登録
  3. WordPress の管理パネルの「フォーム」から新しいフォームを作成
  4. Configure each section. You can configure the following:
    • 各画面の HTML (入力、確認、完了)
    • 各画面の URL
    • 管理者メール設定
    • ユーザーメール設定
    • 検証設定 (必須フィールド、メール形式、電話番号検証)
  5. 「HTML を解析」ボタンを使用して、入力画面の HTML からフォームフィールドを自動的に抽出
  6. 適切なショートコードをページに追加
  7. 本番環境に移行する前にフォームの動作をテスト

注意: このプラグインはフォーム HTML を書く自由度を最大限に高めるように設計されているため、フォームページの HTML を自分で書く必要があります。プラグインはフォーム表示用の CSS や画像を提供しません。参考用の HTML サンプルが利用可能です。

サポートされている入力フィールド

  • <input type="text">
  • <input type="tel">
  • <input type="email">
  • <input type="radio">
  • <input type="checkbox">
  • <textarea>
  • <select>
  • <select multiple>

フォーム画面のプレースホルダー

入力画面:
* [lwsf_value_フィールド名] を使用して以前に入力された値を表示
* [lwsf_error_フィールド名] を使用してバリデーションエラーメッセージを表示
* [lwsf_send] を使用して送信ボタンを表示

確認画面:
* [lwsf_confirm_fieldname] を使用して送信された値を表示
* [lwsf_back] を使用して戻るボタンを表示
* [lwsf_send] を使用して送信ボタンを表示

完了画面:
* [lwsf_field_fieldname] を使用して送信された値を表示

メール設定

メールテンプレートで使用可能なプレースホルダー:
* [lwsf_field_fieldname] – 送信されたフォームデータを表示
* [lwsf_site_admin_email] – サイト管理者のメールを表示
* [lwsf_site_name] – サイト名を表示
* [lwsf_site_home_url] – サイト URL を表示

追加情報

  • 複数選択可能なアイテム (<input type="checkbox"><select multiple>) の場合、name 属性に [] を追加する必要があります。
    例:

    • チェックボックスの場合: <input type="checkbox" name="services[]" value="ServiceA"> サービス A <input type="checkbox" name="services[]" value="ServiceB"> サービス B
    • 複数選択セレクトの場合:
      <select id="products" name="products[]" multiple size="4">
      <option value="ProductA">製品 A</option>
      <option value="ProductB">製品 B</option>
      </select>
  • スクリーンリーダーなど JavaScript が無効な環境でも動作

  • 出力されるソースコードはセキュリティ対策と安定した操作のためにエンティティ参照を使用
  • 日本語ファイルを含む (UTF-8のみ)
  • 衝突を防ぐためにフォームフィールドに WordPress の予約クエリ変数名を使用することを避ける
  • PHP互換性: PHP 7.4以上が必要です。PHP 7.4およびPHP 8.3でテスト済み。

データストレージとセキュリティ

  • フォーム送信は一時的に WordPress データベース (prefix_lwsf_form_data テーブル) に保存
  • データは1時間後に自動的にクリーンアップ
  • すべてのユーザー入力は処理前にサニタイズ
  • すべてのフォーム送信に CSRF 保護が実装
  • メールヘッダーはヘッダーインジェクションを防ぐために検証

このプラグインが作成された理由

このプラグインは、長年クライアントワークに使用されていた MW WP Form が開発を終了したため作成されました。確認画面を備え、クリーンに動作するフォームプラグインが必要でした。このプラグインは主に Web 開発作業のために作成され、自分と同じような Web 開発会社が同様のニーズを持っているかもしれないと考えました。

将来の実装計画

  • 検証エラーメッセージを変更する機能
  • フォーム送信の前後に動作する PHP ベースの検証フック
  • 追加の検証タイプ (URL、数値、カスタム正規表現パターン)
  • メール送信の直前・直後など重要なタイミングで発火するフック
  • ファイルアップロード処理

プライバシーポリシー

このプラグインは、確認画面と完了画面を表示するためにフォーム送信データを WordPress データベース (prefix_lwsf_form_data テーブル) に保存します。データは1時間後に自動的に削除されます。

有効にすると、フォーム送信者への確認メール送信にユーザーのメールアドレスが使用される場合があります。

reCAPTCHA v3が有効な場合、フォーム送信データ (reCAPTCHA トークンとユーザーの IP アドレス) がスパム検出のために Google の reCAPTCHA 検証 API (https://www.google.com/recaptcha/api/siteverify) に送信されます。Google によるデータの取り扱いの詳細については、Google のプライバシーポリシー および 利用規約 をご参照ください。その他のデータは外部サービスと共有されません。

スクリーンショット

  • フォーム編集画面の例。
  • 日本語でのフォーム編集画面の例。
  • 静的ページにフォーム入力画面ショートコードを埋め込む例。
  • フロントエンドでのフォーム入力画面 (CSS が適用されていない)。
  • 静的ページに入力エラー画面ショートコードを埋め込む例。
  • フロントエンドでの入力エラー画面 (CSS が適用されていない)。
  • 静的ページに確認画面ショートコードを埋め込む例。
  • フロントエンドでのフォーム入力画面 (基本的な CSS が適用された)。
  • 静的ページに送信完了画面ショートコードを埋め込む例。
  • フロントエンドでの送信完了画面 (CSS が適用されていない)。

インストール

  1. lw-simple-forms フォルダを /wp-content/plugins/ ディレクトリにアップロード
  2. WordPress の「プラグイン」メニューからプラグインを有効化
  3. 「フォーム」メニュー項目から新しいフォームを作成
  4. HTML テンプレートやメール通知などのフォーム設定を構成
  5. フォーム画面 (入力、確認、完了) 用のページを作成
  6. Add the appropriate shortcodes to your pages:
    • [lwsf_input id="123"] – 入力画面用
    • [lwsf_confirm id="123"] – 確認画面用(任意 – 空にすると確認をスキップ)
    • [lwsf_complete id="123"] – 完了画面用(任意 – 省略すると入力画面URLに完了が表示されます)
    • [lwsf_error id="123"] – エラー画面用(任意 – 省略すると入力画面にエラーが表示されます)

FAQ

フォームを作成するにはどうすればよいですか ?

WordPressの管理画面でLW Simple Forms 新規フォームを作成に移動し、フォーム設定を行って保存します。その後、適切なショートコードをページに追加する必要があります。

必須フィールドを設定するにはどうすればよいですか ?

フォーム HTML を作成した後、「HTML を解析」ボタンを使用してフォームフィールドを自動的に検出します。その後、「検証設定」セクションでフィールドを必須としてマークできます。

確認画面をスキップできますか ?

はい。「確認画面 URL」フィールドを空のままにしておくと、フォームは送信後に直接完了画面に進みます。

送信データはシステム内でどれくらいの期間保持されますか ?

データは1時間の間、一時的にデータベースに保存されます。この期間の後、データは自動的に削除されます。

ユーザーが JavaScript を無効にしている場合、フォームは機能しますか ?

はい。プラグインは JavaScript の有無にかかわらず動作するように設計されています。すべての検証とフォーム処理にはサーバーサイドのフォールバックがあります。

異なる検証タイプに対して異なるエラーメッセージを表示するにはどうすればよいですか ?

現在、プラグインは標準的なエラーメッセージを使用しています。将来のバージョンではカスタマイズ可能な検証メッセージをサポートする可能性があります。

フォームで特殊文字を使用できますか ?

はい。プラグインは特殊文字と異なるエンコーディングを適切に処理しますが、UTF-8エンコーディングを使用することをお勧めします。

ユーザーに確認メールを送信するにはどうすればよいですか ?

「ユーザー宛自動送信メール設定」の「送信先メールアドレスフィールド」設定に (通常はメールフィールドの) フィールド名を入力します。
例: メールフィールドの name 属性が「your-email」に設定されている場合、[lwsf_field_your-email] のように記述する必要があります。

評価

このプラグインにはレビューがありません。

貢献者と開発者

LW Simple Forms はオープンソースソフトウェアです。以下の人々がこのプラグインに貢献しています。

貢献者

“LW Simple Forms” は1ロケールに翻訳されています。 翻訳者のみなさん、翻訳へのご協力ありがとうございます。

“LW Simple Forms” をあなたの言語に翻訳しましょう。

開発に興味がありますか ?

コードを閲覧するか、SVN リポジトリをチェックするか、開発ログRSS で購読してみてください。

変更履歴

1.1.1

新機能:

  • 対応するすべてのフィールドタイプ(テキスト、電話番号、メール、ラジオ、チェックボックス、テキストエリア、セレクト、複数選択セレクト)を含むサンプルフォームが初回有効化時に自動的に作成され、簡単に参照できます

ドキュメント:

  • キャッシュプラグイン/CDN互換性の警告を追加
  • CSSスタイリングの注記を追加(フロントエンドCSS非同梱)
  • インストールセクションで任意のショートコードを明記
  • PHPバージョン互換性の明記(PHP 8.3でテスト済み)
  • WordPress 6.9との互換性を更新

1.1.0

新機能:

  • reCAPTCHA v3統合 – LW Simple Forms > 設定で Site Key と Secret Key を設定。有効にすると、フォーム送信時に reCAPTCHA トークンが自動的に生成・検証されます。API 通信エラー時は正当なユーザーをブロックしないようフェイルオープンで動作します。スコア閾値:0.5。
  • PRG (Post-Redirect-Get) パターンによる重複送信防止 – フォーム完了後、Cookie ベースのセッションキーを保存し、302リダイレクトでクリーン URL にリダイレクトします。完了画面は1回のみ表示され、ページリロード時は入力ページにリダイレクトされます。

改善:

  • WordPress 予約語バリデーションが、フォームフィールド名に予約クエリ変数 (例:namepspage) が使用されている場合、保存をブロックするようになりました (以前は警告のみ)。大文字小文字を区別する比較:Name は許可、name はブロック。
  • wp_kses 許可 HTML タグを拡張し、<form><button><textarea> とそれらの一般的な属性を含めました。これにより確認画面のボタンやフォーム要素が HTML 属性 (class、id など) を正しく保持するようになります。
  • フロントエンド CSS の外部化 – プラグインはインライン CSS を出力しなくなりました。エラーメッセージやボタンのスタイルはサイトのスタイルシートで定義してください。
  • POST データが wp_unslash() で適切に処理されるようになり、WordPress の wp_magic_quotes() による二重エスケープの問題を解消しました (例:I'mI\'m にならなくなりました)。
  • HTML サニタイズ警告の改善 – wp_kses が style 属性の末尾セミコロンを削除することによる誤検知を避けるため正規化比較を追加。警告メッセージが汎用メッセージではなく実際に変更された行を表示するようになりました。
  • 管理画面の注記を更新し、style 属性は許可されていることを明確化しました (セキュリティ上ブロックされるのは script タグのみ)。
  • 確認ボタンのデフォルトラベルを「Confirm Input」から「Confirm」に変更。

バグ修正:

  • 確認画面なしの直接送信モードを修正 – WordPress がクエリパラメータを解釈して404エラーを引き起こしていたクエリパラメータ方式 (?lwsf_complete=1&key=...) を廃止。REST API 呼び出し内でメール送信を完了し、JavaScript にフラグを返す方式に変更しました。
  • reCAPTCHA トークンの再生成を修正 – reCAPTCHA トークンは1回しか使用できないため、最終フォーム送信前にトークンを再生成するようになりました。
  • async-javascript プラグインとの非互換性を文書化 – 同プラグインが lwsf.jsasync 属性を付加するとフォーム機能が壊れます。回避策:async-javascript プラグインの設定で lwsf-form-handler を除外してください。

1.0.0

  • 初回リリース