デザイン
更新日: 2024/6/11
お問い合わせフォームをおしゃれなデザインで作成する方法を紹介！
イエローちゃん！
お問い合わせフォームのデザインがイマイチだから、参考になるコードを教えて欲しいんだ。
お問い合わせフォームはユーザーが最後まで入力できるように、使いやすくしたいよね。
見やすくて使いやすいデザインを紹介するから任せて！
ありがとう。
お問い合わせフォームとは？
お問い合わせフォームは、サイトに訪問してくれたユーザーからお問い合わせをもらうための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;
}
まとめ
お問い合わせフォームのデザインをまとめると、こんな感じだよ。
まとめ
◆お問い合わせフォームとは、サイトに訪問してくてたユーザーとの唯一の接点となる重要な機能
◆お問い合わせフォームはユーザーにとって見やすくて分かりやすくする必要があり、ポイントを抑えて作ることが重要
◆コピペで使えるコードはたくさんあるので、自分のサイトのデザインやブランディングに合わせたデザインを使う
お問い合わせフォームはポイントを抑えて、自分のサイトに合ったデザインで作るのがいいね！
イエローちゃん、本当にありがとうね！
またいつでも聞いてね！
最新の記事一覧
コンテンツファームとは？ペナルティを受ける危険性も解説！
SEO
メディックアップデートとは？実施の背景や影響を徹底解説！
SEO
Webサイト運営に必須のSEO用語集40選！初心者向けに解説
SEO
ホワイトハットSEOとは？Googleが推奨するSEO戦略を解説
SEO
Web集客の基本を知ろう！初心者でも始められる5つの方法を紹介
SEO
NPSの計算方法を徹底解説！3つの導入メリットと活用方法＆注意点
SEO
無料あり！おすすめMEOツール11製品を紹介！選び方と活用法も
SEO
SEOの評価基準とは？検索順位を上げるための基本方針を解説！
SEO
動画SEOとは？検索結果で上位表示を狙うための新たな戦略を解説！
SEO
SEOに効果的なtitleタグの書き方は？5つのテクニックを紹介
SEO
【2024】おすすめの文章校正ツール5選！選び方も解説
SEO
OGP確認に使える6つのツールを紹介！効率化する方法も解説
SEO
SEOの成功事例を知ろう！効果的な戦略と実践方法を解説
SEO
ユーザージャーニーとは？カスタマージャーニーとの違いも解説！
SEO
SEOに最適な記事数は？質を保ちながら記事を増やすコツも解説！
SEO
SEO・SEMの違いは何？具体的な施策もわかりやすく解説！
SEO
フレッドアップデートとは？SEOに革命を起こした変化について解説
SEO
ゲシュタルトとは？心理学の歴史や基本法則について徹底解説！
SEO
マーケティングファネルとは？4つの段階についてわかりやすく解説！
SEO
サジェスト対策はどうやる？詳しい方法やサジェストの仕組みも解説
SEO
最新の記事一覧
コンテンツファームとは？ペナルティを受ける危険性も解説！
SEO
メディックアップデートとは？実施の背景や影響を徹底解説！
SEO
Webサイト運営に必須のSEO用語集40選！初心者向けに解説
SEO
ホワイトハットSEOとは？Googleが推奨するSEO戦略を解説
SEO
Web集客の基本を知ろう！初心者でも始められる5つの方法を紹介
SEO
NPSの計算方法を徹底解説！3つの導入メリットと活用方法＆注意点
SEO
無料あり！おすすめMEOツール11製品を紹介！選び方と活用法も
SEO
SEOの評価基準とは？検索順位を上げるための基本方針を解説！
SEO
動画SEOとは？検索結果で上位表示を狙うための新たな戦略を解説！
SEO
SEOに効果的なtitleタグの書き方は？5つのテクニックを紹介
SEO
【2024】おすすめの文章校正ツール5選！選び方も解説
SEO
OGP確認に使える6つのツールを紹介！効率化する方法も解説
SEO
SEOの成功事例を知ろう！効果的な戦略と実践方法を解説
SEO
ユーザージャーニーとは？カスタマージャーニーとの違いも解説！
SEO
SEOに最適な記事数は？質を保ちながら記事を増やすコツも解説！
SEO
SEO・SEMの違いは何？具体的な施策もわかりやすく解説！
SEO
フレッドアップデートとは？SEOに革命を起こした変化について解説
SEO
ゲシュタルトとは？心理学の歴史や基本法則について徹底解説！
SEO
マーケティングファネルとは？4つの段階についてわかりやすく解説！
SEO
サジェスト対策はどうやる？詳しい方法やサジェストの仕組みも解説
SEO
