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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

WPホームページ研究所運営サポートチーム監修のオムスビ(@OMUSUVIcom)です。

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

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

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

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

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

1. 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が必要となります。

2. レイアウト調整に必要な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;
}

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

もっと細かく設定する場合はhtml側を修正してもOKです。各フォームに透かし文字を足すのもいいですよね。足す場合はhtmlに追記するか外部からJavaScriptで共通化するなど色々な方法があります。

3. 配置に問題がないか念入りにチェック

CSSをページ単位で追加する場合は下記のような追加も可能です。ページ単位でCSSコードを追加できるかどうかは導入しているテーマやプラグインにもよるので最適な設定を行うようにしてくださいね。

上記は「htmlのhead内にCSSをインライン記述する方法」で追記しています。

まとめ

本日は「エキスパのフォーム設置タグをCSSでレイアウト調整する方法」を解説させていただきました。

フォームの表示幅を指定などご希望に合わせてレイアウト変更するのがおすすめです。まだまだ追加したい機能もたくさんあるのでタイミングを見ながら「WP SEO LandingPage Plugin」に反映させていただきますね。

ぜひご参考ください。

最新式の無料プラグインを事前公開

WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
改良されたプラグインを確認する

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報だけでなくお好みの機能をいただければ専属スタッフが心を込めて真摯に対応させていただきます。お気軽にお問い合わせください。

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

💻SEOに強いWordPressテーマ

⇒ 大人気のワードプレステーマ「賢威」  2万を超えるお客様がご使用中!

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください