Suipedia的、お問い合わせフォームの作り方
formタグを使わずにa.jaxで投げてます。
このページの説明は、完全なド素人には向いてないです。
なにそれ！ヤな感じ～
なんとなーくでも周辺知識がある人に読んでもらえることを期待しています。
周辺知識ね、余裕だよよゆ～。
また、このページを参考にした結果被る不利益には責任を負えませんので、そのつもりでお願いします
いや声ちっちゃ！
1.概要と簡単な説明
お問い合わせフォームの作り方です。 実際のページはこちら
「テスト送信～」とかって用が
ないのに動かすのはやめるにゃ(/ω＼)
ここで紹介するのはformタグを使わずにa.jaxを使って非同期に投げる方法です。
初期のころはformタグでsubmitしてたんですが、何か気に入らないことがあって非同期通信を使うようになりました。
formタグ及びinputのsubmitを使わないようにしたことでエンターキー無効化処理を書かなくていいとか他にもなにかメリットがあったような気がするけど・・・やっぱり思い出せない・・！
このページで説明する処理の流れは以下のような感じです。
DBへの登録は念のためですね。
運用の際は基本的にメールでチェックしてるけど、管理面では不向きなので、情報にアクセスしやすいようにこの手段をとっています。
あとで説明するけど、メールの送信はphpに用意されてる関数を使うだけなので特段難しいことはないです。
2.各ソースの紹介と説明
2-1.html（各部品の表示）
まずはhtmlソースです。最低限の情報のみなので、スタイル等は割愛してます！
<h2>問い合わせ<span>contact</span></h2> <table class="generalForm"> <tr><th>お名前</th></tr> <tr> <td> <input type="text" id="name" name="name" placeholder="吹奏 楽"> </td> </tr> <tr><th>メールアドレス</th></tr> <tr> <td> <input type="text" id="mail" name="mail" placeholder="返信が必要な方はご入力ください。"> </td> </tr> <tr><th>メッセージ</th></tr> <tr> <td> <textarea name="message" id="message" placeholder="質問や相談、要望等を書いてください。"></textarea> </td> </tr> </table> <button id="send">送信する</button>
従来は1行にヘッダとinput要素を2列に分けて入れてたんですけど、それをやるとレスポンシブ対応をしてもスマホで見たときに窮屈になるので、1行に1要素にしました。
ここに関しては特段難しいことはないと思います。簡単な注釈なら要素外に書くよりもplaceholderに書いた方が直感的です。
実際のソースから処理にあたって不要なものを省いたソースを載せています。スタイルや各種プロパティはお好みに合わせて追記してください。
2-2.jquery（a.jaxでサーバに投げるところ）
次に、各input要素に入力された内容をサーバに投げる（リクエスト）部分の処理です。
<script type="text/javascript">
/* メッセージをDBへ登録 */
$(document).ready(function(){
/* 連続投稿防止 */
var flag = false;
/**
* 送信ボタンクリック
*/
$('#send').click(function()
{
if(flag){
return ;
}
flag = true;
/* POSTメソッドで送るデータを定義します var data = {パラメータ名 : 値}; */
var data = {
message : $('#message').val()
};
/**
* Ajax通信メソッド
* @param type : HTTP通信の種類
* @param url : リクエスト送信先のURL
* @param data : サーバに送信する値
* @param async : 通信時、画面を開放するかどうか
*/
$.ajax({
/**
* Ajax通信が成功した場合に呼び出されるメソッド
*/
success: function(data, dataType)
{
if(data =='noName'){
alert('お名前が入力されていません。');
flag=false;
}else if(data =='noMsg'){
alert('メッセージが入力されていません。');
flag=false;
}else{
alert('送信しました。ありがとうございます。');
location.href="/contact/";
}
},
/**
* Ajax通信が失敗した場合に呼び出されるメソッド
*/
{
/* エラーメッセージの表示 */
alert('Error : ' + errorThrown);
}
});
flag = false;
return false;
});
});
</script>
ただ、この程度のお問い合わせフォームレベルでは一瞬で返ってくるので、不要です。
もっとサーバ側で複雑で時間のかかる処理をする場合はこの効果が体感できます。
データを定義するところは「$('#name').val(),」の#に続く文字列が各inputタグに指定したidと一致していなければなりません。下図参照
また、「mail : $('#mail').val(),」の左側の「mail」はサーバサイドで値を受け取る際に必要なキーです。
エラーメッセージのところは次のサーバサイドの処理もかかわってくるので次に説明します。
2-3.php（DBに登録、及びメール送信）
ここからはサーバサイドの実装です。
<?php
$webroot = $_SERVER['DOCUMENT_ROOT'];
/* ここで後の処理に必要な関数を有した外部ファイルを読み込んでおきます。include */
include_once($webroot."【ファイルのパス！】");
/* 文字化け防止 */
header("Content-type: text/plain; charset=UTF-8");
/* 変数に格納 */
/* 名前 */
$name = $_POST['name'];
$name = htmlspecialchars($name, ENT_QUOTES, 'UTF-8');
/* メールアドレス */
$mail = $_POST['mail'];
$mail = htmlspecialchars($mail, ENT_QUOTES, 'UTF-8');
/* メッセージ */
$message = $_POST['message'];
$message = htmlspecialchars($message, ENT_QUOTES, 'UTF-8');
/* チェック処理 */
/* スペースだけの投稿防止 */
$checkName = str_replace(" ", "", $name);
$checkName = str_replace(" ", "", $checkName);
$checkMsg = str_replace(" ", "", $message);
$checkMsg = str_replace(" ", "", $checkMsg);
if($name=="" || $checkName==""){
print 'noName';
return;
}
if($message=="" || $checkMsg==""){
print 'noMsg';
return;
}
/* 登録処理 */
/* トランザクション制御 */
try{
$dbh->beginTransaction();
/* スレッド管理テーブルへの登録 */
$sql="INSERT INTO テーブル名(名前, メールアドレス, メッセージ) VALUES (:name,:mail,:message)";
$stmt = $dbh->prepare($sql);
$stmt->bindParam(':name', $name, PDO::PARAM_STR);
$stmt->bindParam(':mail', $mail, PDO::PARAM_STR);
$stmt->bindParam(':message', $message, PDO::PARAM_STR);
$stmt->execute();
$dbh->commit();
} catch (Exception $e) {
$dbh->rollBack();
echo "失敗しました。" . $e->getMessage();
}
/* 転送メール設定 */
$subject = '【問い合わせ】'.$name.' より' ;
$mail_body = "名前：".$name."\nメッセージ：\n".$message."\n\nメールアドレス：".$mail ;
mailSetting($subject , $mail_body) ;
?>
不正なスクリプトを避けるために「htmlspecialchars」は必ずくぐらせておきましょう。
Suipediaではユーザの入力値が半角スペースのみおよび全角スペースのみの場合はエラーとして返すようにしています。（そんなデータ送られてもどうしようもないからね。）
「print」で出した文字がjquery側の「data」に入るので、ここで先ほどのエラーメッセージ処理がリンクします。
名前がない場合は「noName」と返す、「noName」が帰ってきたら「alert('お名前が入力されていません。');」の処理を実行する。
これでユーザにエラーの旨が伝わります。
3.おわりに
最後の方、ちょっと駆け足になりました。DB登録に関してはさらけ出してますが、メールは関数に投げてるので分かりにくいですね。
このあたりは関数の中身を説明するページをご用意します。
私はけっこう「動いたらOK」でやってるとこあるんで、改めて人に説明するためのページを用意すると自分の知識がガバガバなことに気付かされました。
もう少し勉強せねば(;´･ω･)
