SITECORE MANIA 技術ブログ

2017.06.02 コーディング

市島

市島

WFFMで入力必須項目の「*」を先頭に位置調整する

Sitecore7.2でWeb Forms For Marketers(WFFM)を使ってお問い合わせフォームを作る際、「お名前」や「ご住所」など入力必須項目につける「*」の位置が後ろになってしまいます。

Web Forms For Marketers

これをCSSだけで調整していきたいと思います。

*

html上、inputタグの後ろに「*」がきているのが原因で、WFFMの仕様上こうなってしまいます。
さらに、WFFMで読み込まれてしまうDefault.cssでlabelとinputを囲っているdivをfloatさせているため、必ず横並びのデザインになってしまいます。

これをCSSで修正していきます。
まずは「*」の位置をpositionを使って調整します。

.scfSingleLineTextBorder {
	position: relative;
}
.scfSingleLineTextLabel {
	padding: 0 0 0 1em;
}
.scfRequired {
	position: absolute;
	top: 0;
	left: 10px;
}

Web Forms For Marketers

次に横並びを縦並びに修正します。

.scfSingleLineTextLabel {
	float: none;
}
.scfSingleLineGeneralPanel {
	float: none;
}

Web Forms For Marketers

この記事を読んだ人はこちらの記事も読んでます

お問い合わせ・資料請求

LYZONにご相談下さい

ご依頼ご質問等まずは私達にお気軽にご相談下さい。

お電話でのお問い合わせ

03-5803-0587平日9:00~18:00