SWELLサイトの問い合わせフォームを整える｜WPFormsのボタン色・サイズ変更方法

SWELLで作ったサイトに問い合わせフォームを設置するとき、WPFormsを使う方は多いと思います。

WPFormsは直感的にフォームを作れる便利なプラグインですが、初期状態のままだと、送信ボタンの色やサイズがサイトの雰囲気に合わないことがあります。

たとえば、サイト全体は落ち着いた色味で整えているのに、送信ボタンだけ青色のままだと、そこだけ少し浮いて見えてしまいます。

また、ボタンが小さいままだと「ここから送信できますよ」という案内が弱く見えてしまうこともあります。

問い合わせフォームは、訪問者が最後に行動する大切な場所なので、見た目もできるだけ整えておきたいところです。

そこでこの記事では、SWELLサイトに設置したWPFormsの送信ボタンの色やサイズを変更し、フォーム全体を見やすく整えるCSSを紹介します。

今回紹介するCSSでは、送信ボタンの色を変えるだけでなく、以下のような調整も行います。

CSSを追加するだけで、WPFormsの見た目はかなり整えられます。

「フォームだけデフォルト感が出てしまう」「送信ボタンをサイトの色に合わせたい」という方は、ぜひ参考にしてみてください。

今回CSSで整える箇所

今回の記事では、WPFormsの見た目をCSSで整えていきます。

大きく変更するのは、以下の4つです。

まず、PC表示では「お名前」「電話番号」「メールアドレス」などの項目名を左側に置き、入力欄を右側に配置します。

初期状態のように縦に並べるフォームも悪くありませんが、横並びにすると、フォーム全体がすっきり見えます。

次に、お問い合わせ内容を入力するテキストエリアの高さを調整します。

相談内容や希望日時を書いてもらう欄が小さいと、少し入力しにくく感じることがあります。あらかじめ高さを出しておくことで、長めの文章も書きやすくなります。

そして、一番大きく印象が変わるのが送信ボタンです。

今回は、送信ボタンの色をサイトに合う色へ変更し、サイズも少し大きめにします。角丸や影も加えることで、ただのボタンではなく、ページ全体に馴染むCTAボタンに整えていきます。

最後に、スマホ表示も調整します。

PCでは横幅を固定したボタンでも問題ありませんが、スマホでは横幅いっぱいにした方が押しやすくなります。

また、PCで項目名と入力欄を横並びにした場合、そのままだとスマホでは入力欄が狭く見えることがあります。

そのため、スマホでは項目名の下に入力欄が来るように、縦並びへ切り替えます。

PCとスマホで見せ方を変えることで、見た目だけでなく使いやすさも整えられます。

CSSを追加する場所

WPFormsの見た目を変更するCSSは、WordPressの管理画面から追加できます。

一番分かりやすいのは、外観 ＞ カスタマイズ ＞ 追加CSS に入れる方法です。

管理画面から、以下の順番で進みます。

この場所に追加すると、サイト全体にCSSが反映されます。

WPFormsの項目を横並びにするCSS

まずは、フォームの項目名と入力欄を横並びにしていきます。

初期状態では、項目名の下に入力欄が表示されることが多いですが、PC表示では少し間延びして見えることがあります。

そこで今回は、項目名を左側、入力欄を右側に配置します。

追加するCSSはこちらです。

追加したCSS

/* 各項目を「左ラベル・右入力欄」にする */
div.wpforms-container-full .wpforms-form .wpforms-field {
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: center;
  gap: 24px;
  padding: 22px 0 !important;
  border-bottom: 1px dashed #d5e0d6;
}

このCSSでは、display: grid; を使って、フォームの各項目を横並びにしています。

grid-template-columns: 220px 1fr;

この部分で、左側の項目名の幅を220px、右側の入力欄を残り幅いっぱいにしています。

つまり、左側のラベル部分は固定幅にして、入力欄は画面幅に合わせて自然に広がるようにしているイメージです。

また、以下の部分では、項目同士の間に余白と区切り線を入れています。

padding: 22px 0 !important;
border-bottom: 1px dashed #d5e0d6;

フォームは項目が続くと少し見づらくなりやすいので、余白と薄い区切り線を入れるだけでも、かなり読みやすくなります。

なお、左側の幅を変えたい場合は、220px の数字を調整すればOKです。

サイトのデザインやフォームの幅に合わせて、見やすい数字に調整してみてください。

テキストエリアの高さを調整するCSS

次に、テキストエリアの高さを調整します。

テキストエリアとは、問い合わせ内容や相談内容など、長めの文章を入力してもらう欄のことです。

たとえば、今回のフォームでいうと「髪のお悩み・希望日時」のような入力欄ですね。

初期状態のテキストエリアが小さいと、入力する内容が少し窮屈に見えてしまいます。特に、相談内容や希望日時を書いてもらうフォームでは、最初から少し高さを出しておくと入力しやすくなります。

追加するCSSはこちらです。

追加したCSS

/* テキストエリアは少し高さを出す */
div.wpforms-container-full .wpforms-form textarea {
  min-height: 240px;
}

このCSSでは、テキストエリアの最小の高さを240pxにしています。

この数字を大きくすると入力欄は高くなり、小さくすると低くなります。

とはいえ、高くしすぎるとフォーム全体が長くなってしまいます。

まずは200px〜240px前後を目安にすると、見た目と入力しやすさのバランスが取りやすいです。

ちなみに、細かく指定しなくても良い場合は、WPForms側の設定でも調整することができます。

送信ボタンの位置を中央にするCSS

次に、送信ボタンの位置を中央に整えます。

WPFormsの送信ボタンは、初期状態だと左寄せで表示されることがあります。

もちろん左寄せでも使えますが、フォームの最後にあるボタンなので、中央に配置した方が見た目のバランスが取りやすくなります。

追加するCSSはこちらです。

/* 送信ボタンエリア */
div.wpforms-container-full .wpforms-form .wpforms-submit-container {
  text-align: center;
  padding-top: 28px !important;
}

このCSSでは、送信ボタンが入っているエリアに対して、中央寄せの指定をしています。

text-align: center;

この部分で、ボタンを中央に配置しています。

また、以下の部分では、ボタンの上に少し余白を作っています。

padding-top: 28px !important;

入力欄のすぐ下にボタンがあると、少し窮屈に見えることがあります。

ボタン上に余白を入れることで、フォーム全体にゆとりが出て、押しやすい印象になります。

サイトの余白感に合わせて調整してみてください。

WPFormsの送信ボタンをおしゃれに整えるCSS

次に、送信ボタンのデザインを整えていきます。

ここが変わると、フォーム全体の印象もかなり変わります。

初期状態のボタンは少しシンプルなので、サイトの雰囲気に合わせて色・サイズ・角丸・影を調整していきましょう。

追加するCSSはこちらです。

追加したCSS

/* 送信ボタン本体 */
div.wpforms-container-full .wpforms-form button[type="submit"],
div.wpforms-container-full .wpforms-form button.wpforms-submit {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 340px !important;
  height: 64px !important;
  padding: 0 40px !important;
  border: none !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #d99588 0%, #c98274 100%) !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(201, 130, 116, 0.28) !important;
  transition: all 0.25s ease !important;
}

このCSSでは、送信ボタンを少し大きめにして、やわらかい印象のボタンに整えています。

色は以下の部分で指定しています。

background: linear-gradient(180deg, #d99588 0%, #c98274 100%) !important;

単色ではなく、少しだけグラデーションを入れることで、のっぺりした印象を避けています。

ボタンの横幅は、以下の部分です。

min-width: 340px !important;

この数字を大きくすると横幅が広くなり、小さくするとコンパクトになります。

高さは、以下の部分で指定しています。

height: 64px !important;

高さをしっかり出すことで、フォームの最後にあるボタンとして目立ちやすくなります。

また、角丸は以下の部分です。

border-radius: 999px !important;

999px にしておくと、横長の丸いボタンになります。
やわらかい雰囲気のサイトや、サロン系のサイトにも馴染みやすい形です。

影は以下の部分で入れています。

box-shadow: 0 10px 24px rgba(201, 130, 116, 0.28) !important;

影を少し入れることで、ボタンに立体感が出ます。
ただし、影を強くしすぎると少し派手に見えるので、ふんわり入れるくらいがおすすめです。

ボタンの色を自分のサイトに合わせたい場合は、以下のカラーコードの箇所を変更してください。

#d99588
#c98274

たとえば、メインカラーがグリーン系なら、グリーン系のカラーコードに変えるとサイト全体に馴染みやすくなります。

スマホでは送信ボタンを横幅いっぱいにする

最後に、スマホ表示の送信ボタンを調整します。

PCでは、ボタンの横幅を少し広めに固定すると上品に見えます。
ただ、スマホでは画面幅が狭いので、固定幅のままだとボタンがはみ出したり、少し窮屈に見えたりすることがあります。

そこで、スマホでは送信ボタンを横幅いっぱいにします。

追加するCSSはこちらです。

追加したCSS

@media screen and (max-width: 768px) {
  div.wpforms-container-full .wpforms-form button.wpforms-submit {
    width: 100% !important;
    min-width: 0 !important;
    height: 58px !important;
    font-size: 16px !important;
    padding: 0 24px !important;
  }

  div.wpforms-container-full .wpforms-form button.wpforms-submit::after {
    right: 22px;
    font-size: 22px;
  }
}

このCSSでは、画面幅が768px以下になったときだけ、スマホ用のデザインに切り替えています。

@media screen and (max-width: 768px)

この部分は、「画面幅が768px以下のときにだけ適用する」という意味です。

送信ボタンを横幅いっぱいにしているのは、以下の部分です。

width: 100% !important;

スマホでは、横幅いっぱいのボタンにした方が指で押しやすくなります。

また、PC用のCSSでは min-width: 340px; を指定していましたが、スマホではそのままだと幅が合わない場合があります。

そこで、スマホ用CSSでは以下のように指定しています。

min-width: 0 !important;

これで、PC用の最小幅を解除して、スマホの画面幅に合わせやすくしています。

高さは少しだけ小さめにして、スマホでも見やすいバランスにしています。

height: 58px !important;

PCより少し低めですが、タップしやすさはしっかり確保できます。

なお、保存時にエラーが出る場合は、button[type="submit"] を使わず、今回のように button.wpforms-submit に絞って指定すると保存できることがあります。

スマホ用のCSSは、他のWPFormsカスタマイズCSSの一番下に追加しておくと反映されやすいです。

スマホでは入力欄を横並びにする

PCでは、項目名と入力欄を横並びにすると見た目がすっきりします。

ただし、スマホでも横並びのままだと、入力欄が狭くなったり、テキストエリアが細長く表示されたりすることがあります。

そこで、スマホ表示では横並びを解除して、項目名の下に入力欄が来る形にします。

追加するCSSはこちらです。

追加したCSS

@media screen and (max-width: 768px) {
  div.wpforms-container-full .wpforms-form .wpforms-field {
    display: block !important;
    padding: 18px 0 !important;
  }

  div.wpforms-container-full .wpforms-form .wpforms-field-label {
    display: block !important;
    margin-bottom: 10px !important;
  }

  div.wpforms-container-full .wpforms-form input,
  div.wpforms-container-full .wpforms-form select,
  div.wpforms-container-full .wpforms-form textarea {
    width: 100% !important;
    max-width: 100% !important;
  }

  div.wpforms-container-full .wpforms-form textarea {
    min-height: 200px !important;
  }
}

このCSSを追加すると、PCでは横並びのまま、スマホでは縦並びに切り替わります。

特にテキストエリアは、スマホで横並びのままだと細長く表示されやすいです。

相談内容を書いてもらう欄は入力しやすさが大事なので、スマホでは縦並びにしておくのがおすすめです。

このCSSは、他のWPFormsカスタマイズCSSの一番下に追加してください。

PC用の横並びCSSより後ろに書くことで、スマホ表示のときに上書きされやすくなります。

今回使ったCSS

ここまで紹介したCSSをまとめると、以下のようになります。

個別に追加しても問題ありませんが、まとめて使いたい場合は、以下のCSSをそのまま貼り付けてもOKです。

すでに同じようなWPForms用CSSを追加している場合は、重複しないように不要な部分を削除してくださいね。

/* 各項目を「左ラベル・右入力欄」にする */
div.wpforms-container-full .wpforms-form .wpforms-field {
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: center;
  gap: 24px;
  padding: 22px 0 !important;
  border-bottom: 1px dashed #d5e0d6;
}

/* テキストエリアは少し高さを出す */
div.wpforms-container-full .wpforms-form textarea {
  min-height: 240px;
}

/* 送信ボタンエリア */
div.wpforms-container-full .wpforms-form .wpforms-submit-container {
  text-align: center;
  padding-top: 28px !important;
}

/* 送信ボタン本体 */
div.wpforms-container-full .wpforms-form button[type="submit"],
div.wpforms-container-full .wpforms-form button.wpforms-submit {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 340px !important;
  height: 64px !important;
  padding: 0 40px !important;
  border: none !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #d99588 0%, #c98274 100%) !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(201, 130, 116, 0.28) !important;
  transition: all 0.25s ease !important;
}

@media screen and (max-width: 768px) {
  div.wpforms-container-full .wpforms-form button.wpforms-submit {
    width: 100% !important;
    min-width: 0 !important;
    height: 58px !important;
    font-size: 16px !important;
    padding: 0 24px !important;
  }

  div.wpforms-container-full .wpforms-form button.wpforms-submit::after {
    right: 22px;
    font-size: 22px;
  }
}

@media screen and (max-width: 768px) {
  div.wpforms-container-full .wpforms-form .wpforms-field {
    display: block !important;
    padding: 18px 0 !important;
  }

  div.wpforms-container-full .wpforms-form .wpforms-field-label {
    display: block !important;
    margin-bottom: 10px !important;
  }

  div.wpforms-container-full .wpforms-form input,
  div.wpforms-container-full .wpforms-form select,
  div.wpforms-container-full .wpforms-form textarea {
    width: 100% !important;
    max-width: 100% !important;
  }

  div.wpforms-container-full .wpforms-form textarea {
    min-height: 200px !important;
  }
}

まとめ

今回は、SWELLサイトに設置したWPFormsの見た目を、CSSで整える方法を紹介しました。

WPFormsはそのままでも使いやすいフォームプラグインですが、初期状態のままだと、送信ボタンの色やサイズがサイトの雰囲気に合わないことがあります。

特に、サイト全体を落ち着いた色味で作っている場合、送信ボタンだけ青色のままだと少し浮いて見えやすいです。

今回のCSSでは、以下のような調整を行いました。

フォームは、訪問者が実際に問い合わせをする大切な場所です。

ページ全体のデザインを整えていても、フォームだけデフォルト感が残っていると、少しもったいない印象になってしまいます。

送信ボタンの色やサイズを変えるだけでも、問い合わせページの印象はかなり変わります。

さらに、入力欄の並びやスマホ表示まで整えることで、見た目だけでなく使いやすさもアップします。

CSSだけでも、WPFormsのデザインはかなり調整できます。

「フォームだけ浮いて見える…」
「送信ボタンをサイトの雰囲気に合わせたい」

という方は、ぜひ今回のカスタマイズを試してみてください。