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

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

webform-point

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

webform-point

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

①フォームの高さが低い

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

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

に差替てください。