WordPressサイトを構(gòu)築している場合は、WordPressフォームプラグインを選択しない正當(dāng)な理由が必要です。それらは便利で、ゼロから構(gòu)築するために多くの努力が必要なカスタマイズをたくさん提供しています。 HTMLをレンダリングし、データを検証し、提出物を保存し、サードパーティサービスとの統(tǒng)合を提供します。

ただし、WordPressをヘッドレスCMSとして使用する予定だとします。この場合、主にREST API（またはGraphQL）と相互作用します。フロントエンドの部分は完全に私たちの責(zé)任になり、その領(lǐng)域で重い持ち上げを行うためにフォームプラグインに頼ることはできません。今、私たちはフロントエンドになると運転席にいます。

フォームは解決された問題でしたが、今ではそれらについて何をすべきかを決める必要があります。いくつかのオプションがあります：

• そのようなことがあれば、獨自のカスタムAPIを使用しますか？そうでない場合、そして私たちはそれを作りたくないので、私たちはサービスを使うことができます。多くの優(yōu)れた靜的フォームプロバイダーがあり、新しいプロバイダーが絶えずポップアップしています。
• 既に使用しているWordPressプラグインを使用して、検証、ストレージ、統(tǒng)合を活用し続けることができますか？

最も人気のあるフリーフォームプラグインであるフォーム7に連絡(luò)すると、提出REST APIエンドポイントがあり、特によく知られている有料プラグイン、重力フォームなどもあります。

技術(shù)的な観點からは、フォームのデータをサービスまたはWordPressプラグインによって提供されるエンドポイントに送信することに実際の違いはありません。したがって、さまざまな基準(zhǔn)に基づいて決定する必要があります。価格は明らかなものです。その後、WordPressのインストールとそのREST APIの可用性があります。エンドポイントに提出すると、常に公開されていることを前提としています。サービスに関しては、それが利用可能になるために支払うため、それはすでに明らかです。一部のセットアップでは、WordPressアクセスが編集および構(gòu)築プロセスのみに制限される場合があります?？紤]すべきもう1つのことは、特にGPDR規(guī)制を順守する方法で、データを保存する場所です。

提出を超えた機能に関しては、WordPressフォームプラグインを一致させるのが難しいです。エコシステム、レポートを生成できるアドオン、PDFS、ニュースレターとの容易に利用できる統(tǒng)合、および支払いサービスがあります。これを単一のパッケージで提供するサービスはほとんどありません。

WordPressテーマに基づいてフロントエンドで「従來の」方法でWordPressを使用しても、フォームプラグインのREST APIを使用すると、多くの場合は意味があります。たとえば、ユーティリティファーストCSSフレームワークを使用してテーマを開発している場合、BEMのようなクラスコンベンションで構(gòu)成された固定マークアップでレンダリングされたフォームをスタイリングすると、開発者の口に酸味が殘ります。

この記事の目的は、2つのWordPressフォームプラグインの提出エンドポイントを提示し、箱から出ることに慣れた典型的なフォーム関連の動作を再現(xiàn)する方法を示すことです。一般に、フォームを提出するときは、2つの主な問題に対処する必要があります。 1つはデータ自體の提出であり、もう1つはユーザーに意味のあるフィードバックを提供しています。

それでは、そこから始めましょう。

エンドポイント

データの送信はより簡単な部分です。どちらのエンドポイントもPOSTリクエストを期待しており、URLの動的部分はフォームIDです。

フォーム7のREST APIにお問い合わせください。プラグインがアクティブ化されるとすぐに利用できます。これは次のようになります。

 https：//your-site.tld/wp-json/contact-form-7/v1/contact-forms/ <form_id>/フィードバック</form_id>

重力型を使用している場合、エンドポイントはこの形狀を取得します。

 https：//your-site.tld/wp-json/gf/v2/forms/ <form_id>/submissions</form_id>

重力フォームREST APIはデフォルトで無効になります。それを有効にするには、プラグインの設(shè)定に移動してから、REST APIページに移動し、「APIへのアクセスを有効にする」オプションを確認(rèn)する必要があります。フォーム送信エンドポイントではそれを必要としないため、APIキーを作成する必要はありません。

更新（2024年9月10日）： IDは、フォーム7バージョン5.8に接觸していますが、フォームの編集ページのURLにあることがあります。

リクエストの本文

私たちの例フォームには、次のルールを備えた5つのフィールドがあります。

• 必要なテキストフィールド
• 必要な電子メールフィールド
• 1957年10月4日までに日付を受け入れる必要な日付フィールド
• オプションのTextarea
• 必要なチェックボックス

フォーム7のリクエストのボディキーに連絡(luò)するには、フォームタグの構(gòu)文でそれらを定義する必要があります。

 {
  「誰かの名」：「マリアン?ケニー」、
  「Any-Email」：「[電子メール保護]」、
  「空間前」：「1922-03-11」、
  「オプションメッセージ」： ""
  「faketerms」：「1」
}

重力フォームは、キーを異なる形式で期待します。 input_プレフィックスを使用して、自動生成されたインクリメンタルフィールドIDを使用する必要があります。 IDは、フィールドを編集するときに表示されます。

 {
  「入力_1」：「マリアン?ケニー」、
  "input_2"： "[電子メール保護]"、
  "input_3"： "1922-03-11"、
  "input_4"： ""、
  "input_5_1"： "1"
}

データの送信

Inputsの名前屬性に期待されるキーを使用すると、多くの作業(yè)を節(jié)約できます。それ以外の場合は、入力名をキーにマッピングする必要があります。

すべてをまとめると、連絡(luò)先フォーム7のためにこのようなHTML構(gòu)造を取得します。

重力形態(tài)の場合、アクションと名前の屬性を切り替える必要があります。

必要なすべての情報はHTMLで利用可能であるため、リクエストを送信する準(zhǔn)備が整いました。これを行う1つの方法は、FormDataをフェッチと組み合わせて使用??することです。

 const formsubmissionhandler =（event）=> {
  event.preventdefault（）;

  const formelement = event.target、
    {action、method} = formelement、
    body = new formdata（formelement）;

  fetch（action、{
    方法、
    體
  }）
    .then（（respons）=> respons.json（））
    .then（（respons）=> {
      //送信が無効かどうかを判斷します
      if（isformsubmisionerror（response））{
        //検証エラーがあるときにケースを処理します
      }
      //幸せな道を処理します
    }）
    .catch（（error）=> {
      //リクエストに問題があるときにケースを処理します
    }）;
};

const formelement = document.queryselector（ "form"）;

formelement.addeventlistener（ "submit"、formsubmissionhandler）;

控えめに言っても、ユーザーエクスペリエンスは控えめですが、ほとんどの努力で送信を送信できます。フォームを正常に送信するために、ユーザーにできるだけ多くのガイダンスを提供しています。少なくとも、それは私たちがする必要があることを意味します：

• グローバルなエラーまたは成功メッセージを表示します。
• インラインフィールド検証エラーメッセージと可能な方向を追加し、
• 特別なクラスで注意を必要とする部品に注意を向けます。

フィールド検証

組み込みのHTMLフォーム検証を使用することに加えて、JavaScriptを使用して追加のクライアント側(cè)の検証を使用したり、サーバー側(cè)の検証を活用したりできます。

サーバー側(cè)の検証に関しては、連絡(luò)先フォーム7と重力フォームの両方が箱から出して、応答の一部として検証エラーメッセージを返します。 WordPress管理者からの検証ルールを制御できるため、これは便利です。

條件付きフィールド検証などのより複雑な検証ルールの場合、プラグインの設(shè)定と同期してフロントエンドJavaScriptの検証を維持することはメンテナンスの問題になる可能性があるため、サーバー側(cè)にのみ依存することは理にかなっています。

サーバー側(cè)の検証のみを使用する場合、タスクは、応答を解析し、関連するデータを抽出し、要素の挿入やクラス名のトグルなどのDOM操作が抽出されます。

応答メッセージ

連絡(luò)先フォーム7の検証エラーがある場合の応答

{
  "の中へ"： "＃"、
  「ステータス」：「validation_failed」、
  「メッセージ」：「1つ以上のフィールドにエラーがあります。チェックしてもう一度やり直してください?！?  「posit_data_hash」： ""
  「Invalid_fields」：[
    {
      "into"： "span.wpcf7-form-control-rap.somebodys-name"、
      「メッセージ」：「フィールドが必要です?！埂?      「idref」：null、
      「error_id」： "-ve-somebodys-name"
    }、
    {
      "into"： "span.wpcf7-form-control-rap.any-email"、
      「メッセージ」：「フィールドが必要です?！?、
      「idref」：null、
      「error_id」： "-ve-Any-Email"
    }、
    {
      "into"： "span.wpcf7-form-control-rap.before-space-age"、
      「メッセージ」：「フィールドが必要です?！?、
      「idref」：null、
      「error_id」： "-ve-be-be-bey-age"
    }、
    {
      "into"： "span.wpcf7-form-control-rap.fake-terms"、
      「メッセージ」：「メッセージを送信する前に條件を受け入れる必要があります。」
      「idref」：null、
      「error_id」： "-ve-fake-terms"
    }
  ]
}

提出が成功すると、応答は次のようになります。

 {
  "の中へ"： "＃"、
  「ステータス」：「Mail_Sent」、
  「メッセージ」：「メッセージありがとうございます。送信されました?！埂?  "posit_data_hash"： "d52f9f9de995287195409fe6dcde0c50"
}

これと比較して、Gravity Formsの検証エラー応答はよりコンパクトになります。

 {
  「is_valid」：false、
  「validation_messages」：{
    「1」：「このフィールドが必要です?！?、
    「2」：「このフィールドが必要です?！埂?    「3」：「このフィールドが必要です?！?、
    「5」：「このフィールドが必要です。」
  }、
  「page_number」：1、
  "source_page_number"：1
}

しかし、提出の成功に対する応答はより大きくなります。

 {
  「is_valid」：本當(dāng)、
  "page_number"：0、
  "source_page_number"：1、
  "cundimation_message"： "<div id="'gform_confirmation_wrapper_1'" class="'gform_confirmation_wrapper'"> <div class="'gform_confirmation_message_1" g form_confirmation>まもなく。</div> </div> "、
  「CONDIMATION_TYPE」：「メッセージ」
}

どちらも必要な情報が含まれていますが、共通の條約には従わず、どちらも癖があります。たとえば、重力形式の確認(rèn)メッセージにはHTMLが含まれており、検証メッセージキーにはinput_プレフィックスがありません。これは、リクエストを送信するときに必要なプレフィックスです。一方、連絡(luò)先フォーム7の検証エラーには、フロントエンドの実裝にのみ関連する情報が含まれています。フィールドキーはすぐに使用できません。それらを抽出する必要があります。

このような狀況では、私たちが得る回答を使用する代わりに、望ましい理想的な形式を考え出すことをお勧めします。それができたら、元の応答を適切と思われるものに変える方法を見つけることができます。 2つのシナリオの中で最高のシナリオを組み合わせて、ユースケースの無関係な部分を削除すると、次のようなものになります。

 {
  「Issuccess」：False、
  「メッセージ」：「1つ以上のフィールドにエラーがあります。チェックしてもう一度やり直してください?！?  「ValidationError」：{
    「moneyss-name」：「このフィールドが必要です?！?、
    「Any-Email」：「このフィールドが必要です?！?、
    「入力_3」：「このフィールドが必要です?！?、
    「入力_5」：「このフィールドが必要です?！?  }
}

提出が成功すると、IssuccessをTrueに設(shè)定し、空の検証エラーオブジェクトを返します。

 {
  「Issuccess」：本當(dāng)、
  「メッセージ」：「私たちに連絡(luò)してくれてありがとう！まもなくあなたと連絡(luò)を取ります?！?  「ValidationError」：{}
}

今、それは私たちが必要とするものに得たものを変えることの問題です。連絡(luò)先フォームを正規(guī)化するコード7応答は次のとおりです。

 const remormizecontactform7response =（response）=> {
  //他の可能なステータスは異なる種類のエラーです
  const issuccess = response.status === 'mail_sent';
  //すべてのステータスに対してメッセージが提供されます
  const message = response.message;
  const validationError = insuccess
    ？ {}
    ：//オブジェクトの配列をオブジェクトに変換します
    Object.fromentries（
      Response.invalid_fields.map（（error）=> {
        //「CF7-FORM-CONTROL-RAP」の後に部品を抽出します
        const key = /cf7 [--az ]* .(.*)/.exec(error.into) [1];

        return [key、error.message];
      }）
    ）;

  戻る {
    Issuccess、
    メッセージ、
    validationError、
  };
};

重力を正規(guī)化するためのコードは応答を形成します。これは次のとおりです。

 const remarizegravityformsResponse =（response）=> {
  //応答のブール値としてすでに提供されています
  const issuccess = response.is_valid;
  const message = issuccess
    ？ // htmlに包まれていますが、おそらくそれは必要ありません
      spriphtml（respons.confirmation_message）
    ：//一般的なエラーメッセージはないので、フォールバックを設(shè)定します
      「あなたの提出に問題がありました?！?
  const validationError = insuccess
    ？ {}
    ：//キーをプレフィックスバージョンに置き換えます。
      //この方法で、リクエストと応答が一致します
      Object.fromentries（
        Object.entries（
            Response.Validation_Messages
        ）.map（（[key、value]）=> [`input _ $ {key}`、value]））
      ）;

  戻る {
    Issuccess、
    メッセージ、
    validationError、
  };
};

検証エラー、成功メッセージ、およびクラスの切り替えを表示する方法はまだありません。ただし、必要なデータにアクセスするためのきちんとした方法があり、軽い抽象化で応答のすべての矛盾を削除しました。まとめると、既存のコードベースにドロップする準(zhǔn)備ができているか、その上に構(gòu)築を続けることができます。

殘りの部分に取り組む方法はたくさんあります。理にかなっているものはプロジェクトに依存します。主に狀態(tài)の変化に反応しなければならない狀況では、宣言的でリアクティブなライブラリが大いに役立ちます。 Alpine.JSはCSS-Tricksでここで取り上げられており、デモンストレーションと生産サイトでの使用の両方に最適です。変更がほとんどなく、前の例からコードを再利用できます。適切な指令を追加し、適切な場所に追加する必要があります。

まとめます

WordPressフォームプラグインが提供するフロントエンドエクスペリエンスを一致させることは、簡単な、不適切なフォームのために、そしてプロジェクトから再利用可能な方法で比較的簡単に行うことができます。フロントエンドに影響を與えずにプラグインを切り替えることができる方法でそれを達成することさえできます。

確かに、マルチページのフォーム、アップロードされた畫像のプレビュー、または通常プラグインに焼き付けられる他の高度な機能を作成するには時間と労力がかかりますが、私たちが満たす必要がある要件をより獨特であるほど、特定の問題を解決しようとすることはありません。

WordPressをヘッドレスCMSとして使用して、フォームプラグインのREST APIにアクセスして送信エンドポイントを押すと、より広く使用されているプラ??クティスになります。それは探求し、心に留めておく価値があるものです。將來的には、主にこのような頭のないコンテキストで動作するように設(shè)計されたWordPressフォームプラグインを見ても驚かないでしょう。フロントエンドレンダリングがコアの不可欠な部分ではないアドオン機能であるプラグインを想像できます。それがもたらすものであり、それが商業(yè)的に成功する可能性がある場合、どのような結(jié)果は探求されるべきですが、進化するのに魅力的な空間です。

以上がWordPress REST APIを使用したヘッドレスフォームの提出の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。