デザイン
更新日: 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;
}
お問い合わせフォームのデザインをまとめると、こんな感じだよ。
まとめ
◆お問い合わせフォームとは、サイトに訪問してくてたユーザーとの唯一の接点となる重要な機能
◆お問い合わせフォームはユーザーにとって見やすくて分かりやすくする必要があり、ポイントを抑えて作ることが重要
◆コピペで使えるコードはたくさんあるので、自分のサイトのデザインやブランディングに合わせたデザインを使う
お問い合わせフォームはポイントを抑えて、自分のサイトに合ったデザインで作るのがいいね！
イエローちゃん、本当にありがとうね！
またいつでも聞いてね！
イエロー
インフルエンサーマーケティングやSNSマーケティングな女の子。まだまだ勉強中なので、これから他のマーケティング手法も頑張って勉強中。
最新の記事一覧
音声検索最適化（VSO）とは？具体的なやり方を徹底解説
SEO
校閲とは？校正との違いとチェックする項目や注意するべき項目を解説
SEO
バーティカル検索とは？基本からSEO対策まで徹底解説！
SEO
X（旧Twitter）はSEOに影響を与えるの？運用のコツも解説
SEO
コピペチェックとは？おすすめのツールや引用との違いを紹介
SEO
メディアとは何か？3種類のメディアと役割、そして未来を解説！
SEO
検索上位を目指すためにすることは？基本的で重要な施策を10個紹介
SEO
スラッグとは？最適化により得られる効果と設定方法を解説！
SEO
セグメントの意味と種類を徹底解説！3つの注意点も紹介
SEO
キーワードリサーチとは？おすすめツール5選や注意点を紹介
SEO
セグメンテーションとは？ターゲティングとの違いと有名企業の成功例
SEO
最新の記事一覧
音声検索最適化（VSO）とは？具体的なやり方を徹底解説
SEO
校閲とは？校正との違いとチェックする項目や注意するべき項目を解説
SEO
バーティカル検索とは？基本からSEO対策まで徹底解説！
SEO
X（旧Twitter）はSEOに影響を与えるの？運用のコツも解説
SEO
コピペチェックとは？おすすめのツールや引用との違いを紹介
SEO
メディアとは何か？3種類のメディアと役割、そして未来を解説！
SEO
検索上位を目指すためにすることは？基本的で重要な施策を10個紹介
SEO
スラッグとは？最適化により得られる効果と設定方法を解説！
SEO
セグメントの意味と種類を徹底解説！3つの注意点も紹介
SEO
キーワードリサーチとは？おすすめツール5選や注意点を紹介
SEO
セグメンテーションとは？ターゲティングとの違いと有名企業の成功例
SEO
