ページ分割ボタンのカスタマイズ方法

はじめに

WPFormsに ページ区切り ボタンのカスタマイズでユニークなタッチを加えたいですか？もう探す必要はありません！このチュートリアルでは、CSSを使用してボタンの外観をパーソナライズするプロセスを説明します。さまざまなCSSスニペットを使用すると、より的を絞った視覚的に魅力的なフォームに必要な外観を簡単に実現できます。

マルチページフォームの作成

まず、マルチページフォームを作成しましょう。プロセスが不明でガイダンスが必要な場合は、マルチページフォームの作成に関するこの便利なドキュメントを参照してください。

今日のチュートリアルでは、ブログ投稿のアイデアを収集するためのフォームの構築に焦点を当てています。

「戻る」を表示するを有効にする

ページ区切り ボタンを追加したら、これらの各区切りで 「戻る」を表示する オプションを有効にすることを忘れないでください。これにより、訪問者はフォームを最終決定する前に戻って確認し、編集することができます。

フォームの 次へ および 前へ ボタンを使用する場合、デフォルトではこれらのボタンは同じ行に表示されます。

しかし、それらを中央揃えにしたり、より大きなボタンにしたりしたい場合はどうでしょうか？ここでCSSが登場します！

ボタンを中央揃えにする

それでは、フォームの 次へ および 前へ ボタンを中央揃えにするためにCSSを追加しましょう。

サイトにCSSを追加する場所や方法がわからない場合は、このチュートリアルを確認してください。

form#wpforms-form-605 .wpforms-pagebreak-left {
text-align: center;
}

このCSSは、フォームID 605にのみ適用されます。このフォームIDを自分のIDに合わせて更新する必要があります。フォームIDを見つける方法がわからない場合は、このガイドを確認してください。

このようなCSSを すべての フォームに適用したい場合は、代わりにこのCSSを使用します。

.wpforms-pagebreak-left {
text-align: center !important;
}

より大きなボタンを作成する

このセクションでは、ボタンを大きくすると同時に、上記のCSSを使用してボタンを中央揃えに保ちます。

form#wpforms-form-605 .wpforms-pagebreak-left {
text-align: center;
}

form#wpforms-form-605 .wpforms-page-next {
width: 48% ;
float: right ;
margin: 0px ;
}

form#wpforms-form-605 .wpforms-page-prev {
margin-right: 0px ;
width: 48% ;
float: left ;
margin: 0 ;
padding: 0 ;
}

この変更をすべてのフォームに適用するには、代わりにこのCSSを使用してください。

.wpforms-pagebreak-left {
text-align: center !important;
}

.wpforms-page-next {
width: 48% !important;
float: right !important;
margin: 0px !important;
}

.wpforms-page-prev {
margin-right: 0px !important;
width: 48% !important;
float: left !important;
margin: 0 !important;
padding: 0 !important;
}

最後のボタンを揃える

マルチページフォームと 前へ ボタンを使用すると、フォームの最後のページに、最後の 前へ ボタンが送信ボタンの上に表示されます。このチュートリアルでは、これらのボタンを同じ行に揃えたいと考えています。

したがって、これまで使用したすべてのCSSを使用して、これらをまとめましょう。

form#wpforms-form-605 .wpforms-page-next {
width: 48% ;
float: right ;
margin: 0px ;
}

form#wpforms-form-605 .wpforms-page-prev {
margin-right: 0px ;
width: 48% ;
float: left ;
margin: 0 ;
padding: 0 ;
}

form#wpforms-form-605 .wpforms-submit-container {
float: right ;
width: 48% ;
margin: 0 ;
padding: 0 ;
clear: none ;
}

form#wpforms-form-605 .wpforms-submit-container button {
width: 100%;
}

form#wpforms-form-605 .wpforms-page.last .wpforms-field-pagebreak {
float: left;
display: block;
width: 48%;
padding: 0;
}

form#wpforms-form-605 .wpforms-page.last .wpforms-pagebreak-left {
width: 100%;
}

form#wpforms-form-605 .wpforms-page.last .wpforms-page-prev {
width: 100%;
}

そして、上記の他のCSSと同様に、これをすべてのフォームに適用したい場合は、このCSSを使用します。

.wpforms-page-next {
width: 48% !important;
float: right !important;
margin: 0px !important;
}

.wpforms-page-prev {
margin-right: 0px !important;
width: 48% !important;
float: left !important;
margin: 0 !important;
padding: 0 !important;
}

.wpforms-submit-container {
float: right !important;
width: 48% !important;
margin: 0 !important;
padding: 0 !important;
clear: none !important;
}

.wpforms-submit-container button {
width: 100% !important;
}

.wpforms-page.last .wpforms-field-pagebreak {
float: left !important;
display: block !important;
width: 48% !important;
padding: 0 !important;
}

.wpforms-page.last .wpforms-pagebreak-left {
width: 100% !important;
}

.wpforms-page.last .wpforms-page-prev {
width: 100% !important;
}

これで、マルチページボタンのルックアンドフィールをカスタマイズするために必要なすべてが揃いました。フォームの質問に基づいて自動的に次のページに移動することもしたいですか？自動的に次のページに移動する方法に関するチュートリアルをご覧ください。