マルチページフォームの「前へ」「次へ」ボタンをカスタマイズしたいですか?フォームのボタンをカスタマイズすることで、サイトに個性とスタイルを加えることができます。
このチュートリアルでは、マルチページフォームの前ボタンと次ボタンのスタイルをカスタマイズする方法について説明します。
注: コードを使わずにフォームをスタイリングしたい場合は、フォーム・スタイリング・チュートリアルをご覧ください。
始める前に、WPFormsがあなたのサイトにインストールされ、有効になっていること、そしてライセンスが確認されていることを確認してください。次に、前と次のボタンを追加するための複数ページのフォームを作成します。
注意: 複数ページのフォームを実際に見て、すぐに使い始めるには、あらかじめ用意されているブルーバッジ申請フォームのテンプレートをフォームの土台として使うことができます。その後、このチュートリアルで説明するカスタマイズを適用して、前へボタンと次へボタンのスタイルを設定することができます。
前へ」と「次へ」ボタンのスタイリング
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 */
}
これらの値をそれぞれ変更することで、ボタンのスタイルを変えることができます。例として、まずボタンの背景色をオレンジに、テキストを白に変更してみましょう。
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を追加することができます。そして、Publishボタンをクリックすれば完了です！
例の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の例と同様に、これらの値のいずれかを変更して、ボタンのホバー・スタイルを変更することができます。この例では、ボタンがホバーされたときの背景を濃いオレンジ色にします。
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 を使ってサイトに作成されたすべてのマルチページフォームの「前へ」と「次へ」のボタンを変更します。
前へ] ボタンと [次へ] ボタンのスタイルを単一のフォームにのみ適用したい場合は、そのフォームの固有の 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を使って前ボタンと次ボタンをカスタマイズできるようになりました。
フォームにさらにカスタムスタイルを追加したいですか？個々のフォームフィールドをカスタマイズする方法についてのチュートリアルをご覧ください。