【カスタマイズ例あり】お問い合わせフォームを公開しました

ずっと無かったのですが、ようやくお問い合わせページを公開いたしました。
Snow Monkeyテーマに使えるかもしれないカスタマイズ例も記載していますので、よろしければご使用ください。

Snow Monkeyテーマを制作されているキタジマさんは、お問い合わせフォームのMW WP Formプラグインも作られているので使用させていただきました。

表示のCSS記述などに関して

Snow Monkeyの標準だと意外と崩れて表示されるので、CSSで調整をしています。
記述例は下記にCSSを書いておきますので、ご自由にお使いください。

カスタマイズや設定をすると…

こんな風になるはずです。

注意

Snow Monkeyテーマで使う事を想定しています。
また、1カラム、幅1024での表示確認をしています。

フォームの記述例

<ol class="form_step">
<li class="form_step_input">STEP.1<small>内容の入力</small></li>
<li class="form_step_confirm">STEP.2<small>内容を確認</small></li>
<li class="form_step_complete">STEP.3<small>お問い合わせ完了</small></li>
</ol>
<fieldset>
<legend>お問い合わせフォーム</legend>
<div class="form_supplement">
<ul>
<li><span class="form_must">必須</span>と記載されている項目は、入力が必ず必要となる項目です。忘れずに入力をお願いします。</li>
<li><span class="form_any">任意</span>と記載されている項目は、入力は任意です。入力していただかなくても問題ありません。</li>
<li>送信をされる前に、必ず全ての入力内容を確認してください。</li>
</ul>
</div>
<div class="form_field">
<span class="form_must">必須</span><label for="form_name" class="form_item_label">お名前</label>
<div class="form_item_field">[mwform_text name="name" id="form_name" class="form_item_input" placeholder="入力してください"]</div>
<span class="form_must">必須</span><label for="form_email" class="form_item_label">ご連絡先メールアドレス</label>
<div class="form_item_field">[mwform_email name="email" id="form_email" class="form_item_input" placeholder="入力してください"]</div>
<span class="form_must">必須</span><label for="form_content" class="form_item_label">お問い合わせ内容</label>
<div class="form_item_field">[mwform_textarea name="content" id="form_content" class="form_item_input" placeholder="入力してください"]</div>
[mwform_backButton class="form_item_back" value="戻る"]
[mwform_submitButton name="submit" class="form_item_submit" confirm_value="確認する" submit_value="送信する"]
</div>
</fieldset>

完了画面の設定

<ol class="form_step">
<li class="form_step_input">STEP.1<small>内容の入力</small></li>
<li class="form_step_confirm">STEP.2<small>内容を確認</small></li>
<li class="form_step_complete">STEP.3<small>お問い合わせ完了</small></li>
</ol>
<fieldset>
<legend>お問い合わせが完了しました</legend>
<p>お礼本文をここに書きます</p>
</fieldset>

CSSの記述例

.form_step {
	list-style: none;
	overflow: hidden;
	margin: 0;
	width: 100%;
}

.form_step li {
	position: relative;
	display: block;
	padding: 4px 0 4px 48px;
	margin-bottom: 8px;
	background: #ddd;
	font-weight: 600;
	color: #fff;
}

.form_step li:not(:last-child):before {
	z-index: 1;
	content: "";
	position: absolute;
	bottom: -44px;
	left: 0;
	margin-left: 6px;
	border: 18px solid transparent;
	border-top: 18px solid #fff;
}

.form_step li:not(:last-child):after {
	z-index: 2;
	content: "";
	position: absolute;
	bottom: -32px;
	left: 0;
	margin-left: 8px;
	border: 16px solid transparent;
	border-top: 16px solid #ddd;
}

.form_step li small {
	margin-left: 16px;
}

.mw_wp_form_input .form_step > .form_step_input,
.mw_wp_form_confirm .form_step > .form_step_confirm,
.mw_wp_form_complete .form_step > .form_step_complete
{
	background: #000;
}
.mw_wp_form_input .form_step > .form_step_input::after,
.mw_wp_form_confirm .form_step > .form_step_confirm::after
{
	border-top: 16px solid #000;
}

.mw_wp_form fieldset {
	padding: 16px;
	border: 1px solid #ddd;
	border-radius: 2px;
	display: inline;
	width: 100%;
}
.mw_wp_form fieldset legend {
	padding: 4px 8px;
	font-weight: 600;
}

.mw_wp_form fieldset .form_field {
	display: block;
}

.mw_wp_form fieldset .form_supplement {
	display: block;
	padding: 16px;
	margin-bottom: 16px;
	font-size: 0.75em;
	border-bottom: 1px solid #eee;
}

@media screen and (min-width: 783px) {
	.mw_wp_form fieldset .form_field {
		float: left;
		width: 100%;
		max-width: calc(100% - 278px);
	}
	.mw_wp_form fieldset .form_supplement {
		float: right;
		width: 200px;
		border-left: 1px solid #eee;
		margin: 0 36px;
		padding: 0 16px;
	}
}

.mw_wp_form fieldset .form_supplement ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.mw_wp_form fieldset .form_supplement li {
	margin-bottom: 8px;
}


.mw_wp_form fieldset .form_item_label {
	font-weight: 600;
	margin: 0 8px;
}

.mw_wp_form fieldset .form_item_field {
	margin: 8px 0;
	padding-bottom: 24px;
	border-bottom: 1px solid #eee;
}

.mw_wp_form .form_must,
.mw_wp_form .form_any {
	padding: 4px 8px;
	color: #fff;
	font-weight: 600;
	font-size: 0.75em;
	border-radius: 2px;
}

.mw_wp_form .form_must {
	background: #e60033;
}
.mw_wp_form .form_any {
	background: #0095d9;
}
.mw_wp_form .error {
	display: inline;
	border-bottom: 1px solid #e60033;
	color: #e60033;
	margin-top: 8px;
	font-weight: 600;
	font-size: 0.75em;
}

.mw_wp_form .form_item_input {
	width: 100%;
	border: 1px solid #ddd;
	padding: 8px;
}

.mw_wp_form .form_item_back {
	width: 100%;
	font-weight: 600;
	color: #000;
	background: #fff;
	border: 1px solid #000;
	margin: 16px 0;
}

.mw_wp_form .form_item_submit {
	width: 100%;
	font-weight: 600;
	color: #fff;
	background: #000;
	border: 1px solid #000;
}

実際にはSCSSで書いていましたので、一部最適になっていない部分もあるかもしれません(^^;

ステップ表示の設定

MW WP Formは、エリアを囲っているdivが、
入力時にはmw_wp_form_inputと言うclassになり、
確認時にはmw_wp_form_confirmと言うclassになり、
完了時にはmw_wp_form_completeと言うclassになります。

.mw_wp_form_input .form_step > .form_step_input::after
などの辺りでそれによってステップの色を切り替えるようにしています。
よろしければ、参考にしてください。

バリデーション表示の変更

バリデーション表示の変更は、mwform_validation_mw-wp-form-xxxをフックして変更しています。
ここでは割愛しますが、MW WP Formのマニュアルを読むと簡単にできると思われます。

この記事を書いた人

kmix-39

kmix-39

主に日本の関西に出没する。
小学時代にWindows 95に触れ、BASICを始めて以来、HTML、Perl、Java(JSP, Servlet)、COBOL、C++、C#、PHP、Objective-C、Swift…と、数々の言語を地獄の現場を経験しながら覚えていった元IT社畜。
「好きな時に 好きなことを 好きなだけ」をしたい。