フォームの見栄えを良くするCSS

  • このページを後で読む...
  • このエントリーをはてなブックマークに追加
  • メールフォーム

    フォームはスクイーズページに付きものですが、スタイルを編集しないと下のようにつまらないものになってしまいます。

    ■ビフォー

    *このフォームはサンプルです。

    あまり見た目が悪いと、コンバージョンにも影響しかねません。
    CSSを編集すれば、下のように見栄えが良くなります。

    ■アフター

    *このフォームはサンプルです。


    Point

    ・submitボタンをCSSで編集
    ・テキストフォームに初期プレースホルダーを設定
    ・レスポンシブウェブデザインに対応するため、フォームの幅をウィンドウサイズに合わせ可変に。


    このフォームのHTML


    <div class="test-form-box"><form action="" method="post">
    <input class="form-text" type="email" value="" placeholder="メールアドレスを入力" />
    <textarea class="form-text" name="example" rows="10" placeholder="メッセージ"></textarea>
    <input class="form-submit" name="submit" type="submit" value="送信" /></form>
    </div>
    

    このフォームのCSS

    <style>
    .test-form-box{width:80%;margin:auto;text-align:center;}
    
    /*プレースホルダーの色*/
    input:::-webkit-input-placeholder { color: #666; }
    input::-moz-placeholder { color: #666; }
    
    /*入力時の背景色*/
    input:focus, select:focus, textarea:focus {
    background: #bde9ba;
    }
    
    /*入力フォームの設定*/
    .form-text{	
    width:100%;
    font-size:1.4em;
    font-weight:bold; 
    border:1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    color: #000;
    background:#f5f5f5;
    margin-bottom:20px;
    }
    
    /*submitボタンの設定*/
    .form-submit{
    margin-top:1em;
    width:100%;
    padding:0.2em;
    font-size:1.6em;
    font-weight:bold;
    border:1px solid #f90;
    border-radius: 5px;
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 5px;
    color:#fff;
    background: #F90; /* for non-css3 browsers */
    box-shadow: 3px 3px 3px rgba(0,0,0,0.25);
    -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.25);
    -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.25);}
    .form-submit:hover{
    background: #F60; /* for non-css3 browsers */
    }
    
    </style>