AI要約
サイトのデザインや個性に合わせるために送信ボタンをカスタマイズしますか？フォームの送信ボタンは、送信率において重要な役割を果たすことができます。
このガイドでは、フォームビルダーと独自のCSSの両方で、フォームの送信ボタンのテキストとスタイルをカスタマイズする方法を説明します。
送信ボタンのテキストを変更する
フォームボタンの「送信」テキストを変更するには、フォームビルダーを 設定 » 一般 に開きます。ここでは、送信ボタンのテキストを設定するための2つのフィールドが表示されます。
- 送信ボタンのテキスト：このボタンがまだクリックされていないときに表示されるテキスト
- 送信ボタン処理中のテキスト：ユーザーがこのボタンをクリックした後、確認がユーザーに表示される前に表示されるテキスト
必要に応じて送信ボタンのテキストを変更できます。変更に満足したら、フォームを保存してください。
フォームビルダーで送信ボタンのスタイルを設定する
送信ボタンのスタイルを最も速く変更するには、フォームビルダーを使用します。変更を加えながら確認できます。CSSは不要です。
フォームビルダーを開き、設定 » テーマに移動します。
次に、左側にあるボタンのスタイルセクションを探します。
- サイズ：ボタンの大きさを設定します。オプションには、小、中、大があります。
- 境界線：ボタンを実線、破線、または点線で囲みます。
- 境界線の太さ：境界線の太さを設定します。デフォルトの単位はピクセル（px）ですが、別の単位を選択することもできます。
- 角丸：ボタンの角を丸くして、より柔らかくまたはシャープな外観にします。ここでもデフォルトの単位はピクセル（px）です。
これらの下には、ボタンの3つの色のオプションがあります。色を変更するには、スウォッチをクリックしてカラーピッカーを開きます。視覚的に色を選択するか、正確な制御のために16進コードを入力できます。
- 背景：ボタンのラベルの背景色を設定します。
- 境界線：ボタンの境界線の色を設定します。これは、上記の境界線のスタイルを選択した場合にのみ適用されます。
- テキスト：ボタンのラベルの色を設定します。
テーマ設定から既製のカラーテーマを選択することもできます。これにより、フォームの他の部分と一緒にボタンも更新されます。詳細については、フォームテーマの使用に関するチュートリアルをご覧ください。
変更に満足したら、保存をクリックし、次にプレビューボタンを使用して、スタイルが適用されたフォームを表示します。
フォームビルダーは、ほとんどのサイトで必要な変更をカバーします。パディング、ボタンの配置、フル幅ボタン、または特定のフォントなどの細かい制御が必要な場合は、少量のCSSが必要になります。次にそれについて説明します。
CSSで送信ボタンのスタイルを設定する
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 */
color:#000 !important;
}
次に、このCSSをサイトに追加する必要があります。WordPressでは、使用しているテーマの種類に応じて、追加CSSパネルは次のいずれかの場所にあります。
- クラシックテーマ：外観 » カスタマイズに移動し、追加CSSを選択します。
- ブロックテーマ：ブロックテーマがアクティブな場合、WordPressはカスタムメニューを非表示にします。代わりにサイトエディターでCSSを追加します。外観 » エディターに移動し、スタイルを開いて追加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 Liteでも機能します。
正確な文字サイズや特定のパディング値が必要な場合は、CSSスニペットを追加する必要があります。以下に例を示します。
div.wpforms-container-full .wpforms-form button[type=submit] {
font-size: 18px !important; /* Text size */
padding: 14px 40px !important; /* Space inside the button */
}
ボタンの位置を変更して中央に表示することはできますか？
ボタンの配置はまだフォームビルダーでは利用できないため、これには小さなCSSスニペットが必要です。デフォルトでは、WPFormsの送信ボタンはページの左側に配置されます。ボタンを中央揃えするには、次のコードスニペットをサイトに追加してください。
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を追加するガイドをご覧ください。
Diviで送信ボタンをスタイル設定できますか？
はい、ただしDivi内ではなくWPFormsフォームビルダーでスタイル設定します。WPFormsモジュールにはフォームのスタイル設定コントロールが含まれていないため、その設定はサイズ設定や間隔設定など、Divi自体のオプションのみをカバーします。
フォームビルダーの設定 » テーマでボタンのスタイルを設定すると、Diviページ上のフォームに反映されます。これは、WPFormsモジュールまたはショートコードでフォームを埋め込む場合でも機能します。詳細については、DiviページにWPFormsを追加する方法ガイドをご覧ください。
フォームの送信ボタンを非表示にするにはどうすればよいですか？
送信ボタンを非表示にすることは、サイトで計算機を作成するために計算アドオンを使用している場合に特に役立ちます。フォームの送信ボタンを非表示にするには、カスタムCSSスニペットをサイトに追加する必要があります。コードスニペットは、WPFormsコードスニペットライブラリで利用できます。
このスニペットをサイトにインポートする方法の詳細については、送信ボタンを非表示にするガイドをご覧ください。
これで完了です！フォームビルダーまたは独自のCSSを使用して、フォームの送信ボタンをカスタマイズできるようになりました。
次に、残りのフォームも一致するようにスタイル設定しますか？フォームビルダーで利用可能なすべてのオプションを確認するには、フォームのスタイル設定の完全ガイドをご覧ください。