### [フォームの全フィールドをリセットするクリアボタンの追加](https://wpforms.com/developers/adding-a-clear-button-to-reset-all-fields-in-your-form/) **公開日:** 2025年6月3日 **著者:** Umair Majeed **コンテンツ:** デフォルトでは、WPFormsには組み込みのリセットボタンが用意されていません。ユーザーが各フィールドを手動でリセットするのではなく、一度にすべての入力フィールドをクリアする方法を提供したい場合は、JavaScriptとCSSを使用してカスタムの「クリア」ボタンを追加できます。 このチュートリアルでは、チェックボックスやラジオボタンを含むすべてのフィールドタイプで機能する、フォーム全体のリセットボタンの実装方法を説明します。 **注意:** このチュートリアルでは、PHPとJavaScriptの両方を追加します。サイトへのスニペットの追加に問題がある場合は、[WPFormsのカスタムコードの追加に関するガイド](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/)を確認してください。 フォームを作成し、必要なフィールドを追加したら、次のコードスニペットを追加します。 このコードスニペットは、フォームの下に「クリア」ボタンを追加します。クリックすると、すべての入力がデフォルトの状態にリセットされます。 ### クリアボタンのスタイリング ボタンがテーマと一致するように、次のCSSを適用できます。 ``` #wpforms-form-10 .custom-clear-button { background-color: #4CAF50; /* 緑色の背景 */ color: #ffffff; /* 白色のテキスト */ padding: 10px 20px; /* パディング */ border: none; /* ボーダーなし */ border-radius: 3px; /* 角丸 */ cursor: pointer; /* ホバー時のポインターカーソル */ font-size: 16px; /* フォントサイズ */ font-weight: bold; /* 太字テキスト */ text-transform: uppercase; /* 大文字テキスト */ transition: background-color 0.3s ease, transform 0.2s ease; /* スムーズなトランジション */ } #wpforms-form-10 .custom-clear-button:hover { background-color: #286b2b; /* ホバー時に濃い緑色 */ } ``` ## スニペットのカスタマイズ JavaScriptとCSSのスニペットの両方で、フォームIDを更新する必要があります。 - 次の場所で `10` を独自の**フォームID**に置き換えます。 - **3行目:** document.getElementById(‘wpforms-form-10’) - wpforms-form-2927 .custom-clear-button フォームIDとフィールドIDを見つけるには、[このチュートリアル](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/)を確認してください。 これで、WPFormsフォームに完全に機能するクリアボタンが追加されました。 **カテゴリ:** チュートリアル、フィールド ---