フォーム設定の編集【CSSファイル】 

「フォーム設定の編集」からCSSファイルを指定できるようになりました。
これによって各フォームのレイアウトを自由に変更することができます。

form_css2

CSSファイルの指定方法

アスメルで公開しているCSSテンプレートファイルを利用できます。

フォーム用CSSテンプレート

独自にCSSファイルを作成して使用する場合は、
あらかじめご自身のサーバー上にアップロードしたCSSファイルのURLを入力します。

form_css1

アスメルの登録フォームはSSLで暗号化されています。
そのため、指定するCSSファイルもSSLで暗号化されている必要があります。
「https://」から始まるURLで入力してください。
SSL証明書がないと警告表示が出ることがありますので、
サーバーの共有SSLを利用するか、独自SSL証明書を購入して設定してください。

共有SSLの利用方法

form_css3

CSSによるレイアウトの指定

デフォルトのCSSを修正する形でフォームのCSSを変更してみましょう。
以下のURLを開き、内容を全てコピーしたファイルを作成します

https://1lejend.com/stepmail/style.css

内容を任意に書き換えて、お使いのサーバーにアップロードします。
アップロード先のURLを指定すればフォームのレイアウトが変更されます。

ここでは主に色の変更方法をご紹介します。
赤で表示されている部分を任意の文字色に変更してみましょう。

16進数による色の指定方法

【ヘッダー・フッターの背景色を変更する】

header.global {
clear: both;
padding: 10px 0;
background: #333;
color: #fff;
margin-top: 15px;
}

【ヘッダー・フッターの文字色を変更する】

header.global {
clear: both;
padding: 10px 0;
background: #333;
color: #fff;
margin-top: 15px;
}

【フォームの項目欄の背景を変更する】

table th {
width: 25%;
padding: 5px 10px;
border: 1px solid #ccc;
background: #FFFFCC; /* #eee; */
text-align: left;
vertical-align: middle;
}

【フォームの項目欄の文字色を変更する】

table th {
width: 25%;
padding: 5px 10px;
border: 1px solid #ccc;
background: #FFFFCC;/* #eee; */
text-align: left;
vertical-align: middle;
color:#000;
}

 

部分的な変更

一部だけを変更したい場合、CSSでファイルを指定するよりも、
直接CSSを記述したほうが簡単です。

「入力画面ヘッダー(登録フォーム上部)」に下記のように
<style> </style>で挟み込むことによってCSSを記述することができます。

<style>
header.global {
clear: both;
padding: 10px 0;
background: #333;
color: #fff;
margin-top: 15px;
}
</style>
カテゴリー: CSS, フォーム パーマリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)