WPForms Submit Button: Best Practices for Higher Conversions

送信ボタンは、フォームデザインにおいて最も見過ごされがちな要素の1つです。フォームの最下部に配置される小さな部分ですが、フォーム全体の見た目に大きな影響を与えることができます。

コンバージョンを増やすためにさまざまな種類のリードフォームを数多くテストした結果、うまく作成された送信ボタンが訪問者の目を引く上で大きな違いを生むことができると断言できます。

この記事では、リードフォームのコンバージョン最適化の経験に基づいたヒントとベストプラクティスをいくつかご紹介します。早速見ていきましょう。

WPFormsにおける基本的な送信ボタンのスタイリングのヒント
送信ボタンの高度なスタイリングテクニック
送信ボタンのテキストの最適化のヒント

WPFormsにおける基本的な送信ボタンのスタイリングのヒント

WPFormsでは、フォームの送信ボタンをさまざまな方法でスタイル設定できます。私はWordPressのブロックエディターにあるフォームスタイルオプションを使用することをお勧めします。これは、フォームのほぼすべてのコンポーネントをカスタマイズする最も簡単な方法です。

ボタンのスタイルカスタマイズは、WPFormsのすべてのバージョンで利用可能です。しかし、既製のフォームテーマや、フォームの背景とコンテナの設定など、幅広いスタイルオプションをアンロックするには、WPForms Proの使用をお勧めします。

ブロックエディター内のフォームオプションの右側パネルに、送信ボタンのスタイルの設定があります。

これらの設定により、コードなしで送信ボタンのサイズ、境界線、色を制御できます。

注意

ボタンの設定は、チェックボックス、複数選択、NPS、数値スライダーなどの他のフィールドのクリック可能な要素にも影響します。したがって、これらの設定のいずれかを編集すると、変更は送信ボタンだけでなく、これらの設定に関連付けられている他のすべてのフィールドタイプにも適用されます。

送信ボタンのサイズ

WPFormsには、ボタンサイズの3つのプリセット（小、中、大）があります。

デザインの観点からは、3つのオプションすべてが完全に有効です。ここでボタンのサイズを選択しても、ベストプラクティスに違反することはありません。

ここでより重要なのは、デザインの一貫性です。たとえば、フィールドサイズを小さく、ボタンを大きくすると、フォームが一部で少し不釣り合いに見える可能性があります。

最適なバランスを得るには、フォーム内のすべての要素でサイズを統一するようにしてください。

ブロックエディターを使用したフォームスタイリングに関するガイドでは、各フォームコンポーネントのさまざまなカスタマイズオプションを詳しく説明しています。これらのさまざまな側面が組み合わさって、完璧なフォームデザインが作成されます。

プロのヒント

さまざまなデバイスでボタンサイズをテストし、それらがすべてのデバイスでタップ可能、クリック可能、アクセス可能であることを確認してください。

境界線の種類

境界線の種類は完全にスタイルの選択です。お気づきの通り、クリーンでミニマルなスタイルにするために、境界線のないデザインがますます一般的になっています。

ただし、WPFormsでは、あまり一般的ではない境界線の種類を使用するオプションもあります。

実線境界線は非常に人気があり、フォームにプロフェッショナルで洗練された外観を与えます。
破線または点線の境界線はあまり一般的ではありませんが、遊び心のある創造性を加えることができます。ウェブサイトのテーマがよりカジュアルな場合は使用してください。ただし、使いすぎには注意してください。
境界線のないデザインは、洗練されてモダンであり、ミニマリズムを強調したり、ボタンを背景にシームレスに統合したりするためによく使用されます。境界線なしにする場合は、ボタンと周囲の要素を区別するために十分なコントラストまたは影があることを確認してください。

プロのヒント

デザインの一貫性を保つために、ボタンの境界線のスタイルをフォームの他の要素と一致させてください。

境界線のサイズ

境界線のサイズも調整できます。ボタンのサイズを引き立てる境界線の太さを持つことは良い習慣です。小さなボタンサイズを使用する場合は、3〜4pxの細い境界線で補完するようにしています。私の経験では、これが最も視覚的にバランスの取れた外観を作成します。

大きなボタンには、4〜6pxの境界線の幅がより適しています。従うべき良いルールは、ボタンのデザインを圧倒することなく構造を追加する控えめな境界線を使用することです。

境界線の半径

WPFormsの境界線半径設定により、ボタンの丸みを完全に制御できます。より丸いボタンは、モダンなスタイルのテーマでうまく機能します。

実際、いくつかの研究では、丸いボタンとコンバージョン率の高さとの相関関係が見つかっています。コンバージョン率の最適化を行っている場合は、丸いボタンを試す価値があります。

今日の多くのモダンなサイトで使用されているカプセルスタイルのボタンの外観を実現するために、約15〜20pxの境界線半径サイズを使用できます。

フォーマルな雰囲気にこだわりたい場合は、境界線半径を0pxに保ち、ボタンを四角い形状に保つことができます。

重要なのは、ボタンの曲率とウェブサイト全体のデザインテーマとのバランスを取ることです。

丸みを帯びた形状は、控えめに使用するとより効果的であるという理論があります。このようにすると、サイトの他の部分で一般的に使用される幾何学的な形状から際立つ可能性が高くなります。

プロのヒント

より目立つボタンには、極端な境界線の形状（例：完全な円形）を試してください。ただし、テーマのコンテキストに合っていることを確認してください。

ボタンの背景色

WPFormsでは、カラーピッカーでボタンの背景色を簡単に選択できます。この色はボタンの視認性に影響するため、色の選択は重要です。

すべてのデバイスでボタンを快適に見えるように、フォームの背景と対照的な背景色を選択してください。

ブランディングも色の選択に役割を果たします。ウェブデザインがブランドカラーパレットに基づいている場合は、一般的にブランドのテーマカラーに近い色を選択するのが良いアイデアです。

いずれにしても、ユーザーの注意を不必要にそらす可能性のある、明るすぎる色やぶつかり合う色は避けるようにしてください。

境界線の色

境界線は送信ボタンのほんの一部にすぎません。しかし、フォームの視覚的な魅力を高めるためにアクセントカラーを追加するのに最適な場所です。

境界線は、ボタンの背景色と nicely 対照的である場合に最も魅力的です。これにより、デザインに個性が加わるだけでなく、ボタンの視認性も向上します。

境界線自体にあまり注意を引かないように、控えめな色調を使用することをお勧めします。目標は、派手なボタンの境界線で気を散らすことを増やすのではなく、ボタンを強調することです。

ボタンの文字色

ボタンのテキストの色に関しては、単一の目標を持つべきです。それは、可読性を優先することです。ボタンのテキストを読みやすくする最も簡単な方法は、ボタンの背景と強く対照的なテキストカラーを使用することです。

従うべき一般的な良い規則は、暗いボタンの背景には白いテキストを、明るい背景の色合いには黒または濃い灰色のテキストを使用することです。

送信ボタンの他のコンポーネントでは、大胆で鮮やかな色を使用しても問題ありませんが、可読性を維持するためには、テキストの色については標準的なニュートラルカラーからあまりかけ離れないようにするのが最善です。

送信ボタンの高度なスタイリングテクニック

WPFormsでは、ボタンの基本的なスタイリングにコードを使用する必要はありません。ただし、グラデーションカラーのような高度な効果には、簡単なCSSを使用する必要があります。

これは言うよりもはるかに簡単です。まず、サイトにWPCodeプラグインがインストールされている必要があります。これにより、送信ボタンのスタイルの変更のためにコードスニペットを簡単に挿入できます。

WPCodeをインストールする

WordPressダッシュボードを開き、プラグイン » 新規追加に移動します。

プラグインの追加画面で、検索ボックスを使用してWPCodeを検索します。次に、今すぐインストールボタンを押して、プラグインをサイトに追加します。

「今すぐインストール」ボタンは、インストールが完了すると「有効化」に変わります。有効化ボタンを押すと、WPCodeを使用してサイトにコードスニペットを追加する準備が整います。

その後、WordPressダッシュボードのサイドパネルにあるコードスニペットにカーソルを合わせ、メニューが展開されたら+ スニペットを追加をクリックします。

次に、「カスタムコードを追加（新規スニペット）」の下にあるスニペットを使用をクリックします。

次に、スニペットの種類を選択する必要があります。スタイルの調整には、CSSカスタムスニペットを追加します。したがって、利用可能なオプションからCSSスニペットを選択してください。

次に、コードエディタウィンドウにコードスニペットをコピー＆ペーストして、フォームのスタイルを変更します。送信ボタンのスタイリングを変更するために使用できる一般的なCSSコードの例を共有します。

送信ボタンにグラデーションカラーを追加する

カラーグラデーションは非常に目を引き、通常は非常にプロフェッショナルなフォームデザインを示します。これは、グラデーションカラーのボタンでプロフェッショナリズムと細部へのこだわりを伝えたい場合に最適です。

送信ボタンの色に線形グラデーションを追加するために使用できるスニペットのコードは次のとおりです。

#wpforms-8 .wpforms-submit {
  background: linear-gradient(45deg, #066aab, #0f88d4); /* Gradient colors */
}

このコードでは、「#wpforms-8」は特定のフォームのフォームIDを参照しています。私が編集しているフォームのIDは8です。フォームIDが異なる場合、たとえば17の場合は、このコード（つまり「#wpforms-17」）に正しい番号を追加できます。

フォームのフォームIDは、特定のフォームのショートコードに記載されている番号を見ることで見つけることができます。これは、フォームの概要画面のフォームのショートコード列に記載されています。

このコードの2番目のカスタマイズ可能な部分は、linear-gradientの値を設定することです。カンマで区切られた括弧内のこれらの3つの値は次のとおりです。

グラデーションの角度
最初の色の16進数コード
2番目の色の16進数コード

これらの値は必要に応じて変更できます。必要な色の正確な16進数コードを見つけるには、このHTMLカラージェネレーターを使用できます。

カスタマイズしたCSSスニペットの作成が完了したら、スニペットを保存ボタンと隣のトグルボタンをクリックして、スニペットを保存し有効にします。

これで、フォームの送信ボタンにグラデーションカラーが適用されます。

送信ボタンにホバーエフェクトを追加する

デフォルトでは、WPFormsは送信ボタンにホバーエフェクトを追加して、それがインタラクティブであることを示し、クリックしようとしている訪問者に即座に視覚的なフィードバックを提供します。

しかし、グラデーションを使用する場合にホバーエフェクトを追加したい場合は、このコードを使用できます。

#wpforms-8 .wpforms-submit {
  background: linear-gradient(45deg, #066aab, #0f88d4); /* Gradient colors */
  transition: background 0.3s ease; /* Smooth transition on hover */
}

#wpforms-8 .wpforms-submit:hover {
  background: linear-gradient(45deg, #0f88d4, #066aab); /* Changes gradient on hover */
}

このコードには、ボタンとのインタラクションが洗練されたものになるように、トランジションエフェクトも含まれています。一般的に、0.3秒〜0.4秒のトランジションエフェクトは最もスムーズな効果を提供します。

単色ボタンのデフォルトのホバーエフェクトを変更したいだけであれば、ブロックエディターのWPFormsフォームスタイル設定を使用して、希望する基本背景色を設定できます。

次に、この簡略化されたコードを使用して、希望する色の16進数コードを追加することで、ホバー時の色を変更できます。

#wpforms-8 .wpforms-submit:hover {
  background: #0f88d4; /* Solid color on hover */
  transition: background 0.3s ease; /* Smooth transition */
}

スニペットを保存をクリックしてアクティブ化し、フォーム送信ボタンにホバーエフェクトを適用してください。

よりユニークなホバーエフェクトを探している場合は、このコードを使用してパルスエフェクトを適用できます。

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(15, 136, 212, 0.4);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(15, 136, 212, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(15, 136, 212, 0);
  }
}

#wpforms-8 .wpforms-submit:hover {
  animation: pulse 1.5s infinite;
}