5つの編集でちょっとおしゃれなWebフォームをつくろう

こんにちは!ゾーホージャパン マーケティングの菊池です。
ここではZoho CRMの標準機能として用意されている、「Webフォーム」のデザインカスタマイズについてご紹介します。
お問い合わせフォームなどをかんたんに設置でき、
かつ入力されたデータが自動的にCRMに登録されるこの「Webフォーム」は、
Zoho CRMの機能の中でも特に魅力的なものの一つです。
一方で、このフォームは自動でコードが生成されるもののため、
コーディングの知識がないとデフォルト状態での使用となってしまい、
デザイン性があまり良くありません。。
デフォルトのフォームデザインがこちら
form
このフォームの修正課題としては、こんな感じでしょうか。
form 2
これらの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;などに少し大きくしてみてください。
すべての作業が完了すると、こんな感じになります。
form3
デザインのカスタマイズはコーディングの中でも特にわかりやすい部分ですので、
色々調べながら、どんなフォームが効果的なのか検証していくといいですね。

PAGE TOP