AI要約
複数ページフォームの「次へ」ボタンと「前へ」ボタンをカスタマイズしますか？フォームのボタンをカスタマイズすることは、サイトに個性とスタイルを追加するための素晴らしい方法です。
このチュートリアルでは、複数ページフォームの「前へ」および「次へ」ボタンのスタイルをカスタマイズする方法について説明します。
注意：コードを使用せずにフォームをスタイリングしたい場合は、フォームスタイリングチュートリアルをご覧ください。
開始する前に、WPFormsがサイトにインストールされ、有効化されていること、およびライセンスが検証済みであることを確認してください。次に、複数ページフォームを作成して、「前へ」および「次へ」ボタンを追加します。
注意：複数ページフォームを実際に確認し、すぐに開始するには、事前に構築されたBlue Badge Application Form Templateを独自のフォームの基盤として使用できます。その後、このチュートリアルで説明するカスタマイズを適用して、「前へ」および「次へ」ボタンをスタイリングできます。
「前へ」および「次へ」ボタンのスタイリング
CSSは、WPFormsの「前へ」および「次へ」ボタン、およびフォームのその他の側面をカスタマイズするための信じられないほどの柔軟性を提供します。
CSSが初めての方や復習したい方は、まずCSS入門ガイドから始めるのが最適です。
WPFormsの「前へ」および「次へ」ボタンのデフォルトのCSSと、各CSS行が何をするかを説明するコメントを以下に示します。
div.wpforms-container-full .wpforms-form .wpforms-page-button {
background-color: #eee; /* Grey background */
border: 1px solid #ddd; /* Dark grey border */
color: #333; /* Black text color */
font-size: 1em; /* Size of text */
padding: 10px 15px; /* Distance between text and border */
}
これらの各値を変更して、ボタンをさまざまな方法でスタイリングできます。例として、まずボタンの背景色をオレンジ色に、テキストを白色に変更します。
まず、使用したい色の16進数コードを見つける必要があります。htmlcolorcodes.comとAdobe Color CCは、色の選択に役立つ便利な無料ツールです。
使用したい色の16進数コードを入手したら、CSSに追加できます。
div.wpforms-container-full .wpforms-form .wpforms-page-button {
background-color: #e27730 !important; /* Orange background */
color: #fff !important; /* White text */
}
注意：サイトにCSSを追加する際に、カスタムスタイルが正常に適用されるように、セミコロンの前に!importantを含める必要がある場合があります。詳細については、CSSのトラブルシューティングガイドをご覧ください。
次に、このCSSをサイトに追加する必要があります。これを行う最も簡単な方法は、WordPressのCSSエディターを使用することです。これを行うには、外観 » カスタマイズに移動し、追加CSSを選択します。
追加CSSセクションを開いたら、新しいCSSを追加できます。次に、公開ボタンをクリックすると、すべて完了です！
例のCSSを適用した後のボタンの外観は次のようになります。
注意：新しく追加したCSSがサイトに表示されない場合は、この問題のトラブルシューティングに関するチュートリアルをご覧ください。
ホバー（マウスオーバー）スタイルのカスタマイズ
CSSを使用すると、ユーザーがボタンの上にカーソルを合わせたときに完全に異なるスタイルを適用することもできます。この変更は、ボタンがクリック可能であることをユーザーに知らせるため、ユーザーエクスペリエンスの向上に役立ちます。
以下は、WPFormsのボタンホバースタイルのデフォルトのCSSです。コメントに記載されているように、背景色が少し暗くなり、境界線の色が少し明るくなります。
div.wpforms-container-full .wpforms-form .wpforms-page-button:hover, div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
background-color: #ddd; /* Darker grey background */
border: 1px solid #ccc; /* Lighter grey border */
}
ホバーされていない状態のボタンに適用されるCSSよりも、はるかに少ないCSSであることがわかるでしょう。これは、指示がない限り、CSSはホバーされたボタンに以前のすべてのスタイルを適用するためです。
たとえば、デフォルトのスタイルをそのままにしておくと、ユーザーがボタンにカーソルを合わせたときにテキストの色は黒のままになります。これは、ボタンのテキストの色は通常黒であり、ホバー時に変更するように指示していないためです。
前のカスタムCSSの例と同様に、これらの値のいずれかを変更して、ボタンのホバー状態のスタイルを変更できます。この例では、ホバー時にボタンの背景をより暗いオレンジ色にします。
div.wpforms-container-full .wpforms-form .wpforms-page-button:hover, div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
background-color: #cd631d !important; /* Darker orange background */
}
適用されたCSSを持つボタンは次のようになります。
CSSの例
基本をカバーしたので、前のボタンと次のボタンの完全なカスタムCSSの例を見てみましょう。
注意:以下のコードは、WPFormsでサイトに作成されたすべてのマルチページフォームの前のボタンと次のボタンを変更します。
前のボタンと次のボタンを1つのフォームのみでスタイル設定したい場合は、そのフォームの一意のIDを見つける必要があります。詳細については、CSSで連絡フォームをスタイル設定する方法の完全なガイドを参照してください。
ホバー時のスタイル変更を含む、この例に追加するCSSは次のとおりです。
/* New button styles */
div.wpforms-container-full .wpforms-form .wpforms-page-button {
background-color: #003B6D !important; /* Dark blue background */
border: 2px solid #BDBDBD !important; /* Gray border */
color: #fff !important; /* White text */
font-size: 1em !important; /* Increase text size */
font-weight: bold !important; /* Bold text */
padding: 16px !important; /* Increase distance between text and border */
width: 25% !important; /* Make the button quarter-width */
}
/* New button hover styles */
div.wpforms-container-full .wpforms-form .wpforms-page-button:hover, div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
background-color: #BDBDBD !important; /* Gray background */
border: 2px solid #003B6D !important; /* Dark blue border */
}
このCSSを適用したカスタマイズされたボタンは次のようになります。
そして、ホバー時のボタンは次のようになります。変更点は背景色と境界線の色のみであることを忘れないでください。
これで完了です！カスタムCSSを使用して、前のボタンと次のボタンをカスタマイズできるようになりました。
フォームにさらにカスタムスタイルを追加したいですか？個々のフォームフィールドをカスタマイズする方法のチュートリアルをご覧ください。