デザイン
更新日: 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マーケティングな女の子。まだまだ勉強中なので、これから他のマーケティング手法も頑張って勉強中。
最新の記事一覧
7割の人にとって味が最も重要！？エナジードリンクのアンケート調査結果をご紹介！
アンケート・調査結果
副業で5万円以上稼ぐ人は15%しかいない？副業の実態について調査しました！
アンケート・調査結果
53%の人は最後に浴衣を着てから5年以上経った？！浴衣の実態を徹底調査！
アンケート・調査結果
約82%の人が部屋着のズボンを履いてテレワークをしている！テレワークの現状を調査しました！
アンケート・調査結果
「1杯目はビール！」は約6割しかいない！？お酒についてアンケート調査しました！
アンケート・調査結果
企画書とは？目的や作り方、おすすめのテンプレートを紹介
マーケティング
取引や計算で使われるグロスとは？使用例や注意点を徹底解説！
マーケティング
「スーパーフレックス制度」とは？導入に向けて注意する点を解説！
マーケティング
ペルソナ設定とは？目的と作り方、注意点について徹底解説！
マーケティング
視聴者を魅了し続ける冠番組とは？成功している冠番組の特徴を解説
ビジネス
有名企業のペルソナマーケティング事例5選！何に活用できるか解説
マーケティング
破ると法律違反になるステマとは？過去のステマ事件や対策を紹介
マーケティング
多くの市場で危惧されるコモディティ化とは？コモディティ化対策5選
マーケティング
社会に影響を与えるマスメディアとは？影響力やリスクについて解説
マーケティング
カーボンニュートラルとは？実現のための取り組みや課題も解説
ビジネス
ネゴシエーションとは？ビジネスにおける意味と成功のポイントを解説
ビジネス
音声SNSとは？注目される理由やメリットを解説【アプリも紹介】
ディスプレイ広告
オーガニックサーチとは？広告なしで質の高い集客を実現できる！
SEO
問題解決フレームワークの活用法は？使用するメリットや注意点も解説
ビジネス
ブランドロイヤリティとは？顧客ロイヤリティとの違いを解説
広報・PR
最新の記事一覧
7割の人にとって味が最も重要！？エナジードリンクのアンケート調査結果をご紹介！
アンケート・調査結果
副業で5万円以上稼ぐ人は15%しかいない？副業の実態について調査しました！
アンケート・調査結果
53%の人は最後に浴衣を着てから5年以上経った？！浴衣の実態を徹底調査！
アンケート・調査結果
約82%の人が部屋着のズボンを履いてテレワークをしている！テレワークの現状を調査しました！
アンケート・調査結果
「1杯目はビール！」は約6割しかいない！？お酒についてアンケート調査しました！
アンケート・調査結果
企画書とは？目的や作り方、おすすめのテンプレートを紹介
マーケティング
取引や計算で使われるグロスとは？使用例や注意点を徹底解説！
マーケティング
「スーパーフレックス制度」とは？導入に向けて注意する点を解説！
マーケティング
ペルソナ設定とは？目的と作り方、注意点について徹底解説！
マーケティング
視聴者を魅了し続ける冠番組とは？成功している冠番組の特徴を解説
ビジネス
有名企業のペルソナマーケティング事例5選！何に活用できるか解説
マーケティング
破ると法律違反になるステマとは？過去のステマ事件や対策を紹介
マーケティング
多くの市場で危惧されるコモディティ化とは？コモディティ化対策5選
マーケティング
社会に影響を与えるマスメディアとは？影響力やリスクについて解説
マーケティング
カーボンニュートラルとは？実現のための取り組みや課題も解説
ビジネス
ネゴシエーションとは？ビジネスにおける意味と成功のポイントを解説
ビジネス
音声SNSとは？注目される理由やメリットを解説【アプリも紹介】
ディスプレイ広告
オーガニックサーチとは？広告なしで質の高い集客を実現できる！
SEO
問題解決フレームワークの活用法は？使用するメリットや注意点も解説
ビジネス
ブランドロイヤリティとは？顧客ロイヤリティとの違いを解説
広報・PR
