HTML/CSS

【横並び】お問い合わせフォームの作り方【レスポンシブ対応】

お問い合わせフォームの作り方を解説していきます。
以前に、フォームCSSのリセットについて解説しましたが、今回は具体的に横並びレイアウトにしつつデザインを整えていきたいと思います。

 

フォームのCSSリセットについては、HPCode様の記事を参考にさせていただいています。
フォームのCSSを初期化してオリジナルなデザインを再現しよう!

フォームを横並びにしてCSSを整える

すみません、結論から書きます。

See the Pen
ZgEbEG
by kei (@kei_01011)
on CodePen.

画面が小さくて見にくいので、全画面で確認してください。

 

基本の問い合わせフォーム(レスポンシブ対応)です。

 

方法については、以前に、30DAYSトライアルのフォームについてまとめたツイート通りにコーディングしています。

 

フォームを作るときは、綺麗に横並びにするのが苦戦するんです・・・・。

横並びするためのざっくりした解説をすると以下のようなポイントになります。

 

  • inline-blockを指定
  • dtタグにfloat
  • dtのwidthを指定しつつ、ddはcalcで残りの横幅を指定

 

dtとddを揃えるためにも、vertical-align:middle;は必須ですし、

floatで要素が浮かないためにも、親要素にoverflow:hidden;を入れることを忘れずに。

 

これで、苦戦していたフォームレイアウトが完成します。

(なんだかんだで2時間くらいかかった・・・)

フォームを作るときに便利なサイト

1からフォームを作り上げるのは、なんだかんだ言っても大変です。フォームを作るときに参考になるサイトをご紹介しておきます。

 

81CSSForms

スクリーンショット 2019 07 18 16 43 04

様々なデザインのフォームがあって、デモやサンプルコードも見ることができます。

問い合わせフォームというよりも、ログインフォームが多いですが。十分参考になるサイトです。

 

10 CSS HTML Form Designs

10css html form

81CSSFormsに比べるとサンプル数は少ないですが、シンプルなフォームがその名の通り10例紹介されているので、どんなコードで書かれているのかを参考にしやすいかと思います。

 

 

他のサイトのデザインを調べる

僕がよくやるのが、他のサイトのデザインを調べて、どんなコードが書かれているかを参考にする方法です、

これは、News系コーディングでもやりましたが、とにかくいろんなデザインに触れて、参考にするのが成長の近道だと思っています。

問い合わせフォーム

キューピーのサイトですが、問い合わせフォームはこのようにテーブルで囲まれたデザインになっています。

このデザインもよく見ますね。

こんな感じで、とにかくググって、いろんなサイトを調べつつ、コピペでもいいので実装してみる。
そして、「なぜこのコードでできるのか」を理解することが重要だと思っています。

 

まとめ:苦手なデザインもとにかくコード書きまくる

フォームデザインは、苦手意識があったのですが、少しずつコードを書いて理解を深めていくことで、成長に繋がっていきます。

Boostnodeなどにストックしておけば、次出てきたときも安心ですね。

 

【お問い合わせフォーム】formをコーディングするときのCSS初期化30DAYSトライアルの課題で、「お問い合わせフォームの実装」を実践してました。 結論から言うと、めちゃくちゃ苦戦。 #30...