今回はCyfonsの登録フォームを、LPテンプレートColorful用にデザインをカスタマイズしてみます。

LPテンプレートColorfulは誰でも直感操作でカンタンにLPが作れる便利なテンプレートなのですが、例のごとくCyfonsの登録フォームをベタ貼りだと見栄えが良くない・・・ということで簡単なCSS設定で最低限のデザインをしていきましょー。

ColorfulのページでCyfons登録フォームのHTMLを貼る

例のごとくCyfonsのHTMLをテキストエディタで貼りましょう。

今回のサンプルページ

 

<div class="cyfons">
<form accept-charset="UTF-8" action="http://yonaminetakayuki.jp/freemember/formadd/?group_id=1" method="post">
<table border="0">
<tbody>
<tr>
<td><input id="firstname" name="firstname" type="text" value="" placeholder="姓" /> <input id="lastname" name="lastname" type="text" value="" placeholder="名" /></td>
</tr>
<tr>
<td><input id="Email1" name="email1" type="text" value="" placeholder="メールアドレス" /></td>
</tr>
<tr>
<td colspan="2" align="center"><input name="status" type="hidden" value="LOGIN" />
<input id="login" name="login" type="submit" value=" 無料登録 " /></td>
</tr>
</tbody>
</table>
</form>
</div>

 

CSSでフォームのデザインをする

次にjetpackのカスタムCSSなどの機能を使って、以下のCSSを記述。

.cyfons {
	background: #005589;
}

.cyfons form {
	width: 90%;
	text-align: -webkit-center;
}

.cyfons table {
	border: none;
}

.cyfons td {
	border: none !important;
	text-align: center;
}

.cyfons input {
	width: 100%;
	font-size: 50px;
	font-weight: 700;
	border-radius: 10px !important;
	padding: 10px !important;
	margin: 10px 25px;
	border: none !important;
}

.cyfons input[type="submit"] {
	width: 100%;
	height: 95px;
	padding: 0 18px;
	color: #fff;
	cursor: pointer;
	border-style: none;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
	background-color: #f12b24;
	background-image: -moz-linear-gradient(top,#0088cc,#0044cc);
	background-image: -webkit-gradient(linear,0 0,0 100%,from(#0088cc),to(#0044cc));
	background-image: -webkit-linear-gradient(top,#0088cc,#0044cc);
	background-image: -o-linear-gradient(top,#0088cc,#0044cc);
	background-image: linear-gradient(to bottom,#f12b24,#ff0000);
	background-repeat: repeat-x;
	border-color: #0044cc #0044cc #002a80;
	border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc',endColorstr='#ff0044cc',GradientType=0);
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

@media screen and (max-width: 768px) {
	.cyfons input {
		width: 100%;
		font-size: 50px;
	}

	.cyfons input[type="submit"] {
		width: 100%;
		font-size: 60px;
	}
}

@media screen and (max-width: 414px) {
	.cyfons input {
		font-size: 25px;
	}

	.cyfons input[type="submit"] {
		width: 80%;
		font-size: 40px;
	}
}

こんな感じ。ちょっと全体的にデカイ？（笑）
cyfons_colorful_customize1