この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
お問い合わせフォームやコメント欄、会員登録の画面など、フォームはブログのいろんな場所で登場します。
でも、ブラウザ標準のままだと、どうしても味気ない見た目になりがちですよね。
そこでこの記事では、CSSだけで作れるおしゃれなフォームのデザインを12種類、コピペで使える見本つきでまとめました。
入力欄・チェックボックス・プルダウンといった部品ごとのデザインから、お問い合わせフォーム全体の見本まで用意しています。
どれも実際の動きを確認できるので、気に入ったものを選んでそのまま使ってみてください。
コピペで使うときの準備
デザインを使うには、CSSとHTMLの2つを貼り付けます。
CSSは、外観 → カスタマイズ → 追加CSS に貼り付けると、サイト全体で使えるようになります。
HTMLのほうは、フォームを表示したい場所にカスタムHTMLブロックを追加して、そこに貼り付けてください。
各デザインのclass名はすべて別々にしてあるので、いくつも並べても見た目が崩れる心配はありません。
CSSの中に !important が付いている箇所がありますが、これはSANGOなど一部のテーマがもともと持っている入力欄・ボタンのスタイルを、確実に上書きするために入れています。
お使いのテーマや環境によっては、!important がなくてもデザインがそのまま反映されることが多いです。
まずは !important なしで貼ってみて、見た目が変わらないときだけ付け足す、という使い方でも大丈夫です。
なお、この記事のコードは見た目を整えるためのものです。
実際に送信内容を受け取るには、Contact Form 7などのフォームプラグインと組み合わせて使うのがおすすめです。
テキスト入力欄のデザイン4種
まずは、お名前やメールアドレスを入力する一行の入力欄からです。
1. 下線だけのシンプルな入力欄
枠線をなくして下線だけにした、すっきり見えるデザインです。
フォーカスすると下線がブランドカラーに変わるので、今どこを入力しているのかが分かりやすくなります。
.cw-input-underline {
width: 100%;
padding: 10px 4px;
font-size: 16px;
background: transparent !important;
border: none !important;
border-bottom: 2px solid #ccc !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: none;
transition: border-color 0.3s;
}
.cw-input-underline:focus {
border-bottom-color: #37a845 !important;
}<input type="text" class="cw-input-underline" placeholder="お名前を入力">2. フォーカスするとふんわり光る入力欄
角を丸くした標準的な入力欄に、フォーカス時のやわらかい影を足したデザインです。
影の色をブランドカラーの薄いものにすると、まとまりのある印象になります。
.cw-input-glow {
width: 100%;
padding: 12px 14px;
font-size: 16px;
background: #fff !important;
border: 1px solid #ccc !important;
border-radius: 8px !important;
box-shadow: none;
outline: none;
transition: border-color 0.3s, box-shadow 0.3s;
box-sizing: border-box;
}
.cw-input-glow:focus {
border-color: #37a845 !important;
box-shadow: 0 0 0 3px rgba(55, 168, 69, 0.2) !important;
}<input type="text" class="cw-input-glow" placeholder="メールアドレスを入力">3. ラベルがふわっと上がる入力欄
入力を始めると、中の文字が小さくなって上に移動するタイプです。
省スペースなのに何を入れる欄なのかが分かりやすく、最近よく見かけるデザインですね。
ポイントは、input側のプレースホルダーを半角スペース1つにしておくことです。
.cw-float {
position: relative;
}
.cw-float input {
width: 100%;
padding: 18px 14px 6px;
font-size: 16px;
background: #fff !important;
border: 1px solid #ccc !important;
border-radius: 8px !important;
box-shadow: none !important;
outline: none;
box-sizing: border-box;
transition: border-color 0.3s;
}
.cw-float label {
position: absolute;
left: 14px;
top: 15px;
color: #999;
font-size: 16px;
pointer-events: none;
transition: 0.2s;
}
.cw-float input:focus {
border-color: #37a845 !important;
}
.cw-float input:focus + label,
.cw-float input:not(:placeholder-shown) + label {
top: 5px;
font-size: 12px;
color: #37a845;
}<div class="cw-float">
<input type="text" id="cw-name" placeholder=" ">
<label for="cw-name">お名前</label>
</div>4. アイコン付きの入力欄
入力欄の左側に小さなアイコンを置いたデザインです。
メール欄・検索欄など、用途がひと目で伝わるのが便利なところです。
ここでは絵文字を使っていますが、Font Awesomeなどのアイコンに置き換えてもきれいに収まります。
.cw-icon-field {
position: relative;
}
.cw-icon-field .cw-ic {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 18px;
z-index: 1;
}
.cw-icon-field input {
width: 100%;
padding: 12px 14px 12px 42px;
font-size: 16px;
background: #fff !important;
border: 1px solid #ccc !important;
border-radius: 8px !important;
box-shadow: none !important;
outline: none;
box-sizing: border-box;
transition: border-color 0.3s;
}
.cw-icon-field input:focus {
border-color: #37a845 !important;
}<div class="cw-icon-field">
<span class="cw-ic">✉️</span>
<input type="email" placeholder="メールアドレス">
</div>チェックボックス・ラジオボタンのデザイン3種
標準のチェックボックスは、OSによって見た目がバラバラになりがちです。
CSSで作り直すと、どの環境でも同じデザインで表示できるようになります。
5. ブランドカラーのチェックボックス
チェックを入れると、四角がブランドカラーに変わってチェックマークが現れます。
利用規約への同意など、確認系の項目にちょうどいいデザインです。
.cw-check {
display: inline-flex;
align-items: center;
cursor: pointer;
font-size: 16px;
user-select: none;
}
.cw-check input {
display: none !important;
}
.cw-check .box {
width: 22px;
height: 22px;
border: 2px solid #ccc;
border-radius: 5px;
margin-right: 10px;
position: relative;
transition: 0.2s;
flex-shrink: 0;
}
.cw-check input:checked + .box {
background: #37a845;
border-color: #37a845;
}
.cw-check .box::after {
content: "";
position: absolute;
left: 7px;
top: 3px;
width: 5px;
height: 10px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg) scale(0);
transition: 0.2s;
}
.cw-check input:checked + .box::after {
transform: rotate(45deg) scale(1);
}<label class="cw-check">
<input type="checkbox">
<span class="box"></span>
利用規約に同意する
</label>6. トグルスイッチ
スマホの設定画面でおなじみの、左右に動くスイッチ型のチェックボックスです。
オンとオフがはっきり分かるので、通知の設定などに向いています。
.cw-toggle {
display: inline-flex;
align-items: center;
cursor: pointer;
user-select: none;
}
.cw-toggle input {
display: none !important;
}
.cw-toggle .track {
width: 48px;
height: 26px;
background: #ccc;
border-radius: 999px;
position: relative;
transition: 0.3s;
}
.cw-toggle .track::before {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
transition: 0.3s;
}
.cw-toggle input:checked + .track {
background: #37a845;
}
.cw-toggle input:checked + .track::before {
transform: translateX(22px);
}
.cw-toggle .txt {
margin-left: 10px;
font-size: 16px;
}<label class="cw-toggle">
<input type="checkbox" checked>
<span class="track"></span>
<span class="txt">お知らせを受け取る</span>
</label>7. カスタムラジオボタン
複数から1つだけ選ぶときに使うラジオボタンです。
選んだものの中心にブランドカラーの丸がふわっと現れるようにしています。
.cw-radio {
display: inline-flex;
align-items: center;
cursor: pointer;
margin-right: 18px;
font-size: 16px;
user-select: none;
}
.cw-radio input {
display: none !important;
}
.cw-radio .dot {
width: 22px;
height: 22px;
border: 2px solid #ccc;
border-radius: 50%;
margin-right: 8px;
position: relative;
transition: 0.2s;
flex-shrink: 0;
}
.cw-radio input:checked + .dot {
border-color: #37a845;
}
.cw-radio .dot::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 12px;
height: 12px;
background: #37a845;
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
transition: 0.2s;
}
.cw-radio input:checked + .dot::after {
transform: translate(-50%, -50%) scale(1);
}<label class="cw-radio">
<input type="radio" name="cw-plan" checked>
<span class="dot"></span>はい
</label><label class="cw-radio">
<input type="radio" name="cw-plan">
<span class="dot"></span>いいえ
</label>プルダウン・テキストエリアのデザイン2種
8. 矢印までおしゃれなプルダウン
標準の矢印を消して、CSSで作った三角の矢印に置き換えたプルダウンです。
矢印の色もブランドカラーにそろえられるので、フォーム全体がまとまって見えます。
.cw-select {
position: relative;
display: block;
width: 100%;
}
.cw-select select {
width: 100%;
padding: 12px 40px 12px 14px;
font-size: 16px;
background: #fff !important;
border: 1px solid #ccc !important;
border-radius: 8px !important;
box-shadow: none !important;
-webkit-appearance: none !important;
appearance: none !important;
outline: none;
cursor: pointer;
box-sizing: border-box;
transition: border-color 0.3s;
}
.cw-select select:focus {
border-color: #37a845 !important;
}
.cw-select::after {
content: "";
position: absolute;
right: 16px;
top: 50%;
width: 8px;
height: 8px;
border-right: 2px solid #37a845;
border-bottom: 2px solid #37a845;
transform: translateY(-70%) rotate(45deg);
pointer-events: none;
}<div class="cw-select">
<select>
<option>お問い合わせの種類を選ぶ</option>
<option>ご相談</option>
<option>お仕事の依頼</option>
<option>その他</option>
</select>
</div>9. リサイズしやすいテキストエリア
お問い合わせ内容など、長い文章を入力する欄です。
右下をドラッグして縦にだけ広げられるようにしてあるので、レイアウトが横に崩れません。
.cw-textarea {
width: 100%;
min-height: 120px;
padding: 12px 14px;
font-size: 16px;
background: #fff !important;
border: 1px solid #ccc !important;
border-radius: 8px !important;
box-shadow: none;
outline: none;
resize: vertical;
box-sizing: border-box;
font-family: inherit;
transition: border-color 0.3s, box-shadow 0.3s;
}
.cw-textarea:focus {
border-color: #37a845 !important;
box-shadow: 0 0 0 3px rgba(55, 168, 69, 0.2) !important;
}<textarea class="cw-textarea" placeholder="お問い合わせ内容をご記入ください"></textarea>お問い合わせフォーム全体のデザイン3種
ここまでの部品を組み合わせた、フォーム全体の見本を3つ紹介します。
Contact Form 7などのプラグインを使う場合は、生成されるHTMLに合わせてclass名を調整してください。
10. シンプルなお問い合わせフォーム
ラベル・入力欄・送信ボタンをまっすぐ並べた、基本のかたちです。
まず1つ用意するならこれ、という迷わない構成にしています。
.cw-form-simple label {
display: block;
margin-bottom: 6px;
font-weight: bold;
font-size: 15px;
}
.cw-form-simple input,
.cw-form-simple textarea {
width: 100%;
padding: 12px 14px;
margin-bottom: 20px;
font-size: 16px;
background: #fff !important;
border: 1px solid #ccc !important;
border-radius: 8px !important;
box-shadow: none !important;
outline: none;
box-sizing: border-box;
font-family: inherit;
transition: border-color 0.3s;
}
.cw-form-simple textarea {
min-height: 120px;
resize: vertical;
}
.cw-form-simple input:focus,
.cw-form-simple textarea:focus {
border-color: #37a845 !important;
}
.cw-form-simple button {
width: 100%;
padding: 14px;
font-size: 16px;
color: #fff !important;
background: #37a845 !important;
border: none !important;
border-radius: 8px !important;
box-shadow: none !important;
cursor: pointer;
transition: background 0.3s;
}
.cw-form-simple button:hover {
background: #2e8c3a !important;
}<form class="cw-form-simple">
<label>お名前</label>
<input type="text" placeholder="クローバー 太郎">
<label>メールアドレス</label>
<input type="email" placeholder="example@mail.com">
<label>お問い合わせ内容</label>
<textarea placeholder="ご記入ください"></textarea>
<button type="submit">送信する</button>
</form>11. カード型のお問い合わせフォーム
フォーム全体を白いカードに乗せて影をつけたデザインです。
背景色のあるページでも、フォームだけがふわっと浮き上がって見やすくなります。
.cw-form-card {
max-width: 440px;
margin: 0 auto;
padding: 32px 28px;
background: #fff;
border-radius: 14px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.cw-form-card h3 {
margin: 0 0 22px;
text-align: center;
font-size: 20px;
}
.cw-form-card input,
.cw-form-card textarea {
width: 100%;
padding: 12px 14px;
margin-bottom: 18px;
font-size: 16px;
background: #fff !important;
border: 1px solid #ddd !important;
border-radius: 8px !important;
box-shadow: none !important;
outline: none;
box-sizing: border-box;
font-family: inherit;
transition: border-color 0.3s, box-shadow 0.3s;
}
.cw-form-card textarea {
min-height: 110px;
resize: vertical;
}
.cw-form-card input:focus,
.cw-form-card textarea:focus {
border-color: #37a845 !important;
box-shadow: 0 0 0 3px rgba(55, 168, 69, 0.15) !important;
}
.cw-form-card button {
width: 100%;
padding: 14px;
font-size: 16px;
color: #fff !important;
background: #37a845 !important;
border: none !important;
border-radius: 999px !important;
box-shadow: none !important;
cursor: pointer;
transition: background 0.3s;
}
.cw-form-card button:hover {
background: #2e8c3a !important;
}<form class="cw-form-card">
<h3>お問い合わせ</h3>
<input type="text" placeholder="お名前">
<input type="email" placeholder="メールアドレス">
<textarea placeholder="お問い合わせ内容"></textarea>
<button type="submit">送信する</button>
</form>12. 左に縦線アクセントのフォーム
左端にブランドカラーの太い線を入れた、引き締まった印象のデザインです。
背景をほんのり緑にすると、ブログ全体のトーンともなじみます。
.cw-form-line {
padding: 26px 24px 26px 28px;
border-left: 5px solid #37a845;
background: #f6fbf6;
border-radius: 0 12px 12px 0;
}
.cw-form-line p.cw-lead {
margin: 0 0 20px;
font-weight: bold;
font-size: 17px;
}
.cw-form-line input,
.cw-form-line textarea {
width: 100%;
padding: 12px 14px;
margin-bottom: 16px;
font-size: 16px;
background: #fff !important;
border: 1px solid #ccc !important;
border-radius: 6px !important;
box-shadow: none !important;
outline: none;
box-sizing: border-box;
font-family: inherit;
transition: border-color 0.3s;
}
.cw-form-line textarea {
min-height: 110px;
resize: vertical;
}
.cw-form-line input:focus,
.cw-form-line textarea:focus {
border-color: #37a845 !important;
}
.cw-form-line button {
padding: 12px 28px;
font-size: 16px;
color: #fff !important;
background: #37a845 !important;
border: none !important;
border-radius: 6px !important;
box-shadow: none !important;
cursor: pointer;
transition: background 0.3s;
}
.cw-form-line button:hover {
background: #2e8c3a !important;
}<form class="cw-form-line">
<p class="cw-lead">お気軽にご連絡ください</p>
<input type="text" placeholder="お名前">
<input type="email" placeholder="メールアドレス">
<textarea placeholder="お問い合わせ内容"></textarea>
<button type="submit">送信する</button>
</form>まとめ
CSSだけで作れるフォームのデザインを12種類紹介しました。
入力欄・チェックボックス・プルダウンといった部品を少しずつ整えるだけでも、フォーム全体の印象はぐっと良くなります。
まずは気に入ったものを1つコピペして、自分のサイトで試してみてください。
送信ボタンのデザインをもっと増やしたいときは、CSSボタンデザインの記事もあわせてどうぞ。
