ListFinderのフォームはCSSやJavascriptを記載することでデザインをカスタマイズすることが可能です。
※誠に恐れ入りますが、コードの記載方法はサポート対象外となります。Webページに埋め込んだ場合にうまく表示されない、といった場合も修正方法のご案内はできかねてしまいますので、自社サイト管理者様や制作会社様への確認をお願いいたします。
デザイン例
上記のフォームを作成するためのコードは以下となります。
設問に応じて一部編集が必要になりますので、実際に使用される際はお手元での確認、テストをお願いいたします。
①フォーム＞フォーム一覧＞CSS編集 に張り付けるコード
/* ===================================
基本設定
=================================== */
html{ overflow-y:scroll; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
font-weight: normal;
font-style: normal;
}
li { list-style: none; }
/* ===================================
共通
=================================== */
/* フォント */
body {
font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;color:#032240;
}
/* ===================================
画面全体のレイアウト
=================================== */
/* 画面全体の表示設定 */
body {
background:#FFF; /* 背景色 */
text-align:center; /* フォームエリアを中央に表示 */
}
/* フォームエリア全体の設定 */
div.container {
width:840px; /* 画面の横幅 */
background:white; /* 背景色 */
border-radius: 0px; /* 追記 */
font-size:15px; /* フォントの初期サイズ */
color:#032240; /* フォントの初期カラー */ /* 追記：変更 */
margin:50px auto; /* 画面の中央に表示 */ /* 追記：変更 */
text-align:left; /* 左寄せ */
}
@media screen and (max-width: 767px) { /*レスポンシブ対応 */
div.container {
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0 10px;
}
}
/* ===================================
ヘッダー
=================================== */
.logo {
background:#e9f3fd;
height: 60px;
}
.logo img{
height: 40px;
margin: 10px;
}
.title{
font-size: 24px;
/*margin: 20px;*/
color:#032240;
text-align: center;
font-weight: bold;
padding-top: 30px;
}
@media screen and (max-width: 767px) { /*レスポンシブ対応 */
.title {
margin-top: 0 !important;
padding-top: 30px !important;
}
}
.step{
height: 50px;
padding: 20px;
}
.step ul {
display: table;
}
@media screen and (max-width: 767px) { /*レスポンシブ対応 */
.step ul {
width: 100% !important;
float: none !important;
}
}
@media screen and (max-width: 767px) { /*レスポンシブ対応 */
.step li {
width: 30% !important;
display: inline-block !important;
margin-right: 5px !important;
}
}
/* 入力エラーメッセージのデザイン */
div.message {
padding:5px 10px 5px 10px; /* メッセージテキストと背景色の隙間のサイズ */
margin:10px 13px 10px 13px; /* 上 右 下 左 の隙間のサイズ */
font-size:14px;
font-weight:bold;
color:Crimson;
background:MistyRose;
}
/* 公開終了メッセージのデザイン */
div.finished-message {
padding:5px 10px 5px 10px; /* メッセージテキストと背景色の隙間のサイズ */
margin:10px 13px 10px 13px; /* 上 右 下 左 の隙間のサイズ */
font-size:14px;
font-weight:bold;
color:Crimson;
background:MistyRose;
}
/* ===================================
フッター
=================================== */
.footer {
background:#e9f3fd;
height: 20px;
}
.privacy_policy {
font-size: 12px;
margin: 10px auto;
}
/* ===================================
設問エリアのレイアウト
=================================== */
/* 設問エリア全体の設定 */
div.wrapper {
width:800px; /* 画面の横幅 */
padding:30px 40px;
background:#F3F3F3;/* 画面の背景色 */
box-sizing: border-box;
margin: 0 auto;
}
@media screen and (max-width: 767px) { /*レスポンシブ対応 */
div.wrapper {
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}
/* 設問の表 */
table.items {
border:none;
}
/* 設問の行 */
tr.item { } /* 必要であれば行のデザインを設定することができます */
/*設問名のセルのデザイン */
td.label {
float:left;
width:35%; /* セルの横幅 実際の設問名の文字の長さに合わせて調整してください */
padding-right: 30px;
font-size:16px; /* 文字の大きさ */
font-weight: bold;/* 文字の太さ */
}
@media screen and (max-width: 767px) { /*レスポンシブ対応 */
td.label {
float: none;
display: block;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: .5rem;
}
}
/* 設問の入力セルのデザイン */
td.value {
float:right;
width:55%; /* セルの横幅 入力コントロールの幅に合わせて調整してください */
font-size:16px; /* 文字の大きさ */
line-height:1.8; /* 行の高さ */
}
@media screen and (max-width: 767px) { /*レスポンシブ対応 */
td.value {
float: none;
display: block;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: .5rem;
}
}
/* 入力セルの「氏」「名」の文字のデザイン */
span.label_name {
padding-right:5px;
font-size:16px;
}
/* 設問の入力例/説明セルのデザイン */
td.comment {
float:right;
width:55%;
font-size:11px;
padding:5px 0 10px;
}
@media screen and (max-width: 767px) { /*レスポンシブ対応 */
td.comment {
float: none;
display: block;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: .5rem;
}
}
/* ===================================
入力フィールドのデザイン
=================================== */
/* セレクトボックス、テキストボックス、テキストエリア、ボタン共通のデザイン */
select,input,textarea {
font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif; /* フォントの種類 */
line-height:1.8; /* 行の高さ */
font-size:80%; /* 文字の大きさ */
padding:5px; /* 内側の余白 上下左右 */
color:#032240; /* 文字の色 */
border: solid 1px #DDDDDD; /* 枠線の種類 太さ 色 */
background-color: #fff; /* 背景色 */
box-sizing: border-box;
}
/* それぞれの入力フィールドにカーソルが移動したときに背景の色が変わります。不要な場合は削除してください。 */
input[type="text"]:focus { background-color:MintCream; } /* テキストボックス */
select:focus { background-color:MintCream; } /* プルダウン */
textarea:focus { background-color:MintCream; } /* テキストエリア */
/* テキストボックスのデザイン */
input[type="text"] {
width: 100%; /* 横幅 */
}
/* 「氏」「名」の入力フィールドのデザイン */
/* 設問順によって効かなくなります */
/* 上から何番目かを :nth-child(※) の※の中に入れてください */
table.items .item:nth-child(4) td.value {
display: flex;
justify-content: space-between;
}
table.items .item:nth-child(4) input {
width: 42%; /* テキストボックスの横幅 */
}
/* セレクトボックスのデザイン */
select {
width: 100%; /* 横幅 */
box-sizing: border-box;
height: 34px; /* 高さ */
}
/* チェックボックス／ラジオボタンの入力ボックスのデザイン */
input[type="checkbox"] ,
input[type="radio"] {
border-radius: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
width: 15px; /* 横幅 */
height: 15px; /* 高さ */
border: solid 1px #DDDDDD; /* 枠線の種類 太さ 色 */
background-color: #fff; /* 背景色 */
vertical-align: -2px; /* 上下位置の調整 */
}
/* チェックボックス／ラジオボタンの入力ボックスがチェックされた時のデザイン */
input[type="checkbox"]:checked:before,
input[type="radio"]:checked:before{
position: absolute;
top: 1px;
left: 4px;
transform: rotate(50deg);
width: 4px;
height: 8px;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
content: '';
}
/* テキストボックスのデザイン */
input[type="textarea"] {
width: 100%; /* 横幅 */
}
/* ===================================
必須項目のマークおよびメッセージなど
=================================== */
/* 必須項目のマーク */
span.required {
margin-left:5px;
font-size:60%;
color:orangered;
vertical-align: 2px;
display: inline-block;
}
span.required:after {
content:"必須"; /* ここを編集することで表示される文字を変更できます */
border: solid 2px; /* 枠線の種類 太さ */
padding: .3em 1em; /* 枠線の内側の余白 上下 左右 */
border-radius: 15px; /* 角丸の調整 */
font-weight: bold; /* 文字の太さ */
}
/* 必須項目についての説明文 */
p.required_msg {
text-align:right; /* 右寄せ */
font-size:80%; /* 大きさ */
color:orangered; /* 色 */
font-weight: bold; /* 太さ */
margin-right:4px; /* 右側の余白 */
margin-bottom: 20px; /* 下の余白 */
}
@media screen and (max-width: 767px) { /*レスポンシブ対応 */
p.required_msg {
text-align: center;
}
}
p.required_msg:after {
/* ここを編集することで表示される文字を変更できます */
content:"「※必須」となっている項目は必ず入力してください。";
}
/* ===================================
ボタンのデザイン
=================================== */
/* ボタンの表示エリアの設定 */
div.button_area {
width:850px;
/*margin:10px auto 10px auto; */ /* 中央に表示、上下に10pxの余白 */
/*background:MintCream;*//* 背景色 */
padding:0 0 50px 0; /* ボタンとの余白 上 右 下 左 */
text-align:center; /* 中央にボタンを表示 */
}
@media screen and (max-width: 767px) { /*レスポンシブ対応 */
div.button_area{
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}
/* 確認／送信／戻る／登録ボタン */
input[type=button] {
font-size:16px; /* 文字の大きさ */
background:orangered; /* ボタンの色 */
padding:10px 100px; /* ボタンの文字の 上 右 下 左 の隙間のサイズ */
margin:0px 10px 0px 10px; /* 確認画面に表示される2つのボタンの左右の余白サイズ */
color:white; /* 文字の色 */
font-weight:bold; /* 文字の太さ */
border-radius: 40px; /* 角丸の調整 */
}
input[type=button]:hover {
cursor: pointer; /* マウスオーバーした時の動き */
}
@media screen and (max-width: 767px) { /*レスポンシブ対応 */
input#lf_form_submit_button {
padding: 5px 50px;
width: 80%;
margin: 0 auto;
}
}
/* ===================================
入力確認画面の追加デザイン
=================================== */
/* 入力された文字のデザイン（完了画面も共通） */
p.value {
font-size:100%; /* 大きさ */
}
form[name="frm_formconfirm"] div.wrapper {
padding: 30px 40px 10px; /* 入力された内容エリアの内側の余白 上 左右 下 */
margin-bottom: 30px; /* 入力された内容エリアの下側の余白 */
}
form[name="frm_formconfirm"] td.label {
margin-bottom: 1em; /* 設問名のセルの下の余白 */
}
form[name="frm_formconfirm"] td.value {
margin-bottom: 1em; /* 入力内容のセルの下の余白 */
}
/*レスポンシブ対応 */
@media screen and (max-width: 767px) {
form[name="frm_formconfirm"] input[type=button] + input[type=button] {
margin-top: 1em; /* 送信ボタンの上の余白 */
}
}
/* ===================================
完了画面の追加デザイン
=================================== */
form[name="frm_formthanks"] div.wrapper {
padding: 0;
}②フォーム＞フォーム一覧＞ヘッダ/フッタ
入力画面のヘッダエリアに張り付けるコード
<div class="header">
<p class="title" style="margin-top:50px;padding-top: 0px;
">サンプルフォーム<br>
</p>
<div class="step">
<ul style="float:right; width:360px;height:42px;">
<li style="display: table-cell;margin-right: 20px;border-bottom:2px solid orangered; width:120px; text-align:center;height: 40px;color:orangered">ご入力</li>
<li style="display: table-cell;margin-right: 20px;border-bottom:2px solid #CCC; width:120px; text-align:center;height: 40px;">ご確認</li>
<li style="display: table-cell;margin-right: 20px;border-bottom:2px solid #CCC; width:120px; text-align:center;height: 40px;">完了</li>
</ul>
</div>③フォーム＞フォーム一覧＞ヘッダ/フッタ
確認画面のヘッダエリアに張り付けるコード
<div class="header">
<p class="title" style="margin-top:50px;padding-top: 0px;
">サンプルフォーム<br>
</p>
<div class="step">
<ul style="float:right; width:420px;height:42px;">
<li style="display: table-cell;margin-right: 20px;border-bottom:2px solid #CCC; width:140px; text-align:center;height: 40px;">ご入力</li>
<li style="display: table-cell;margin-right: 20px;border-bottom:3px solid orangered; width:140px; text-align:center;height: 40px;color:orangered">ご確認</li>
<li style="display: table-cell;margin-right: 20px;border-bottom:2px solid #CCC; width:140px; text-align:center;height: 40px;">完了</li>
</ul>
</div>④フォーム＞フォーム一覧＞ヘッダ/フッタ
完了画面のヘッダエリアに張り付けるコード
<div class="header">
<p class="title" style="margin-top:50px;padding-top: 0px;
">サンプルフォーム<br>
</p>
<div class="step">
<ul style="float:right; width:420px;height:42px;">
<li style="display: table-cell;margin-right: 20px;border-bottom:2px solid #CCC; width:140px; text-align:center;height: 40px;">ご入力</li>
<li style="display: table-cell;margin-right: 20px;border-bottom:2px solid #CCC; width:140px; text-align:center;height: 40px;">ご確認</li>
<li style="display: table-cell;margin-right: 20px;border-bottom:3px solid orangered; width:140px; text-align:center;height: 40px;color:orangered">完了</li>
</ul>
</div>
<div>
<p style="text-align:center; margin:40px 0;">ご回答ありがとうございます。下のボタンより、特典資料をご覧いただけます。<br>
<br>
</p>
</div>
