MW WP Form

お問い合わせメールフォーム

パーツテンプレート

size="30"を指定ないとIEで入力幅が大きくとられてしまう。

<table id="yoyaku_form">
	<tr>
		<th>お名前<span class="red">*</span></th>
		<td>[mwform_text name="お名前" size="30"]<br />
		<span class="fontst gray">例：杉山花子</span></td>
	</tr>
	<tr>
		<th>フリガナ<span class="red">*</span></th>
		<td>[mwform_text name="フリガナ" size="30"]<br />
		<span class="fontst gray">例：スギヤマハナコ</span></td>
	</tr>
	<tr>
		<th>ご住所</th>
		<td>[mwform_text name="住所" size="30"]<br />
		<span class="fontst gray">例：杉並区下井草2-26-16</span></td>
	</tr>
	<tr>
		<th>メールアドレス<span class="red">*</span></th>
		<td>[mwform_email name="メールアドレス" size="30"]<br />
		<span class="fontst gray">例：info@nac-cs.jp ※半角でお願いします</span></td>
	</tr>
	<tr>
		<th>電話番号<span class="red">*</span></th>
		<td>[mwform_tel name="電話番号" size="30"]<br />
		<span class="fontst gray">例：03-3390-2223 ※半角でお願いします</span></td>
	</tr>
	<tr>
		<th>ご質問・ご要望</th>
		<td>[mwform_textarea name="ご質問・ご要望" cols="30" rows="15"]</td>
	</tr>
</table>


<div class="center">[mwform_backButton class="mo" value="　入力をし直す　"][mwform_submitButton name="確認・送信" confirm_value="　内容を確認する　" submit_value="　送信する　"]</div>

＜メッセージ本文＞

差出人: {お名前} 様　<{メールアドレス}>
題名: ご予約メールフォームよりお問い合わせがありました

----------
このメールは リフレッシュサロンナック (http://www.nac-cs.jp/) の「ご予約メールフォーム」から送信されました。
----------

＜送信内容＞
・お名前：{お名前}
・フリガナ：{フリガナ}
・ご住所：{住所}
・メールアドレス：{メールアドレス}
・電話番号：{電話番号}
・ご希望予約日：{ご希望予約日}
・ご希望予約時間：{時間}
・ご希望メニュー：{カットメニュー}
・ご質問・ご要望
{ご質問・ご要望}

＜自動返信メッセージ＞

{お名前}　様

----------
このメールは、リフレッシュサロンナック(http://www.nac-cs.jp/) の「ご予約メールフォーム」から送信されました。
本メールはお客様のお問合せ情報が弊社のメールサーバに到達した時点で送信される、自動配信メールです。
----------

この度はお問合せ頂きありがとうございます。
下記の内容にて問合せを受け付けましたのでご確認下さい。


＜送信内容＞
・お名前：{お名前}
・フリガナ：{フリガナ}
・ご住所：{住所}
・メールアドレス：{メールアドレス}
・電話番号：{電話番号}
・ご希望予約日：{ご希望予約日}
・ご希望予約時間：{時間}
・ご希望メニュー：{カットメニュー}
・ご質問・ご要望
{ご質問・ご要望}


****************************************
3日以内に担当が確認後折り返しご連絡させて頂きます。
3日経っても返信がない場合はお手数ですが、お電話か再度メールを下さいますようよろしくお願い致します。

ご予約の変更、キャンセルも2日前までにお電話でお願いいたします。
2日以内の場合はお電話でのご連絡をお願いたします。

リフレッシュサロンナック
http://www.nac-cs.jp/
電話：03-3390-2223（AM9:00～PM7:00）
休業日：毎週月、第2・3月火連休
****************************************

＜CSS＞

/* --------------------------
メールフォーム：予約
-------------------------- */

#yoyaku_form{
	width:100%;
	border-collapse:separate;
	border:solid 2px #888888;
	empty-cells:show;
	margin-bottom:20px;
}
#yoyaku_form th{
	width:25%!important;
	border:solid 1px #888888;
	background-color:#CCCCCC;
	padding:10px 5px;
	text-align:center;
	font-weight:normal;
}
#yoyaku_form td{
	border:solid 1px #888888;
	padding:10px 5px 10px 10px;
	background-color:#fffcda;
	line-height:150%;
}

.fontst {font-size:13px;}
input[type="submit"]{
	width: 200px; 
	height: 50px;
	font-weight:bold;
	font-size:120%;
	border:solid 3px #F00;
}

.wideset{
	width:20%;
	background-color:#FFFFFF!important;
}

.mo{margin-right:10px;}

予約フォーム確認画面

<h2>内容の確認</h2>

[mwform_formkey key="42"]




予約フォーム送信完了画面

<h2>送信完了画面</h2>
<p>送信されました。<br />ありがとうございました。</p>
<p><a href="http://www.nac-cs.jp/">→ トップページに戻る</a></p>

[mwform_formkey key="42"]


＜＜メールフォームの単独ページ＞＞
page-mail.php
pageの固定ﾃﾝﾌﾟﾚを書き換える

/*確認・送信*/
#mailbox{
	width:640px;
	margin-left:auto;
	margin-right:auto;
}
#mailbox span{display:none;}
#mailbox h1{
	font-size:130%;
	padding:15px 0px;
}
#mailbox table th, #mailbox table td{padding:5px!important;}

住所自動検索

【 1）header.php に1行記載 】
<?php if(is_page('16')): ?><script type='text/javascript' src='https://ajaxzip3.github.io/ajaxzip3.js?ver=20140807'></script><?php endif; ?>


【 2）お問い合わせ固定ページにJavaScriptを入れる 】
<script type="text/javascript">
jQuery(function( $ ) {
    jQuery( 'input[name="zip"]' ).keyup( function( e ) {
        AjaxZip3.zip2addr('zip','','area','city');
    } )
	if($('#mw_wp_form_mw-wp-form-xxxx').hasClass('mw_wp_form mw_wp_form_confirm')){
		$(".comments").css('display', 'none');
	}
} );
</script>


【 3）フォームを入れる 】
<tr class="address">
<th>郵便番号</th>
<td>[mwform_text name="zip" class="zip" size="40" placeholder="例)123-4557"]</td>
</tr>
<tr>
<th>ご住所</th>
<td>
<p><b>都道府県</b><br />
 [mwform_text name="area" class="area" size="40"]</p>
<p><b>市町村・番地</b><br />
 [mwform_text name="city" class="city" size="40"]</p>
<p><b>建物・部屋番号</b><br />
 [mwform_text name="build" class="build" size="40" placeholder=""]</p>
</td>
</tr>