デザイン
更新日: 2025/2/3
【イラスト付き】お問い合わせフォームをおしゃれなデザインで作成する方法を紹介！
イエローちゃん！
お問い合わせフォームのデザインがイマイチだから、参考になるコードを教えて欲しいんだ。
お問い合わせフォームはユーザーが最後まで入力できるように、使いやすくしたいよね。
見やすくて使いやすいデザインを紹介するから任せて！
ありがとう。
お問い合わせフォームとは？
お問い合わせフォームは、サイトに訪問してくれたユーザーからお問い合わせをもらうためのWebフォームだよ。
コンタクトフォームとも呼ぶんだ〜！
ユーザーとの接点にもなるから、サイトの中でも重要な要素だよね。
そうなの！だから見やすさと使いやすさは大切なんだ。
ユーザーに配慮したお問い合わせフォームを作りたいな。
最適なお問い合わせフォームのポイント
お問い合わせフォームを作る上では見やすさと使いやすさが重要なんだけど、いくつかポイントがあるんだ。
これを意識すれば、どんなお問い合わせフォームもよくなるよ！
お問い合わせフォームの基礎ということだね！
ポイントはこれだよ〜！
1.入力項目を絞る
2.見出しと入力欄は縦に設置する
3.必須項目は明記する
4.ボタンは送信ボタンのみ配置する
5.入力例は欄外に添える
1つずつ理解していけば、僕でもできる気がしてきた！
1.入力項目を絞る
入力項目を絞ることはとても重要だよ！
盛り込みたい内容が多すぎてついつい増えちゃうんだよね。
わかる〜！お客さんに聞きたいことってたくさんあるよね。
でも、アンケートでもそうだけど、質問項目が多すぎるとだんだん嫌になってこない？
嫌になってくる。
情報をもらう側はいろんな項目を聞きたいけど、ユーザー側は煩わしくなってしまうことを覚えておこう。
2.見出しと入力欄は縦に設置する
これもとっても細かいことなんだけど、見出しと入力欄は縦に設置するのがおすすめだよ。
横に設置するのはダメなの？
ユーザーの目線の動きを意識してほしいんだけど、見出しと入力欄が横並びになっていると、目線が横に行ったり下に行ったり、動きが多くなってしまうの。
たしかに！見出しを見て入力欄を見る、次の見出しを見て、、ってジグザグに動くことになっちゃうね。
視線の動きが少ない方が、ユーザーの混乱を防げるし、情報量を少なく見せることもできるんだ。
3.必須項目は明記する
必須項目であることを明記することも重要だよ！
こないだ必須項目じゃないと思って空欄にしていたら、エラーが出てしまったんだ。
分かりづらかったけど実は必須項目だったみたいで、とっても使いにくいフォームだったな。
一度エラー等で流れを止められちゃうと、かなりストレスになるよね。
ユーザーがサクッと簡単に入力できるようにすることは、離脱率を抑えるためにも重要なんだ。
4.ボタンは送信ボタンのみ配置する
お問い合わせページの中に複数のボタンがあったらどう？
どのボタンを押したらいいのか、迷ってしまいそうだね。
そうなの！しかもお問い合わせフォームの目的はフォームの入力を完了して送信してもらうことなのに、他のボタンがあったらお問い合わせフォームから離脱しちゃうよね。
お問い合わせフォームの役割を果たすために、ボタンは「送信ボタン」のみにしよう！
5.入力例は欄外に添える
入力例を欄外に添えることも、細かいけど重要なんだ！
よく入力欄に例が書いてあって、入力すると消えちゃうから困ったことがあったよ。
他の場所に下書きしてから、入力欄にコピペしたこともあったな。
例が消えてしまうと不便だよね。
欄外に添えておくことで、ユーザーにとって入力しやすい状態になるからおすすめだよ。
【HTML&CSS】コピペで使えるお問い合わせフォーム例2選
お待たせしました！
コピペで使えるお問い合わせフォームを準備したよ〜！
HTMLとCSSを準備してくれたんだね！
ありがとう！
1.シンプルなデザイン
まずはシンプルなデザインだよ！
入力項目は名前、メアド、ペットの種類、お問い合わせ内容の4つだよ。
文字の入力欄と、プルダウンもあるから参考にしてみてね。
整理されていてとっても見やすいね！
HTMLはこれだよ。
<form action="your-server-side-script.php" method="POST">
<div class="form-row">
<div class="form-label">
<label for="name">お名前</label>
<span>必須</span>
</div>
<input type="text" id="name" name="name" placeholder="例) 山田 太朗" required>
</div>
<div class="form-row">
<div class="form-label">
<label for="email">メールアドレス:</label>
<span>必須</span>
</div>
<input type="email" id="email" name="email" placeholder="例) abcd@xyz.com" required>
</div>
<div class="form-row">
<div class="form-label">
<label for="pet-select">ペットの種類</label>
</div>
<select name="animal" id="pet-select">
<option value="">--選択してください--</option>
<option value="dog">犬</option>
<option value="cat">猫</option>
<option value="mouse">ハムスター</option>
<option value="bird">鳥</option>
<option value="fish">魚</option>
</select>
</div>
<div class="form-row">
<div class="form-label">
<label for="message">お問い合わせ内容</label>
<span>必須</span>
</div>
<textarea id="message" name="message" rows="5"placeholder="お問い合わせ内容をこちらにご記入ください" required></textarea>
</div>
<div class="form-row">
<div class="form-label"></div>
<button type="submit">送信</button>
</div>
</form>
CSSはこれだよ。
/* レイアウト */
form {
width: 70%;
margin: 0 auto;
}
.form-row {
display: flex;
align-items: center;
padding: 20px;
border-bottom: 1px solid #f2f4f5;
}
.form-row:last-child {
border-bottom: none;
}
.form-label {
display: flex;
align-items: center;
width: 250px;
}
.form-label label {
font-weight: bold;
}
.form-label span {
margin-left: 10px;
padding: 2px 6px;
border-radius: 3px;
font-size: 12px;
font-weight: bold;
color: #fff;
background-color: #166ab5;
}
/* フォームパーツのデザイン */
input, textarea {
background-color: #f2f4f5;
border: none;
border-radius: 3px;
padding: 15px 20px;
font-size: 16px;
color: #333;
flex-grow: 1;
}
input::placeholder,
textarea::placeholder {
color: #999;
font-size: 14px;
}
select {
background-color: #f2f4f5;
border: none;
border-radius: 3px;
padding: 15px 20px;
font-size: 16px;
color: #333;
}
button {
cursor: pointer;
margin-top: 30px;
padding: 15px 45px;
border: none;
border-radius: 3px;
color: #fff;
font-weight: bold;
background-color: #166ab5;
}
2.項目が角丸になっているデザイン
次は、少し凝ったデザインだよ。
これはおしゃれでかっこいいね。
ちょっと丸みを帯びただけでかなり見た目が変わるから、サイトのデザインやブランディングに合わせて使ってみてね！
HTMLはこれだよ。
<div class="box_con04">
<form method="post" action="mail.php">
<ul class="formTable">
<li>
<p class="title"><em>ご用件</em></p>
<div class="box_det"><select name="ご用件">
<option value="">選択してください</option>
<option value="ご質問・お問い合わせ">ご質問・お問い合わせ</option>
<option value="リンクについて">リンクについて</option>
</select></td>
</li>
<li>
<p class="title"><em>お名前<span>必須</span></em></p>
<div class="box_det"><input size="20" type="text" class="wide" name="お名前" /></div>
</li>
<li>
<p class="title"><em>電話番号（半角）<span>必須</span></em></p>
<div class="box_det"><input size="30" type="text" class="wide" name="電話番号" /></div>
</li>
<li>
<p class="title"><em>Mail（半角）</em></p>
<div class="box_det"><input size="30" type="text" class="wide" name="Email" /></div>
</li>
<li>
<p class="title"><em>お問い合わせ内容</em></p>
<div class="box_det"><textarea name="お問い合わせ内容" cols="50" rows="5"></textarea></div>
</li>
</ul>
<div class="con_pri">
<div class="box_pri">
<div class="box_tori">
<h4>プライバシー</h4>
<p class="txt">テキスト例</p>
</div>
<div class="box_num">
<h4>プライバシー</h4>
</div>
</div>
</div>
<div class="box_check">
<label>
<input type="checkbox" name="acceptance-714" value="1" aria-invalid="false" class="agree"><span class="check">プライバシーポリシーに同意する</span>
</label>
</div>
<p class="btn">
<span><input type="submit" value=" 確認 " /></span>
</p>
</form>
</div>
CSSはこれだよ。
/*リセットcss↓*/
html {
overflow-y: scroll;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin: 0;
padding: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style: normal;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption,th {
text-align: left;
}
q:before,q:after {
content: ;
}
object,embed {
vertical-align: top;
}
hr,legend {
display: none;
}
h1,h2,h3,h4,h5,h6 {
font-size: 100%;
}
img,abbr,acronym,fieldset {
border: 0;
}
li {
list-style-type: none;
}
sup {
vertical-align: super;
font-size: 0.5em;
}
img {
vertical-align: top;
}
i {
font-style: normal;
}
/*----リセットcss*----/
/*デザインcss↓*/
.box_con04 {
max-width: 900px;
margin: 0 auto;
}
@media only screen and (max-width: 768px) {
.box_con04 {
width: 95%;
}
}
.box_con04 form {
width: 100%;
}
.box_con04 form ul {
width: 100%;
}
.box_con04 form ul li {
position: relative;
overflow: hidden;
border: 1px solid #1c2e53;
margin: .5em 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
@media only screen and (min-width: 769px) {
.box_con04 form ul li {
display: -webkit-flex;
display: flex;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
}
}
@media print {
.box_con04 form ul li {
display: -webkit-flex;
display: flex;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
}
}
.ie8 .box_con04 form ul li {
display: -webkit-flex;
display: flex;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
}
.box_con04 form ul li .title {
position: relative;
width: 30%;
font-weight: normal;
padding: 1em;
position: relative;
color: #fff;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
@media only screen and (min-width: 769px) {
.box_con04 form ul li .title {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}
}
@media print {
.box_con04 form ul li .title {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}
}
.ie8 .box_con04 form ul li .title {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}
.box_con04 form ul li .title:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #1c2e53;
z-index: 0;
}
@media only screen and (max-width: 768px) {
.box_con04 form ul li .title {
text-align: center;
width: 100%;
display: block;
background: rgba(0, 0, 0, 0.2);
padding: .8em .2em;
}
}
.box_con04 form ul li .title em {
position: relative;
z-index: 1;
}
.box_con04 form ul li .title span {
background: #cd6f55;
padding: 0 .3em;
color: #fff;
margin-left: .5em;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.box_con04 form ul li .box_det {
width: 70%;
position: relative;
padding: 1em;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
@media only screen and (max-width: 768px) {
.box_con04 form ul li .box_det {
padding: 1.5em .5em;
display: block;
width: 100%;
}
}
.box_con04 form ul li .box_br {
display: block;
}
.box_con04 form ul li select, .box_con04 form ul li textarea, .box_con04 form ul li .wide {
width: 100%;
height: 3em;
padding: .5em;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.box_con04 form ul li textarea {
height: 10em;
}
/*プライバシーのデザインcss↓*/
.con_pri {
max-width: 700px;
margin: 0 auto;
}
@media only screen and (max-width: 768px) {
.con_pri {
width: 95%;
}
}
.con_pri .box_pri {
height: 300px;
overflow-y: scroll;
border: 1px solid #cdcdcd;
background: #f7f7f7;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-top: 20px;
padding: 20px 55px;
}
@media only screen and (max-width: 768px) {
.con_pri .box_pri {
margin-top: 4%;
padding: 3%;
}
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
.con_pri .box_pri {
padding: 4%;
}
}
.con_pri .box_pri .box_tori {
text-align: left;
margin-top: 40px;
}
@media only screen and (max-width: 768px) {
.con_pri .box_pri .box_tori {
margin-top: 4%;
}
}
.con_pri .box_pri .box_tori h4 {
font-weight: normal;
margin-bottom: 30px;
font-size: 150%;
}
@media only screen and (max-width: 768px) {
.con_pri .box_pri .box_tori h4 {
margin-bottom: 4%;
}
}
.con_pri .box_pri .box_tori .txt {
padding: 0 20px;
}
@media only screen and (max-width: 768px) {
.con_pri .box_pri .box_tori .txt {
padding: 0;
}
}
.con_pri .box_pri .box_num {
margin-top: 30px;
}
@media only screen and (max-width: 768px) {
.con_pri .box_pri .box_num {
margin-top: 5%;
}
}
.con_pri .box_pri .box_num h4 {
font-weight: normal;
font-size: 113%;
}
.con_pri .box_pri .box_num .txt {
padding: 10px 0 0 20px;
}
@media only screen and (max-width: 768px) {
.con_pri .box_pri .box_num .txt {
padding: 3% 0 0 3%;
}
}
.box_check {
text-align: center;
margin: 1em auto;
}
.box_check label {
display: inline-block;
}
.box_check label span {
margin-left: .3em;
}
.btn {
text-align: center;
}
.btn input {
display: inline-block;
background: #eee;
padding: .5em 4em;
color: #000;
text-decoration: none;
cursor: pointer;
border: none;
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
.btn input:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7;
}
まとめ
お問い合わせフォームのデザインをまとめると、こんな感じだよ。
まとめ
◆お問い合わせフォームとは、サイトに訪問してくてたユーザーとの唯一の接点となる重要な機能
◆お問い合わせフォームはユーザーにとって見やすくて分かりやすくする必要があり、ポイントを抑えて作ることが重要
◆コピペで使えるコードはたくさんあるので、自分のサイトのデザインやブランディングに合わせたデザインを使う
お問い合わせフォームはポイントを抑えて、自分のサイトに合ったデザインで作るのがいいね！
イエローちゃん、本当にありがとうね！
またいつでも聞いてね！
最新の記事一覧
マークアップとは？正しい意味を解説！基本的なHTMLタグも
SEO
サイトスピードの重要性は？おすすめの改善方法5選も紹介！
SEO
カーディナリティの意味や重要性は？初心者向けに分かりやすく解説
SEO
インバウンド集客のメリットは？効果的な施策やコツを紹介！
SEO
ページエクスペリエンスアップデートの内容は？変更点や影響を解説
SEO
ランキングファクターとは？検索順位をアップするためのポイント
SEO
Webマーケティングとは？種類と実践例をわかりやすく解説！
マーケティング
オウンドメディアの作り方とは？最初に決めるべきことを解説！
SEO
マーケティング分析とは？手法と成功のポイントを徹底解説
SEO
SEOタグとは何？種類や活用方法をわかりやすく解説！
SEO
トラフィックシェアとは？基本から活用法まで徹底解説！
SEO
ページ内リンクとは？必要性や設定方法も初心者向けに詳しく説明！
SEO
【歯医者のSEO対策】ホームページ制作で注意すべきポイントを紹介
SEO
学習塾のSEO対策まとめ！失敗しないための注意点も紹介
SEO
不動産のSEO対策は何をすべき？キーワード選びのポイントも解説
SEO
aタグとは？Webページを繋ぐ架け橋の使い方を徹底解説！
SEO
ページがフリーズする原因と対策とは？ブラウザ環境を快適にしよう！
SEO
要約とは？正しい意味や文章を要約する手順・コツを紹介
SEO
文章の書き方やコツを徹底解説！簡潔で分かりやすい文章とは？
SEO
検索エンジンのランキングは？世界と国内のシェア率を比較
SEO
最新の記事一覧
マークアップとは？正しい意味を解説！基本的なHTMLタグも
SEO
サイトスピードの重要性は？おすすめの改善方法5選も紹介！
SEO
カーディナリティの意味や重要性は？初心者向けに分かりやすく解説
SEO
インバウンド集客のメリットは？効果的な施策やコツを紹介！
SEO
ページエクスペリエンスアップデートの内容は？変更点や影響を解説
SEO
ランキングファクターとは？検索順位をアップするためのポイント
SEO
Webマーケティングとは？種類と実践例をわかりやすく解説！
マーケティング
オウンドメディアの作り方とは？最初に決めるべきことを解説！
SEO
マーケティング分析とは？手法と成功のポイントを徹底解説
SEO
SEOタグとは何？種類や活用方法をわかりやすく解説！
SEO
トラフィックシェアとは？基本から活用法まで徹底解説！
SEO
ページ内リンクとは？必要性や設定方法も初心者向けに詳しく説明！
SEO
【歯医者のSEO対策】ホームページ制作で注意すべきポイントを紹介
SEO
学習塾のSEO対策まとめ！失敗しないための注意点も紹介
SEO
不動産のSEO対策は何をすべき？キーワード選びのポイントも解説
SEO
aタグとは？Webページを繋ぐ架け橋の使い方を徹底解説！
SEO
ページがフリーズする原因と対策とは？ブラウザ環境を快適にしよう！
SEO
要約とは？正しい意味や文章を要約する手順・コツを紹介
SEO
文章の書き方やコツを徹底解説！簡潔で分かりやすい文章とは？
SEO
検索エンジンのランキングは？世界と国内のシェア率を比較
SEO
