【WPForms】メールアドレスと確認欄をスマホで縦並びにするカスタマイズ方法

WordPress で問い合わせフォームを作るときに便利なプラグインといえば WPForms。
ドラッグ＆ドロップで簡単にフォームを作成できるので、初心者から上級者まで幅広く使われています。
特に「メールアドレス確認欄」を設置すると、入力ミスを防ぐことができて便利ですが、デフォルトでは PC・スマホ問わず横並び表示になってしまいます。
横並びのままでは、スマホで見たときに入力欄が狭くなり、ユーザーが入力しづらくなるのが難点です。

そこで今回は、スマホ閲覧時のみ「メール欄」と「確認用メール欄」を縦並びにする方法を紹介します。

WPFormsの仕様：メール確認欄はデフォルトで横並び

WPForms で「メールアドレス」フィールドを追加すると、自動的に「メールアドレス（確認）」の入力欄も横並びで表示されます。

PCでの表示

スマホ

下記のように横並びになるため、入力しても途中から隠れてしまいますね。

このとき、HTML 構造は以下のようになっています。

<div class="wpforms-field-row wpforms-field-medium">
  <div class="wpforms-field-row-block wpforms-one-half wpforms-first">
    <input type="email" class="wpforms-field-email-primary" name="wpforms[fields][8][primary]" />
  </div>
  <div class="wpforms-field-row-block wpforms-one-half">
    <input type="email" class="wpforms-field-email-secondary" name="wpforms[fields][8][secondary]" />
  </div>
</div>

.wpforms-field-row-block が 横並び（50%幅） で配置される仕組みになっているため、PCでは見やすいのですが、スマホだと入力欄が小さく感じられてしまいます。

スマホ時に縦並びにするCSS

以下のコードを 外観 ＞ カスタマイズ ＞ 追加CSS に追加してください。

/* スマホ時にメール欄と確認欄を縦並び＆100%幅にする */
@media (max-width: 1000px){
  .wpforms-field-email .wpforms-field-row {
    display: block !important;
  }

  .wpforms-field-email .wpforms-field-row .wpforms-field-row-block {
    width: 100% !important;
    float: none !important;
    margin: 0 0 10px 0 !important;
  }

  /* input自体の幅も100%に揃える */
  .wpforms-field-email input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* 不要な余白を調整 */
  .wpforms-container .wpforms-field .wpforms-field-row .wpforms-field-row-block {
    padding: 0;
  }
}

実際の見た目

スマホ表示でもメール欄と確認欄が上下に並び、幅100%で入力しやすくなります！

これで、ユーザーがスマホからアクセスしたときもストレスなく入力できるようになります。

まとめ

• WPForms のメール確認欄はデフォルトで横並び
• スマホでは入力しづらいため、CSSで縦並びにするのがおすすめ
• @media クエリを使えば、PC表示はそのままにスマホだけ最適化できる

フォームは「ユーザーがいかにスムーズに入力できるか」が最重要ポイント。
ちょっとした調整でコンバージョン率が上がることもあります。ぜひ取り入れてみてください！