Responsive Mailformのカスタマイズ

email-1435687_1280

簡単設置スマホ対応レスポンシブ メールフォームの無料ダウンロード

既存のサイトでお問い合わせフォームが必要になったのでメモ。 自分はPHPの知識もjavascriptの知識もなし。 当てずっぽうで作成しているので、とんでもないことが起こっても自己責任でお願いします。

Responsive Mailformでやりたいこと

  • フォームを2ページ分作成したい
  • 住所欄を依頼人の住所と発送先の住所と2個作成したい

でした。既存のサイト自体はレスポンシブ対応済み。ディフォルトの設定ですでにフォームは設置済みとする。

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>

ディフォルトでは以下の様になっているので、コピペして、単純にnameの末尾だけ変えます。IDも変えてますけど変えなくてもいけるでしょう。

これを

こんな感じ。

mainform.PHP側

40行目あたりに変数がずらずら並んでいるので、先ほどつけたnameを割り込みさせます。

さらに下をみるとif文があるので割り込ませましょう。

config-2.PHP側

こちらも同じ様に追加した分だけ割り込ませましょう

maiform2.js側

こちらも同様にコピペで追加。

問題発生

そしてサーバー上で確認したら、必須項目を入れない状態で送信ボタンを押した時に出る文字が途中で途切れてしまった! 「が入力されていません。」とだけ表示されています。 これは自分がディフォルトのHTMLで作成していないからでした。 英語名を囲ってあるspanを削除すると、消えてしまうのかも。 mailform2の中にある

などに直接変更してしまいましょう。

とすればうまくいくかもしれませんが、試してません。

文字化け

最終的に送られてくるメールが文字化けしちゃいました。UTF-8 BOMなしで保存しても出てしまったのですが,php.iniというファイルを作成し

と書いてサーバーにぶち込んでみたら治りました。


以上、全く知識のない人間が無理やりカスタマイズした方法でした。 真似しないようにね!