デザイン
更新日: 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マーケティングな女の子。まだまだ勉強中なので、これから他のマーケティング手法も頑張って勉強中。
最新の記事一覧
広報戦略とは？必要な理由や策定方法、フレームワークを解説！
広報・PR
マテハンとは？初心者向けに意味を解説！マテハン機器の種類も紹介
ビジネス
デザイン経営とは？概要やメリット、取り組み方法を徹底解説
ビジネス
ミラーリング効果とは？ビジネスで信頼を深めるための方法を紹介
ビジネス
Z世代マーケティングの手法を紹介！Z世代の名前の由来や特徴も解説
マーケティング
サンクコスト効果の例は？意味やマーケティングへの活用例も解説
ビジネス
2025年問題とは？どのような影響があるか解説【国の対策も】
ビジネス
やる気とは？努力してもできないものはできない理由を解説
ビジネス
モチベーションの上げ方を紹介！理想と現実のギャップを生かそう！
ビジネス
ノベルティとは？コツや作り方、販促品との違いについても解説！
広報・PR
リーフレットとは？作る目的や作り方、パンフレットとの違いを解説！
広報・PR
広報とは？種類や仕事内容、PRとの違いについても解説！
広報・PR
プレスリリースの書き方は？構成要素やポイント、コツを解説！
広報・PR
ブランド戦略とは？必要な理由や戦略の立て方について解説！
広報・PR
戦略PRとは？重要な理由や実施方法、注意点などについて解説！
広報・PR
広報とPRの違いは？目的や仕事内容の違い、スキルについて解説！
広報・PR
広報とIRの違いは？IRの仕事内容や注意点についても解説！
広報・PR
【初心者向け】WordPressのショートコードの使い方を解説！
wordpress
ステークホルダーとは？重要性や良好な関係を築くポイントを解説
経営・会計
フィードバックとは？意味や効果、具体的な手法を徹底解説
ビジネス
最新の記事一覧
広報戦略とは？必要な理由や策定方法、フレームワークを解説！
広報・PR
マテハンとは？初心者向けに意味を解説！マテハン機器の種類も紹介
ビジネス
デザイン経営とは？概要やメリット、取り組み方法を徹底解説
ビジネス
ミラーリング効果とは？ビジネスで信頼を深めるための方法を紹介
ビジネス
Z世代マーケティングの手法を紹介！Z世代の名前の由来や特徴も解説
マーケティング
サンクコスト効果の例は？意味やマーケティングへの活用例も解説
ビジネス
2025年問題とは？どのような影響があるか解説【国の対策も】
ビジネス
やる気とは？努力してもできないものはできない理由を解説
ビジネス
モチベーションの上げ方を紹介！理想と現実のギャップを生かそう！
ビジネス
ノベルティとは？コツや作り方、販促品との違いについても解説！
広報・PR
リーフレットとは？作る目的や作り方、パンフレットとの違いを解説！
広報・PR
広報とは？種類や仕事内容、PRとの違いについても解説！
広報・PR
プレスリリースの書き方は？構成要素やポイント、コツを解説！
広報・PR
ブランド戦略とは？必要な理由や戦略の立て方について解説！
広報・PR
戦略PRとは？重要な理由や実施方法、注意点などについて解説！
広報・PR
広報とPRの違いは？目的や仕事内容の違い、スキルについて解説！
広報・PR
広報とIRの違いは？IRの仕事内容や注意点についても解説！
広報・PR
【初心者向け】WordPressのショートコードの使い方を解説！
wordpress
ステークホルダーとは？重要性や良好な関係を築くポイントを解説
経営・会計
フィードバックとは？意味や効果、具体的な手法を徹底解説
ビジネス
