How to Locate Form ID and Field ID

WPFormsでカスタムコードスニペットやCSSを使用する場合、特定のフォームIDやフィールドIDを見つける必要があることがよくあります。これらのIDは、カスタマイズしたい正確なフォームまたはフィールドをターゲットにするのに役立ちます。

このガイドでは、これらのIDを見つけるための最も簡単な方法を紹介します。

フォームIDの見つけ方

フォームIDをすばやく見つける最も簡単な方法は、フォームの概要ページです。このページにアクセスするには、WPForms » すべてのフォームに移動し、ショートコード列を探します。フォームIDはショートコード内の番号です。

たとえば、下のスクリーンショットはショートコード[wpforms id="1233"]を示しています。このフォームのIDは1233になります。

特定のフィールドIDを見つけるには、フォームビルダーでフォームを編集します。次に、特定したいフィールドをクリックし、左側のフィールドオプションパネルを確認します。フィールドIDは、一般タブの上部に表示されます。

たとえば、「一行テキスト（ID #15）」と表示されている場合、フィールドIDは15です。

ドキュメントにコードスニペットが表示されている場合は、例のIDを実際のIDに置き換える必要があります。正しく使用する方法は次のとおりです。

フォームIDの場合、YOUR-FORM-IDを実際のフォーム番号に置き換えます。たとえば、フォームIDが561の場合は、wpforms-YOUR-FORM-IDをwpforms-561に変更します。
フィールドIDの場合、YOUR-FIELD-IDを実際のフィールド番号に置き換えます。たとえば、フィールドIDが13の場合は、field_YOUR-FIELD-IDをfield_13に変更します。

したがって、フォームIDが999でフィールドIDが4の場合は、次のように変更します。

jQuery('#wpforms-123-field_13')

〜に:

jQuery('#wpforms-999-field_4')

注意: コードで使用する前に、必ずIDを確認してください。間違ったIDを使用すると、カスタマイズが期待どおりに機能しません。

これらのIDは、多くのカスタマイズに不可欠です。

たとえば、送信ボタンの色をカスタマイズする場合、特定のフォームIDを使用することで、変更が意図したフォームにのみ影響することを保証できます。

/* Customize submit button color for specific forms */
#wpforms-form-561 .wpforms-submit {
    background-color: red;
}

これで、フォームIDとフィールドIDを見つけて使用するために必要なすべてが揃いました！

次に、フォームのカスタマイズについてさらに詳しく知りたいですか？フォームのカスタムCSSスタイルの追加に関するガイドをご覧ください。フォームのカスタムCSSスタイルの追加。