エキスパで発行されるフォーム設置用タグにCSSでレイアウト調整

こんにちは、WPホームページ研究所の運営サポートチーム（@WP_LABO）です。

WP SEO LandingPage Pluginでエキスパのフォームに最適化したCSSを追加準備中です。エキスパで発行されるフォーム設置タグは以前に別記事でご紹介させていただきました。下記も併せてご参考くださいませ。

エキスパートメール（エキスパ）のフォーム設置時に発行されるタグ

本日はレイアウト調整の手順を解説いたします。

エキスパのフォーム設置タグをCSSでレイアウト調整
まとめ

エキスパのフォーム設置タグをCSSでレイアウト調整

実際にレイアウトを変更する流れは下記となります。

１. ASPサービス側の発行タグを確認

メルマガ配信スタンドによってはフォーム設置タグのhtmlは異なります。大半の配信スタンドはウェブサイトに設置する専用タグが準備されているので状況を見ながらタグを差し込みましょう。

<form action="https://example.com/url" method="post">
	<input name="Publisher_Id" type="hidden" value="123456" />
	<input name="Form_Cd" type="hidden" value="AbCdEf" />
	<input name="charcode" type="hidden" value="auto" />
	<dl class="pub_form">
		<dt>お名前（姓・名）</dt>
		<dd><input name="NameSei" type="text" value="" /></dd>
		<dd><input name="NameMei" type="text" value="" /></dd>
		<dt><span style="color: red;">*</span>メールアドレス</dt>
		<dd><input name="Mail" type="text" value="" /></dd>
		<dt>ご意見入力欄</dt>
		<dd><textarea name="C01"></textarea></dd>
	</dl>
	<hr />
	<div class="center"><input name="submit" type="submit" value="送信" /></div>
</form>

タグによっては外部からCSSをコントロールしづらい構造になっています。レイアウトのカスタマイズに不便があればhtmlタグを足したり、大枠で全体を括ったり使いやすい状態へ微調整するのがベストです。

そのまま設置すると部分的にフォーム同士の隙間がなかったり、送信ボタンの上に線（hr）が表示されたりと見た目的にはバランスがよくありませんよね。この部分に手を加えるにはCSSが必要となります。

２. レイアウト調整に必要なCSSを追記

今回は配置しやすさを考えてformタグの外側にdivタグを追加しています。

/* フォームレイアウト用のCSS */
dl.pub_form,
dl.pub_form input {
	margin-bottom: 15px;
}

div.form form hr {
	display:none;
}

div.form form div.center input {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	padding: 11px 15px;
	max-width: 320px;
	color: #333333;
	font-size: 18px;
	font-weight: 700;
	background-color: #cccccc;
	box-shadow: 0 5px 0 #aaaaaa;
	transition: 0.3s;
	cursor: pointer;
}

div.form form div.center input:hover {
	transform: translateY(3px);
	text-decoration: none;
	box-shadow: 0 2px 0 #aaaaaa;
}

隙間を持たせてボタンのデザインも変更。名前は姓と名で横並びにするのもいいかもしれませんね。