<html lang="ja-jp" dir="ltr"><head></head><body>### [フォームIDとフィールドIDの場所の見つけ方](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/)

**公開日:** 2019年10月9日
**著者:** Umair Majeed

**抜粋:** このチュートリアルでは、フォームをさらにカスタマイズするために使用する可能性のある特定の操作、フィルター、およびCSSに必要なフォームIDとフィールドIDを見つける方法を説明します。

**コンテンツ:**

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

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

## フォームIDの見つけ方

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

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

![フォームIDの見つけ方](https://wpforms.com/wp-content/uploads/2024/11/form-id-wpforms-1024x626.png)## フィールドIDの見つけ方

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

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

![フィールドIDの見つけ方](https://wpforms.com/wp-content/uploads/2024/11/finding-field-ID-1024x499.png)## これらのIDの使用方法

ドキュメントでコードスニペットを表示する場合、例の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は、特定のフォームにCSSを適用する場合、カスタム検証を追加する場合、またはフォーム固有の機能を作成する場合に必要です。
- フィールドIDは、特定のフィールドのスタイルを設定する場合、カスタム検証ルールを追加する場合、またはフィールド固有の計算を作成する場合に必要です。

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

```

/* 特定のフォームの送信ボタンの色をカスタマイズ */
#wpforms-form-561 .wpforms-submit {
    background-color: red;
}
```

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

次に、フォームのカスタマイズについてさらに詳しく知りたいですか？[フォームにカスタムCSSスタイルを追加する方法](https://wpforms.com/docs/how-to-add-custom-css-to-your-wpforms/) ガイドをご覧ください。

**カテゴリー:** 入門

---</body></html>