お問い合わせフォームをおしゃれなデザインで作成する方法を紹介!のアイキャッチ画像

デザイン

更新日: 2024/6/11

お問い合わせフォームをおしゃれなデザインで作成する方法を紹介!

character_balloon

イエローちゃん!

character_balloon

お問い合わせフォームのデザインがイマイチだから、参考になるコードを教えて欲しいんだ。

お問い合わせフォームはユーザーが最後まで入力できるように、使いやすくしたいよね。

character_balloon

見やすくて使いやすいデザインを紹介するから任せて!

character_balloon
character_balloon

ありがとう。

お問い合わせフォームとは?

character_balloon

お問い合わせフォームは、サイトに訪問してくれたユーザーからお問い合わせをもらうためのWebフォームだよ。

character_balloon

コンタクトフォームとも呼ぶんだ〜!

ユーザーとの接点にもなるから、サイトの中でも重要な要素だよね。

character_balloon
character_balloon

そうなの!だから見やすさと使いやすさは大切なんだ。

ユーザーに配慮したお問い合わせフォームを作りたいな。

character_balloon

最適なお問い合わせフォームのポイント

character_balloon

お問い合わせフォームを作る上では見やすさと使いやすさが重要なんだけど、いくつかポイントがあるんだ。

character_balloon

これを意識すれば、どんなお問い合わせフォームもよくなるよ!

お問い合わせフォームの基礎ということだね!

character_balloon
character_balloon

ポイントはこれだよ〜!

お問い合わせフォームのポイント

1.入力項目を絞る


2.見出しと入力欄は縦に設置する


3.必須項目は明記する


4.ボタンは送信ボタンのみ配置する


5.入力例は欄外に添える

1つずつ理解していけば、僕でもできる気がしてきた!

character_balloon

1.入力項目を絞る

character_balloon

入力項目を絞ることはとても重要だよ!

盛り込みたい内容が多すぎてついつい増えちゃうんだよね。

character_balloon
character_balloon

わかる〜!お客さんに聞きたいことってたくさんあるよね。

character_balloon

でも、アンケートでもそうだけど、質問項目が多すぎるとだんだん嫌になってこない?

嫌になってくる。

character_balloon
character_balloon

情報をもらう側はいろんな項目を聞きたいけど、ユーザー側は煩わしくなってしまうことを覚えておこう。

2.見出しと入力欄は縦に設置する

character_balloon

これもとっても細かいことなんだけど、見出しと入力欄は縦に設置するのがおすすめだよ。

横に設置するのはダメなの?

character_balloon
character_balloon

ユーザーの目線の動きを意識してほしいんだけど、見出しと入力欄が横並びになっていると、目線が横に行ったり下に行ったり、動きが多くなってしまうの。

たしかに!見出しを見て入力欄を見る、次の見出しを見て、、ってジグザグに動くことになっちゃうね。

character_balloon
character_balloon

視線の動きが少ない方が、ユーザーの混乱を防げるし、情報量を少なく見せることもできるんだ。

3.必須項目は明記する

character_balloon

必須項目であることを明記することも重要だよ!

こないだ必須項目じゃないと思って空欄にしていたら、エラーが出てしまったんだ。

character_balloon

分かりづらかったけど実は必須項目だったみたいで、とっても使いにくいフォームだったな。

character_balloon
character_balloon

一度エラー等で流れを止められちゃうと、かなりストレスになるよね。

character_balloon

ユーザーがサクッと簡単に入力できるようにすることは、離脱率を抑えるためにも重要なんだ。

4.ボタンは送信ボタンのみ配置する

character_balloon

お問い合わせページの中に複数のボタンがあったらどう?

どのボタンを押したらいいのか、迷ってしまいそうだね。

character_balloon
character_balloon

そうなの!しかもお問い合わせフォームの目的はフォームの入力を完了して送信してもらうことなのに、他のボタンがあったらお問い合わせフォームから離脱しちゃうよね。

character_balloon

お問い合わせフォームの役割を果たすために、ボタンは「送信ボタン」のみにしよう!

5.入力例は欄外に添える

character_balloon

入力例を欄外に添えることも、細かいけど重要なんだ!

よく入力欄に例が書いてあって、入力すると消えちゃうから困ったことがあったよ。

character_balloon

他の場所に下書きしてから、入力欄にコピペしたこともあったな。

character_balloon
character_balloon

例が消えてしまうと不便だよね。

character_balloon

欄外に添えておくことで、ユーザーにとって入力しやすい状態になるからおすすめだよ。

【HTML&CSS】コピペで使えるお問い合わせフォーム例2選

character_balloon

お待たせしました!

character_balloon

コピペで使えるお問い合わせフォームを準備したよ〜!

HTMLとCSSを準備してくれたんだね!

character_balloon

ありがとう!

character_balloon

1.シンプルなデザイン

character_balloon

まずはシンプルなデザインだよ!

character_balloon

入力項目は名前、メアド、ペットの種類、お問い合わせ内容の4つだよ。 

character_balloon

文字の入力欄と、プルダウンもあるから参考にしてみてね。

整理されていてとっても見やすいね!

character_balloon
character_balloon

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>
character_balloon

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;
}

参考:HTMLとCSSでおしゃれな問い合わせフォームを作る方法

2.項目が角丸になっているデザイン

character_balloon

次は、少し凝ったデザインだよ。

これはおしゃれでかっこいいね。

character_balloon
character_balloon

ちょっと丸みを帯びただけでかなり見た目が変わるから、サイトのデザインやブランディングに合わせて使ってみてね!

character_balloon

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>
character_balloon

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;
}

参考:【コピペ・css】コピペで簡単お問い合わせフォームのデザイン【HP制作・Web制作・参考】

まとめ

character_balloon

お問い合わせフォームのデザインをまとめると、こんな感じだよ。

まとめ

◆お問い合わせフォームとは、サイトに訪問してくてたユーザーとの唯一の接点となる重要な機能


◆お問い合わせフォームはユーザーにとって見やすくて分かりやすくする必要があり、ポイントを抑えて作ることが重要


◆コピペで使えるコードはたくさんあるので、自分のサイトのデザインやブランディングに合わせたデザインを使う

お問い合わせフォームはポイントを抑えて、自分のサイトに合ったデザインで作るのがいいね!

character_balloon

イエローちゃん、本当にありがとうね!

character_balloon
character_balloon

またいつでも聞いてね!

character_balloon

イエロー

SNSマーケティング
バイラルマーケティング
UI/UX

インフルエンサーマーケティングやSNSマーケティングな女の子。まだまだ勉強中なので、これから他のマーケティング手法も頑張って勉強中。

最新の記事一覧
最新の記事一覧