簡単設置スマホ対応レスポンシブ メールフォームの無料ダウンロード
既存のサイトでお問い合わせフォームが必要になったのでメモ。 自分はPHPの知識もjavascriptの知識もなし。 当てずっぽうで作成しているので、とんでもないことが起こっても自己責任でお願いします。
Responsive Mailformでやりたいこと
- フォームを２ページ分作成したい
- 住所欄を依頼人の住所と発送先の住所と２個作成したい
でした。既存のサイト自体はレスポンシブ対応済み。ディフォルトの設定ですでにフォームは設置済みとする。
HTML側
まずHTMLからいじっていきます。 強引な感じですがDLしたフォルダを複製しました。
- 「php」フォルダを「php2」に。（中身はそのまま）
- mailform.jsをmailform2.jsに
-
CSSは使わなかったので捨てました。
<form action=”php/mailform.php” method=”post” id=”mail_form”>
<script type=”text/javascript” src=”js/mailform.js”></script>
を
|
1 2 |
<form action="php/mailform2.php" method="post" id="mail_form"> <script type="text/javascript" src="js/mailform2.js"></script> |
ディフォルトでは以下の様になっているので、コピペして、単純にnameの末尾だけ変えます。IDも変えてますけど変えなくてもいけるでしょう。
|
1 2 3 4 5 |
<dt>郵便番号<span>Postal</span></dt> <dd><input type="text" id="postal" name="postal" value="" onkeyup="AjaxZip3.zip2addr(this,'','address_1','address_1');" /> <a href="http://www.post.japanpost.jp/zipcode/" target="_blank">郵便番号検索</a></dd> <dt>住所<span>Address</span></dt> <dd><input type="text" id="address_1" name="address_1" value="" /><input type="text" id="address_2" name="address_2" value="" /></dd> |
これを
|
1 2 3 4 5 6 7 8 9 10 11 |
<dt>郵便番号<span>Postal</span></dt> <dd><input type="text" id="postal" name="postal" value="" onkeyup="AjaxZip3.zip2addr(this,'','address_1','address_1');" /> <a href="http://www.post.japanpost.jp/zipcode/" target="_blank">郵便番号検索</a></dd> <dt>住所<span>Address</span></dt> <dd><input type="text" id="address_1" name="address_1" value="" /><input type="text" id="address_2" name="address_2" value="" /></dd> <dt>送り先郵便番号<span>Postal</span></dt> <dd><input type="text" id="postal2" name="postal2" value="" onkeyup="AjaxZip3.zip2addr(this,'','address_3','address_3');" /> <a href="http://www.post.japanpost.jp/zipcode/" target="_blank">郵便番号検索</a></dd> <dt>送り先住所<span>Address</span></dt> <dd><input type="text" id="address_3" name="address_3" value="" /><input type="text" id="address_4" name="address_4" value="" /></dd> |
こんな感じ。
mainform.PHP側
４０行目あたりに変数がずらずら並んでいるので、先ほどつけたnameを割り込みさせます。
|
1 2 3 4 5 6 7 |
$postal = ''; $address_1 = ''; $address_2 = ''; $postal_2 = ''; $address_3 = ''; $address_4 = ''; $phone = ''; |
さらに下をみるとif文があるので割り込ませましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
if( !(empty($_POST['address_1'])) ){ $address_1 = mb_convert_kana($_POST['address_1'], 'KVa'); } if( !(empty($_POST['address_2'])) ){ $address_2 = mb_convert_kana($_POST['address_2'], 'KVa'); } if( !(empty($_POST['address_3'])) ){ $address_3 = mb_convert_kana($_POST['address_3'], 'KVa'); } if( !(empty($_POST['address_4'])) ){ $address_4 = mb_convert_kana($_POST['address_4'], 'KVa'); } |
config-2.PHP側
こちらも同じ様に追加した分だけ割り込ませましょう
|
1 2 3 4 |
郵便番号：{$postal} 住所：{$address_1} {$address_2} 送り先郵便番号：{$postal_2} 送り先住所：{$address_3} |
maiform2.js側
こちらも同様にコピペで追加。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
if( $('.required').children('input#address_3').length ){ var element = $('.required').children('input#address_3'); var element_2 = $('.required').children('input#address_4'); if( element.val() == '' && element_2.val() == '' ){ var dt = element.parents('dd').prev('dt'); var dt_name = slice_method(dt); element.nextAll('span').text(dt_name +'が入力されていません。'); error++; scroll_point = compare_method(scroll_point, element.offset().top); }else{ element.nextAll('span').text(''); } } |
問題発生
そしてサーバー上で確認したら、必須項目を入れない状態で送信ボタンを押した時に出る文字が途中で途切れてしまった！ 「が入力されていません。」とだけ表示されています。 これは自分がディフォルトのHTMLで作成していないからでした。 英語名を囲ってあるspanを削除すると、消えてしまうのかも。 mailform2の中にある
|
1 |
element.nextAll('span').text(dt_name +'が入力されていません。'); |
を
|
1 |
element.nextAll('span').text(dt_name +'送り先住所が入力されていません。'); |
などに直接変更してしまいましょう。
|
1 |
<dt>郵便番号<span>Postal</span></dt> |
を
|
1 |
<dt>郵便番号<span></span></dt> |
とすればうまくいくかもしれませんが、試してません。
文字化け
最終的に送られてくるメールが文字化けしちゃいました。UTF-8 BOMなしで保存しても出てしまったのですが,php.iniというファイルを作成し
|
1 |
Default_charset = "utf-8" |
と書いてサーバーにぶち込んでみたら治りました。
以上、全く知識のない人間が無理やりカスタマイズした方法でした。 真似しないようにね！