Webフォームのデザイン改善

公開日:

2016年8月2日

この記事は2分で読めます

執筆者 菊池 紗矢香

Webフォームのデザイン改善

ここではZoho CRMの標準機能として用意されている、「Webフォーム」のデザインカスタマイズについてご紹介します。
お問い合わせフォームなどをかんたんに設置でき、
かつ入力されたデータが自動的にCRMに登録されるこの「Webフォーム」は、
Zoho CRMの機能の中でも特に魅力的なものの一つです。
一方で、このフォームは自動でコードが生成されるもののため、
コーディングの知識がないとデフォルト状態での使用となってしまい、
デザイン性があまり良くありません。。
デフォルトのフォームデザインがこちら

webform-point

このフォームの修正課題としては、こんな感じでしょうか。

webform-point

これらの5つの課題をそれぞれ、解消していきます。

①フォームの高さが低い

コピペするしたコードの中に、

<style>
tr , td {
padding:6px;
border-spacing:0px;
border-width:0px;
}
</style>

という記述がありますでしょうか?
これを、

<style>
tr , td {
padding:6px;
border-spacing:0px;
border-width:0px;
}
input{
height:25px;
}
</style>

に変更してみてください。
すると、高さがアップします。

input{
height:25px;
}

25px;の部分の数字を大きくすればするほど、この高さは大きくなります。

②古めかしいプルダウンデザイン

①で追加したコードの }の下などに、以下のコードを追加してみてください。

select{
position: relative;
overflow: hidden;
display: inline-block;
min-width: 192px;
min-width: 12em;
background-color: #ffffff;
background-image: -webkit-linear-gradient(top, #ffffff 0%, #dfe0d9 100%);
background-image: linear-gradient(top, #ffffff 0%, #dfe0d9 100%);
border: 1px solid #c0c0c0;
color: #333;
}

ちょっとだけオシャレになります。

③入力欄の高さが低い

この部分は、

textarea{
height:100px;
}

を同様に追記するだけ。

④ボタンが小さく目立たない

.input-button{
border:solid 1px #429DE1;
padding:8px 15px;
margin:0 0 20px;
font-size:13px;
text-transform:uppercase;
cursor:pointer;
height:35px;
font-weight:600;
background:#429DE1;
}

というコードを同様に追加して下さい。
追加できたら、

<input style='font-size:14px;color:#131307' type='submit' value='送信'/>
<input type='reset' style='font-size:14px;color:#131307' value='リセット'> 

という記述部分を探し、

<input style='font-size:14px;color:#fff;' type='submit' value='送信' class="input-button"/>
<input type='reset' style='font-size:14px;color:#fff;' value='リセット' class="input-button">

に差替てください。

⑤字が小さい

貼り付けたコードのあちこちに、

font-size:12px;

というコードはありませんか?
この12px;14px;などに少し大きくしてみてください。
すべての作業が完了すると、こんな感じになります。

webform-point

デザインのカスタマイズはコーディングの中

関連記事

Zoho CRM - 2023年秋のアップデート

記事を見る

Zoho CRM - 2023年秋のアップデート

2023年秋、Zoho CRM に新たに加わった数々の新機能の中から注目の機能をピックアップしてご紹介します。

オフィスを完全ペーパーレス化へ! OCR×Zoho CRM連携ならここまでできる。

記事を見る

オフィスを完全ペーパーレス化へ!
OCR×Zoho CRM連携ならここまでできる。

OCRとZoho CRM の連携に得られるメリットとは?OCRとZoho CRM の連携方法について徹底解説します。

2023年Zoho CRM の新機能:ビジネス成長をリードする活用術

記事を見る

2023年Zoho CRM の新機能:ビジネス成長をリードする活用術

AI「Zia(ジア)」への機能追加や営業業務の全般を改善する機能強化など、SFA関連の新機能が多数行われました。2023年にかけてZoho CRM に実装された新機能をご紹介します。

0円から始める会議の日程調整DX化

記事を見る

0円から始める会議の日程調整DX化

日程調整ツールとZoho CRM の連携方法について徹底解説。0円から始めるオンライン会議の日程調整DXについて紹介します。

2022年秋に追加されたZoho CRM の新機能まとめ

記事を見る

2022年秋に追加されたZoho CRM の新機能まとめ

2022年秋、Zoho CRM に新たに加わった数々の新機能の中から注目の機能をピックアップしてご紹介します。

クラウドPBXとは?導入すべき理由と利用メリットを解説

記事を見る

クラウドPBXとは?導入すべき理由と利用メリットを解説

近年、急速に普及しつつあるのがWebチャットやSNSを用いたオンライン接客。それでもなお、顧客から選ばれ続けるコミュニケーション手段の一つに「電話」があります。