フォームの全フィールドをリセットするクリアボタンを追加する

デフォルトでは、WPFormsには組み込みのリセットボタンが含まれていません。各フィールドを手動でリセットする代わりに、すべての入力フィールドを一度にクリアする方法をユーザーに提供したい場合は、JavaScriptとCSSを使用してカスタム「クリア」ボタンを追加できます。

このチュートリアルでは、チェックボックスやラジオボタンを含むすべてのフィールドタイプで動作する、フォーム全体のリセットボタンを実装する方法を紹介します。

注意: このチュートリアルではPHPとJavaScriptの両方を追加します。あなたのサイトにスニペットを追加する手助けが必要な場合は、WPFormsのカスタムコードを追加するガイドをご覧ください。

フォームを作成し、必要なフィールドを追加したら、以下のコード・スニペットを追加する。

このコード・スニペットは、フォームの下に「クリア」ボタンを追加します。クリックすると、すべての入力がデフォルトの状態にリセットされます。

クリアボタンのスタイリング

以下の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フォームにクリアボタンが追加されました。