デフォルトでは、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 .カスタムクリアボタン
フォームとフィールドのIDを見つけるには、こちらのチュートリアルをご覧ください。
これで完了です!これでWPFormsフォームにクリアボタンが追加されました。