AI要約
デフォルトでは、WPFormsにはリセットボタンが組み込まれていません。ユーザーが各フィールドを手動でリセットするのではなく、一度にすべての入力フィールドをクリアする方法を提供したい場合は、JavaScriptとCSSを使用してカスタムの「クリア」ボタンを追加できます。
このチュートリアルでは、チェックボックスやラジオボタンを含むすべてのフィールドタイプで機能する、フォーム全体のリセットボタンを実装する方法を説明します。
フォームを作成し、必要なフィールドを追加したら、次のコードスニペットを追加します。
このコードスニペットは、フォームの下に「クリア」ボタンを追加します。クリックすると、すべての入力がデフォルトの状態にリセットされます。
クリアボタンのスタイリング
次のCSSを適用してボタンをスタイリングし、テーマと一貫性を持たせることができます。
#wpforms-form-10 .custom-clear-button {
background-color: #4CAF50; /* Green background */
color: #ffffff; /* White text */
padding: 10px 20px; /* Padding */
border: none; /* No border */
border-radius: 3px; /* Rounded corners */
cursor: pointer; /* Pointer cursor on hover */
font-size: 16px; /* Font size */
font-weight: bold; /* Bold text */
text-transform: uppercase; /* Uppercase text */
transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transitions */
}
#wpforms-form-10 .custom-clear-button:hover {
background-color: #286b2b; /* Darker green on hover */
}
スニペットのカスタマイズ
JavaScriptとCSSスニペットの両方でフォームIDを更新する必要があります。
10を、以下の箇所でご自身のフォームIDに置き換えてください:- 3行目: document.getElementById(‘wpforms-form-10’)
- wpforms-form-2927 .custom-clear-button
フォームとフィールドのIDを見つけるには、こちらのチュートリアルをご覧ください。
これで、WPFormsフォームに完全に機能するクリアボタンが追加されました！