【コピペ】超絶シンプルな！お問い合わせフォームのHTML、CSSサンプルコード

【コピペ】超絶シンプルな！お問い合わせフォームのHTML、CSSサンプルコード

SHARE

こんにちは、ゆうや（@yuyaphotograph）です！

この記事では、

  • HTML、CSSでお問い合わせフォームをコーディングしたいけど、どう書いたらいいか分からなくて困っている
  • 「コピペですぐ使える」お問い合わせフォームのサンプルコードが見たい
  • レスポンシブ対応したお問い合わせフォームのHTML、CSSコードがほしい

という方のお悩みを解決します！

コピペで使えるお問い合わせフォーム

この記事で紹介するコードで作れるフォーム！

コーディングのポイント

お問い合わせフォームをコーディングする時のポイントは以下の5つ！

  1. フォーム全体のコンテンツ幅をmax-widthで指定する（適宜marginで中央寄せ）
  2. 各項目はflexboxで横並びにする（スマホの時はflex-wrap:wrapで2段に）
  3. 各項目の余白はpaddingで指定する
  4. flexアイテムの横幅はデザインに合わせてmax-widthで指定する
  5. inputやtextarea要素の高さはデザインに合わせてheightで指定する

考えれば考えるほどポイント出てくるので、5つに絞りました（汗）

それではお待ちかね、上記のポイントを頭に入れて実際のサンプルコードをご覧ください〜

＊リセットCSSを適用していることが前提のコードです

お問い合わせフォームのデモ

See the Pen
JjYWmda by 石森裕也 (@yuyaphotograph)
on CodePen.

お問い合わせフォームのHTML

コード
<div class="Form">
  <div class="Form-Item">
    <p class="Form-Item-Label">
      <span class="Form-Item-Label-Required">必須</span>会社名
    </p>
    <input type="text" class="Form-Item-Input" placeholder="例）株式会社令和">
  </div>
  <div class="Form-Item">
    <p class="Form-Item-Label"><span class="Form-Item-Label-Required">必須</span>氏名</p>
    <input type="text" class="Form-Item-Input" placeholder="例）山田太郎">
  </div>
  <div class="Form-Item">
    <p class="Form-Item-Label"><span class="Form-Item-Label-Required">必須</span>電話番号</p>
    <input type="text" class="Form-Item-Input" placeholder="例）000-0000-0000">
  </div>
  <div class="Form-Item">
    <p class="Form-Item-Label"><span class="Form-Item-Label-Required">必須</span>メールアドレス</p>
    <input type="email" class="Form-Item-Input" placeholder="例）example@gmail.com">
  </div>
  <div class="Form-Item">
    <p class="Form-Item-Label isMsg"><span class="Form-Item-Label-Required">必須</span>お問い合わせ内容</p>
    <textarea class="Form-Item-Textarea"></textarea>
  </div>
  <input type="submit" class="Form-Btn" value="送信する">
</div>

お問い合わせフォームのCSS

レスポンシブにも対応しているコードです！

コピペで使えるお問い合わせフォームSP

スマートフォンの時（max-width:480px）の表示！

コード
.Form {
  margin-top: 80px;
  margin-left: auto;
  margin-right: auto;
  max-width: 720px;
}
@media screen and (max-width: 480px) {
  .Form {
    margin-top: 40px;
  }
}
.Form-Item {
  border-top: 1px solid #ddd;
  padding-top: 24px;
  padding-bottom: 24px;
  width: 100%;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 480px) {
  .Form-Item {
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 16px;
    padding-bottom: 16px;
    flex-wrap: wrap;
  }
}
.Form-Item:nth-child(5) {
  border-bottom: 1px solid #ddd;
}
.Form-Item-Label {
  width: 100%;
  max-width: 248px;
  letter-spacing: 0.05em;
  font-weight: bold;
  font-size: 18px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Label {
    max-width: inherit;
    display: flex;
    align-items: center;
    font-size: 15px;
  }
}
.Form-Item-Label.isMsg {
  margin-top: 8px;
  margin-bottom: auto;
}
@media screen and (max-width: 480px) {
  .Form-Item-Label.isMsg {
    margin-top: 0;
  }
}
.Form-Item-Label-Required {
  border-radius: 6px;
  margin-right: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  width: 48px;
  display: inline-block;
  text-align: center;
  background: #5bc8ac;
  color: #fff;
  font-size: 14px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Label-Required {
    border-radius: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
    width: 32px;
    font-size: 10px;
  }
}
.Form-Item-Input {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-left: 40px;
  padding-left: 1em;
  padding-right: 1em;
  height: 48px;
  flex: 1;
  width: 100%;
  max-width: 410px;
  background: #eaedf2;
  font-size: 18px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Input {
    margin-left: 0;
    margin-top: 18px;
    height: 40px;
    flex: inherit;
    font-size: 15px;
  }
}
.Form-Item-Textarea {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-left: 40px;
  padding-left: 1em;
  padding-right: 1em;
  height: 216px;
  flex: 1;
  width: 100%;
  max-width: 410px;
  background: #eaedf2;
  font-size: 18px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Textarea {
    margin-top: 18px;
    margin-left: 0;
    height: 200px;
    flex: inherit;
    font-size: 15px;
  }
}
.Form-Btn {
  border-radius: 6px;
  margin-top: 32px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 280px;
  display: block;
  letter-spacing: 0.05em;
  background: #5bc8ac;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
}
@media screen and (max-width: 480px) {
  .Form-Btn {
    margin-top: 24px;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 160px;
    font-size: 16px;
  }
}

Contact Form 7で使う場合

上記で紹介したHTMLをWordPressのお問い合わせフォームプラグイン「Contact Form 7」で使う場合のコードもおまけで紹介します。

inputとtextarea要素をwcf7独自のタグに変更してあげる形になります。

Contact Form 7用のコード
<div class="Form">
  <div class="Form-Item">
    <p class="Form-Item-Label">
      <span class="Form-Item-Label-Required">必須</span>会社名
    </p>
    [text* your-company class:Form-Item-Input placeholder "例）株式会社令和"]
  </div>
  <div class="Form-Item">
    <p class="Form-Item-Label"><span class="Form-Item-Label-Required">必須</span>氏名</p>
    [text* your-name class:Form-Item-Input placeholder "例）山田太郎"]
  </div>
  <div class="Form-Item">
    <p class="Form-Item-Label"><span class="Form-Item-Label-Required">必須</span>電話番号</p>
    [text* your-tel class:Form-Item-Input placeholder "例）000-0000-0000"]
  </div>
  <div class="Form-Item">
    <p class="Form-Item-Label"><span class="Form-Item-Label-Required">必須</span>メールアドレス</p>
    <input type="email" class="Form-Item-Input" placeholder="例）example@gmail.com">
    [email* your-email class:Form-Item-Input placeholder "例）example@gmail.com"]
  </div>
  <div class="Form-Item">
    <p class="Form-Item-Label isMsg"><span class="Form-Item-Label-Required">必須</span>お問い合わせ内容</p>
    [textarea* your-msg class:Form-Item-Textarea]
  </div>
  [submit class:Form-Btn "送信する"]
</div>

まとめ

以上、コピペですぐ使えるお問い合わせフォームのHTML、CSSサンプルコードを紹介しました。

この記事に記載したコードがフォームのコーディングで頭を抱えている方の助けになれば幸いです！

次はこの記事！

Contact Form 7を使うときに役立つ記事まとめ 【CSSコピペ】案件でよく使うセレクトボックスのサンプルコード

5 Comments

あいり

はじめまして、あいりと申します。
お問い合わせフォーム作成で困っているため、
【コピペ】超絶シンプルな！お問い合わせフォームのHTML、CSSサンプルコードとてもわかりやすい記事で参考にさせて頂いています！

こちらのページを活用して、自分でアレンジしたいのですが、
いくつか質問があります。

◆質問
●送信ボタンについて
→
①送信ボタンを押すと、指定したアドレス（私の仕事用アドレス）にお問い合わせの内容を送られてくるやり方
②送信ボタン押したら、サンクスページ（ありがとうございましたみたいな感じ）を表示させるやり方

●エラー表示について
→
③もし相手の方が必須項目部分を入れ忘れた場合、エラーみたいな表示にしたいのですが・・そのやり方について

をご教授頂けると嬉しいです＞＜
よろしくお願いします！

ゆうや

あいりさん
コメントありがとうございます！

質問を答えるにあたり、1つ質問させていただきます。

あいりさんはWordPressでサイト構築されていますでしょうか？

あいり

ゆうやさん
早速お返事ありがとうございます！＾＾
いいえ！ワードプレスでサイト構築行っていません＞＜

最近独学でportfolioを学び始めたばかりで、
現在Dreamweaverで制作しています！

ゆうや

WordPressで構築されていないんですね！

WordPressの場合はあいりさんのお悩み①〜③全て、プラグイン「Contact Form 7」を活用して簡単に解決できるんですがね…^^;
※ぼくが普段取り組んでいるWeb制作案件は全てWordPressで構築するものなのです

この記事で紹介しているコードはあくまで「お問い合わせフォームの見た目」で、実際に動くようにするにはphpなどを使ってプログラムを組む必要があります！
せっかく丁寧に質問していただいたのにお役に立てず申し訳ございません。
「php お問い合わせフォーム」とググって出てくる記事をぜひ読んでみてください〜

あいり

そうなんですね！！！
とんでもないです！承知しました！ご丁寧にありがとうございました◎

現在コメントは受け付けておりません。

前の記事

【コピペ】超絶シンプル！なパンくずリストの作り方
【コピペ】超絶シンプル！なパンくずリストの作り方

次の記事

【jQuery】チェックしたら有効になる！お問い合わせフォーム…
【jQuery】チェックしたら有効になる！お問い合わせフォームでよく使う「同意する」ボタンの作り方