30days

お問い合わせフォーム 【デイトラ解説】

こんにちは、Web制作フリーランスで活動しているヒロ(@hirokiweblax)です。

本日はお問い合わせフォームをやっていこうと思います!

最初は苦手意識があると思いますが、1から作らなくて済むので作れるようになれば意外に楽な部分です。
頑張って理解していきましょう!

本日のポイント

・フォームのタグを理解する
・フォームのスタイルをリセットする

ピクセルパーフェクト、レスポンシブは行ってないので、コーディング時の参考ぐらいに思ってくれれば幸いです。
ご質問があれば答えますのでDMでお問い合わせください。@hirokiweblax

完成形

HTML

<section id="contact">
  <div class="inner">
    <div class="title">
      <h2>Contact</h2>
      <div class="title-line"></div>
    </div>
    <form>
      <div class="name flex">
        <div class="left must">
          お名前
        </div>
        <div class="right">
          <input class="text-test" type="text" name="yourname" placeholder="山田太郎">
        </div>
      </div>
      <div class="mail flex">
        <div class="left must">
          メールアドレス
        </div>
        <div class="right flex">
          <input class="text-test" type="text" name="email" placeholder="text@example.com">
        </div>
      </div>
      <div class="type flex">
        <div class="left">
          お問い合わせ種別
        </div>
        <div class="right">
          <select class="select-test">
            <option>---</option>
            <option>セレクトA</option>
            <option>セレクトB</option>
            <option>セレクトC</option>
          </select>
        </div>
      </div>
      <div class="detail flex">
        <div class="left ">
          お問い合わせ内容
        </div>
        <div class="right">
          <textarea class="textarea-text" placeholder="お問い合わせ内容を入力してください"></textarea>
        </div>
      </div>
      <div class="radio">
        <label><input class="radio-test" type="radio" name="radio-name"><span>ラジオ1</span></label>
        <label><input class="radio-test" type="radio" name="radio-name"><span>ラジオ2</span></label>
        <label><input class="radio-test" type="radio" name="radio-name"><span>ラジオ3</span></label>
      </div>
      <div class="privacy">
        <label><input class="check-test" type="checkbox" name="check-name"><span><a
              class="under">プライバシーポリシー</a>に合意する</span></label>
      </div>
      <div class="btn">
        <a href="">送信する</a>
      </div>
    </form>
  </div><!-- .inner -->
</section>

CSSも入れるととても長くなるので、、、割愛して最後にCodepenで載せます。

フォームの基礎

フォームの作り方ですが、今回も暗記する必要はありません。
タグや作り方を理解するだけで大丈夫です。

フォーム作成の基礎を理解するためには以下のリンクを参照にしてください。

タグなどの基礎的な部分はほとんど解説されています、
最初はこのページを開きながらフォームを作っていきましょう。(僕も参照にしながら今回コーディングしました)

フォームのスタイルをリセットする

基礎を理解したところですが、実はいきなりフォームのコーディングを始めることはできません。

inputやtextareaタグなど、フォームで使うタグのデザインはブラウザ間で異なるので、
まず最初にブラウザ間のデザイン差を少なくする必要があります

例えば、ChromeとFirefoxだとこのようにデザインが違ってしまいます。

引用: HPcode

今回フォームの初期化はHPcodeを参照にして進めていきます!

基本的にフォームは上記のページに書かれているコードを修正すればOKです

僕は上記のHPcodeに書かれているcssをまとめていて、reset-contact.cssというのを作っています。
このcssを使えば以下のようなスタイルのフォームをすぐに使えるようになるので、皆さんも作ってみてください!

一応僕が使っているコードを載せておきます。

See the Pen
contact-reset
by hiro (@hirog)
on CodePen.

See the Pen
contact-reset
by hiro (@hirog)
on CodePen.

フォームの作成

ここまできたら、簡単にフォームを作ることができます。
フォームは1から作るのではなく、デザインを修正するだけで大丈夫です。

では、本格的に解説をしていきます。

先ほどのCSSを使えば、inputタグ自体のスタイルはほとんどできています。
なので幅や配置を指定しましょう!

まずは左の題名と右の記入欄でボックスを分けて、flexで横並べにしましょう。

<div class="name flex">
        <div class="left must">
          お名前
        </div>
        <div class="right">
          <input class="text-test" type="text" name="yourname" placeholder="山田太郎">
        </div>
 </div>
.flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

そして以下の3点で横方向のデザインは整います。

・題名左と記入欄の右の余白はpadding
justify-content:space-between;で両端に寄せる
・記入欄の幅を指定する

ここら辺の記述ですね。

form {
    padding: 57px 50px 73px 50px;
  }
  .right {
    width: 100%;
    max-width: 528px;
  }
  .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

そして「必須」の表示は擬似要素で作ってあげましょう。

.must {
    position: relative;
    &:after {
      content: "必須";
      background-color: #e81919;
      padding:3px 9px;
      color:white;
      border-radius: 12px;
      font-size: 14px;
      font-weight: bold;
      position: absolute;
      left: 3px;
      bottom:-30px;
    }
  }

 

placeholderの文字の大きさや色は普通にクラスをつけて指定できます。
文字位置はinputのpaddingで調整しましょう

これでテキストフィールドは完成です。

セレクトボックス

お問い合わせ種別はselectタグで作ります。

inputタグとほとんど変わらないのですが、placeholderが指定できません
なので、僕はoptionの最初に—をいれました。

これが正しいのかわかりませんが、、、

<select class="select-test">
            <option>---</option>
            <option>セレクトA</option>
            <option>セレクトB</option>
            <option>セレクトC</option>
 </select>

そして擬似要素で右にアローボタンをいれましょう!

これで完成です!

テキストエリア

お問い合わせ内容はtextareaタグですね。
こちらもほとんどinputタグと変わりません。

文章が記入できる欄だとわかるように、高さを大きめに指定してあげましょう。

ラジオボタン

難しそうですが、はにわまんさんのブログを引用すればほとんど完成しています笑

色や大きさ、余白を修正すれば終わりですね

コードを少し解説すると
spanは文字列の所なので、ここで余白を合わせます。
::beforeで左の丸枠::afterでクリック後に現れる丸を作る仕組みとなっています。

.radio {
    margin-top: 40px;
  }
  .radio-test + span {
    padding-left: 40px;
    font-size: 16px;
    margin-right: 30px;
  }

  .radio-test + span::before {
    -webkit-transform: translateY(-50%);
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 50%;
    content: "";
    display: block;
    height: 30px;
    width: 30px;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .radio-test + span::after {
    -webkit-transform: translateY(-50%);
    background: #3f51b5;
    border: 1px solid transparent;
    border-radius: 50%;
    content: "";
    height: 18px;
    width: 18px;
    left: 6px;
    opacity: 0;
    padding: 2px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s ease 0s;
  }
  .radio-test:checked + span::after {
    opacity: 1;
  }

チェックボックス

これもラジオボタンと同じ仕組みで作っています。

HPcodeに作り方が載っているのでコピペ、修正しましょう!

最後にボタンを作って完成です!!

まとめ

フォームを作るのは意外と簡単です。
基本を理解して修正するだけなので、慣れたらすぐに作れるようになります。

以下のポイントだけ押さえておきましょう!

本日のポイント

・フォームのタグを理解する
・フォームのスタイルをリセットする

補足

Codepen

See the Pen
お問い合わせ
by hiro (@hirog)
on CodePen.

See the Pen
お問い合わせ
by hiro (@hirog)
on CodePen.