フォームの見た目をカスタマイズ

説明を左に表示するフォームの場合

テーブルでデザインしたフォームのような形に仕上げることは、Jimdoでは難しかったりしますが、ちょっと工夫するだけで、見た目はかなり変わります。

参加フォーム

お名前と参加人数を入力して送信ボタンを押してください!

メモ: * は入力必須項目です

※テスト用に「example.com」のアドレスを指定してますので、間違って送信ボタンを押しても誰にも届きませんのでご安心ください。


CSS

<style type="text/css">


    .j-formnew{

        padding:10px 20px !important;

        background:#F7F7F7;

        border:1px solid #CCC;

        border-radius:6px;

    }


    .cc-m-form-view-element{

        padding:5px 0 !important;

        margin:0;

    }

    

    .cc-m-form-view-element textarea,

    .cc-m-form-view-element select,

    .cc-m-form-view-element input{

        margin:0;

        padding:3px 5px;

        font-size:14px;

        height:auto;        

    }

    

    .cc-m-form-submit{

        padding-top:10px !important;

        margin-top:10px;

    }


    .cc-m-form-submit input{

        padding:3px 20px;

    }

    

    .j-m-required{

        color:#F00;

        margin-left:10px;

    }

</style>

▼ タグの貼り付け方はここ マウスを当てると画像が開きます。

有料版なら、指定したページにだけ反映させることが出来ます。

設定からヘッダー部分を編集を選択して、「個別ページまたはブログ記事」を選択してページを指定すれば必要があるページにだけ反映させることが可能です。

この記事がいいなと思ったらメールマガジンに登録していただけると嬉しいです。
メールアドレスを入力して登録ボタンを押してください。


株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422