AI要約
サイトのデザインや個性に合わせるために送信ボタンをカスタマイズしますか？フォームの送信ボタンは、送信率において重要な役割を果たすことができます。
このガイドでは、フォームの送信ボタンのテキストとスタイルをカスタマイズする方法について説明します。
送信ボタンのテキストを変更する
フォームボタンの「送信」テキストを変更するには、フォームビルダーを 設定 » 一般 に開きます。ここでは、送信ボタンのテキストを設定するための2つのフィールドが表示されます。
- 送信ボタンのテキスト：このボタンがまだクリックされていないときに表示されるテキスト
- 送信ボタン処理中のテキスト：ユーザーがこのボタンをクリックした後、確認がユーザーに表示される前に表示されるテキスト
必要に応じて送信ボタンのテキストを変更できます。変更に満足したら、フォームを保存してください。
送信ボタンのスタイル設定
CSS は、送信ボタンだけでなく、フォームの他のすべての側面をカスタマイズするための信じられないほどの柔軟性を提供します。
CSSが初めての方や復習したい方は、まずCSS入門ガイドから始めるのが最適です。
WPFormsの送信ボタンのデフォルトCSSと、各CSS行が何をするかを説明するコメントを以下に示します。
.wpforms-form input[type=submit],
.wpforms-form button[type=submit] {
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を作成できます。
.wpforms-form input[type=submit],
.wpforms-form button[type=submit] {
background-color: #FAF243 !important; /* Yellow background */
}
次に、このCSSをサイトに追加する必要があります。これを行う最も簡単な方法は、WordPressのCSSエディターを使用することです。これを開くには、外観 » カスタマイズに移動し、追加CSSを選択します。
追加CSSセクションを開いたら、新しいCSSを貼り付けます。次に、保存して公開ボタンをクリックすると、すべて完了です！
以下は、このCSSが適用された場合のボタンの外観です。
ホバー（マウスオーバー）スタイルのカスタマイズ
CSSを使用すると、カーソルがボタンの上にホバーしたときに完全に異なるスタイルを適用できます。このスタイルの変更は、ユーザーがこのオブジェクトをクリック可能であることを認識できるため、ユーザーエクスペリエンスに役立ちます。
以下は、ボタンがホバーされたときのWPFormsのデフォルトのCSSです。コメントで指摘されているように、背景色が少し暗くなり、境界線の色が少し明るくなります。
.wpforms-form input[type=submit]:hover,
.wpforms-form input[type=submit]:active,
.wpforms-form button[type=submit]:hover,
.wpforms-form button[type=submit]:active,
.wpforms-form .wpforms-page-button:hover,
.wpforms-form .wpforms-page-button:active {
background-color: #ddd; /* Darker grey background */
border: 1px solid #ccc; /* Lighter grey border */
}
これは、ホバーされていないときのボタンのCSSよりもはるかに少ないことに気づくかもしれません。これは、CSSが、指示されない限り、以前のすべてのCSSをホバーされたボタンに適用するためです。
たとえば、デフォルトのスタイルを残した場合、ボタンがホバーされたときにテキストの色は黒のままになります。これは、ボタンのテキストの色は通常黒であり、ホバー時に変更するように指示していないためです。
前のカスタムCSSの例と同様に、これらの値のいずれかを変更して、ボタンのホバースタイルを異なる方法でスタイル設定できます。この例では、ホバーされたときにボタンに少し暗い黄色の背景を与えます。
.wpforms-form input[type=submit]:hover,
.wpforms-form input[type=submit]:active,
.wpforms-form button[type=submit]:hover,
.wpforms-form button[type=submit]:active,
.wpforms-form .wpforms-page-button:hover,
.wpforms-form .wpforms-page-button:active {
background-color: #e5da00 !important; /* Darker yellow background */
}
CSSが適用されたボタンは次のようになります。
フォーカススタイルのカスタマイズ
CSSでボタンのホバースタイルを設定できるのと同じように、フォーカススタイルも設定できます。フォーカススタイルは、ボタンがページ上のイベントの焦点であるときに適用されます。たとえば、タブキーを使用してページをナビゲートする場合などです。
フォーカススタイルを使用すると、ユーザーエクスペリエンスが向上し、特にキーボードナビゲーションに依存してWebを閲覧するユーザーに役立ちます。
以下は、ボタンがフォーカスされているときのWPFormsのデフォルトのCSSです。
.wpforms-form input[type=submit]:focus,
.wpforms-form button[type=submit]:focus,
.wpforms-form .wpforms-page-button:focus {
background-color: #ddd;
border: 1px solid #ccc;
cursor: pointer;
}
この場合、background-colorはデフォルトよりもわずかに暗い色調であり、境界線も微妙に変更されています。これにより、ユーザーはボタンがフォーカスされており、関連するキープレスを受け取ることを認識できます。
この例では、フォーカススタイルをホバースタイルとは異なるものにするために、黄色以外の色を使用します。
.wpforms-form input[type=submit]:focus,
.wpforms-form button[type=submit]:focus,
.wpforms-form .wpforms-page-button:focus {
background-color: #80ccf6 !important;
}
このカスタムCSSが適用されると、フォーカスされているときのボタンは次のようになります。
CSSの例
基本をカバーしたので、送信ボタンのカスタムCSSの完全な例を見てみましょう。
この例に追加するCSSは次のとおりです。ホバーとフォーカスの両方のスタイル変更が含まれています。
/* New button styles */
.wpforms-form input[type=submit],
.wpforms-form button[type=submit] {
padding: 15px !important; /* Increase distance between text and border */
width: 100% !important; /* Make the button full-width */
font-size: 1.5em !important; /* Increase text size */
background-color: #af0000 !important; /* Red background */
color: #fff !important; /* White text */
border: 8px double #860b0b !important; /* Dark red, double-line border */
}
/* New button hover styles */
.wpforms-form input[type=submit]:hover,
.wpforms-form input[type=submit]:active,
.wpforms-form button[type=submit]:hover,
.wpforms-form button[type=submit]:active,
.wpforms-form .wpforms-page-button:hover,
.wpforms-form .wpforms-page-button:active {
background-color: #860b0b !important; /* Dark red background */
border: 8px double #af0000 !important; /* Red, double-line border */
}
/* New button focus styles */
.wpforms-form input[type=submit]:focus,
.wpforms-form button[type=submit]:focus,
.wpforms-form .wpforms-page-button:focus {
background-color: red !important; /* Dark red background */
border: 8px double #860b0b !important; /* Red, double-line border */
}
以下は、このCSSが適用された場合のボタンの外観です。
ホバー時：
フォーカス時。変更は背景色と境界線の色のみであることを忘れないでください。
よくある質問
これらは、WPFormsの送信ボタンのカスタマイズに関するいくつかのトップの質問への回答です。
ボタンの位置を変更して中央に表示することはできますか？
デフォルトでは、WPFormsの送信ボタンはページの左側に配置されます。ただし、カスタムCSSを使用してボタンを中央に配置できます。これを行うには、次のコードスニペットをサイトに追加します。
div.wpforms-container-full .wpforms-form button[type=submit] {
margin: 0 auto !important;
display: block !important;
}
上記のCSSコードは、サイト上のすべてのフォームにスタイルを適用します。特定のフォームにスタイルを適用したい場合は、#wpforms-submit-FORM-ID CSSセレクターを使用する必要があります。以下にサンプルスニペットを示します。
#wpforms-submit-FORM-ID {
margin: 0 auto !important;
display: block !important;
}
フロントエンドでは、ボタンはこのようになります。
ボタンを全幅表示したい場合は、width: 100% CSSプロパティを使用します。以下は、上記スニペットの更新版です。
div.wpforms-container-full .wpforms-form button[type=submit] {
margin: 0 auto !important;
display: block !important;
width: 100% !important;
}
全幅ボタン表示。
Elementor BuilderでWPFormsの送信ボタンをカスタマイズできますか？
はい。WPFormsはElementorと統合されており、Elementor Builder内で直接フォームのスタイルを設定できます。フォームフィールド、ラベル、色、送信ボタンをカスタマイズできます。
Elementorでフォームをカスタマイズする方法については、ElementorページにWPFormsを追加するガイドをご覧ください。
フォームの送信ボタンを非表示にするにはどうすればよいですか？
送信ボタンを非表示にすることは、サイトで計算機を作成するために計算アドオンを使用している場合に特に役立ちます。フォームの送信ボタンを非表示にするには、カスタムCSSスニペットをサイトに追加する必要があります。コードスニペットは、WPFormsコードスニペットライブラリで利用できます。
このスニペットをサイトにインポートする方法の詳細については、送信ボタンを非表示にするガイドをご覧ください。
これで、カスタムCSSを使用して送信ボタンをカスタマイズできます。
さらに例をご覧になりたいですか？サイトにコピー＆ペーストできる送信ボタンCSSのチュートリアルをご覧ください。