【CSS】これからのメールフォームの為にテキスト入力をグラフィカルにしよう

ホームページを作る場合、一緒に作る事が多いメールフォーム
今でもお問い合わせフォームを作ることが多いと思います。
今まで普通に作ってきたメールフォームを見直して、より入力しやすくするメールフォームの形を考えてみましょう。

テキスト入力にかたまり感を持たせたい

テキスト入力フォームは、表示させるだけですと、ただの棒のようなものが１つ置かれているだけです。

よくあるお名前を入力するフォーム

お名前の入力をする場合、このような感じでフォームを設置することが多いと思います。
もちろんこれで名前を入力する場所ということは分かるのですが、もう少し入力をする部分にかたまり感がほしいなって思うことがあります。

メールフォームの構成を考え直す

かたまり感を出す手軽な方法としては、テキストもinputタグも同じ囲みの中に入っていれば良さそうですね。

上記画像のように、ラベルの中にテキストとinputタグを入れてみると、インプットフォームの中にテキストが埋め込まれているようなかたまり感のある入力フォームを作ることができます。

実際に作ってみよう

まず実際に作ってみようと思います。
まずはメールフォームを準備します。このメールフォームはこんな感じで作ってみます。

<div class="mailform">
  <label for="form-name" class="inputform">
    <div class="name">お名前</div>
    <div class="form"><input type="text" name="form-name" value="" id="form-name" /></div>
  </label>
  <label for="form-address" class="inputform">
    <div class="name">ご住所</div>
    <div class="form"><input type="text" name="form-address" value="" id="form-address" /></div>
  </label>
  <label for="form-email" class="inputform">
    <div class="name">email</div>
    <div class="form"><input type="email" name="form-email" value="" id="form-email" /></div>
  </label>
  <label for="form-comment" class="inputform">
    <div class="name">内容</div>
    <div class="form"><textarea name="form-comment" id="form-comment"></textarea></div>
  </label>
</div>

ラベルで全部挟んだフォームを並べました。
ここからCSSで見た目を調整していきます。

.mailform {
  margin-top: 60px;
  transition: all 0.5s;
}

.inputform {
  display: grid;
  grid-template-columns: 5rem 1fr;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  margin-top: 15px;
  padding: 10px;
  transition: all 0.5s;
}

.inputform input[type="text"],
.inputform input[type="email"],
.inputform textarea {
  width: 100%;
  border: 0;
  font-size: 1rem;
  transition: all 0.5s;
}

.inputform input[type="text"]:focus,
.inputform input[type="email"]:focus,
.inputform textarea:focus {
  outline: none;
  background: #f5e8cf;
}

.inputform:focus-within {
  background: #f5e8cf;
}

.inputform textarea {
  height: 10rem;
}

.inputform .name {
  color: #957e80;
  font-size: 0.75rem;
}

CSSはこのような感じで作成しています。
今回フォームの中身を横に並べるためにdisplay:gridを使用しています。
また、:focusや:focus-withinも使っていますが、これはフォームにフォーカスが当たった時の動作を行う疑似クラスです。:focusとともに:focus-withinも覚えておくと表現の幅が広がります。

こんな感じのメールフォームになりました

このような感じで、メールフォーム一つをとっても、アップデートしていける部分は沢山あると思います。
これをベースにもっとグラフィカルにわかりやすいフォームの作成も可能になると思います。
目的に到達する過程で、この方が便利だとかこの方がわかりやすいと言う表現につながるのであれば色々やってみるのも良いと思います。
メールフォームだから棒をピッと引いときゃ良いかなではなく、目的に応じて色々組み立てができるような引き出しを持っておくと心強いですね。