【コピペで使う】Ajaxで作る問い合わせフォームサンプル
たーさん
【DL版】Ajax（PHP・Javascript）で作ったシンプルな問い合わせフォームサンプル - tadworks - BOOTH
PHPで作ったシンプルな問い合わせフォームです。チェックボックス、セレクトボックス、ラジオボタンも設置しているので、少し手を加えるだけで様々なフォームを作ることが…
Ajaxとは
Ajax（エージャックス）とは、非同期通信を意味する用語で、ウェブ上で非同期でデータの送信を行う技術のことを指します。
通常、ウェブサイトというのはURLを入力（リクエスト）することで、ページ情報を取得します。
ですから、リアルタイムに情報を取得して変化させるということはできないわけです。
Ajaxというのは、これを実現する技術となります。
お問い合わせフォームでのAjax活用
問い合わせフォームで言えば、通常のフローでは、入力画面→確認画面→送信完了画面という３つのページを遷移しながら進むことになります。
しかし、このページ遷移なしでフォームから直接送信したいと思うかもしれません。
そういった場合には、通常のページ遷移時のPOST送信ではなく、Ajaxから直接ＰＨＰプログラムにデータを渡す方法で実装することが可能です。
HTML部
<input type="text" id="send-name" name="send-name" placeholder="名前を入力してください。" value="" />
<input type="text" placeholder="件名を入力してください。" id="send-subject" value="" />
<textarea placeholder="メッセージを入力して下さい。" id="send-body" rows="10"></textarea>
<input type="button" id="send-btn" value="送信する">
フォームはできるだけシンプルにするため、必要なもの以外は省いています。
通常使用するformタグがありません。
Jquery部
<script type="text/javascript">
$(function() {
// 送信確認
$('#send-btn').on('click', function() {
// フォームから入力値を取得
var name = $('#send-name').val();
var subject = $('#send-subject').val();
var body = $('#send-body').val();
// 入力内容の確認
if(name != "" && subject != "" && body != ""){
// PHPに送信
$.ajax({
type: 'POST',
url: "./send_data_ajax.php",
data: {
name:name,
subject:subject,
body:body
},
success: function( data ) {
if(data.match(/success/)){
alert("送信が完了しました。");
location.href = "./"; // 送信後戻り先URL
}
},
error: function() {
alert("予期せぬエラーが発生しました。");
}
});
} else {
alert("キャンセルされました。");
}
}
} else {
alert("未入力の項目があります。");
}
});
</script>
Ajaxによる送信では確認画面を挟みませんので、Javascript側で入力情報のチェックを行います。
ただし、クライアントサイド側のプログラムでのバリデーションは完全ではないため、理想を言えば、サーバープログラム（ＰＨＰ）側でもチェックを入れるのが好ましいでしょう。
PHP部（send_data_ajax.php）
<?php
// データ取得
$name = $_POST['name'];
$subject = $_POST['subject'];
$body = $_POST['body'];
// 送信メール作成
mb_language("Japanese");
mb_internal_encoding("utf-8");
$to = "送信先メールアドレス";
$header = "From: 送信元メールアドレス";
$subject = ".$subject;
$body = "
お名前
".$name."
お問合せ内容：
".$body."
";
// メール送信
if(mb_send_mail($to,$subject,$body,$header)){
echo "success";
}
?>
ＰＨＰ側では、データを取得しsendmailを実行しています。
最終的に、Javascript側で送信の成功・失敗を判定するために、”success”の文字列を返しています。
Ajaxの場合にはreturnの戻り値は使用せず、echoで返します。
【DL版】Ajax（PHP・Javascript）で作ったシンプルな問い合わせフォームサンプル - tadworks - BOOTH
PHPで作ったシンプルな問い合わせフォームです。チェックボックス、セレクトボックス、ラジオボタンも設置しているので、少し手を加えるだけで様々なフォームを作ることが…
投稿者プロフィール
- 代表者
-
東海大学工学部を卒業後、東芝情報システム株式会社（旧グループ会社含む）に入社。半導体（SRAM）の開発チームにて、Unix環境でのPerlを用いた業務自動化プログラムの開発など、エンジニアとしての確かな基礎と緻密な論理的思考力を培う。
その後、東証上場企業である株式会社ザッパラスへ。Web・モバイルの最前線で、数多くのユーザーに愛されるコンテンツ制作業務に従事。ここで「ユーザー目線に立った魅力的なWebコンテンツの企画・制作ノウハウ」を深く学ぶ。
開発・システム側から見た「堅牢なロジック」と、制作・ユーザー側から見た「伝わるコンテンツ」の双方を実務で経験した強みを活かし、フリーランスとして独立。
現在は、ウイングアーク1st株式会社の「データのじかん」運営チームに参画するなど、大手・中小企業のWeb運営・開発パートナーとして活動。完全在宅でありながら、固定IPの完備や厳格なセキュリティポリシーの遵守を徹底し、企業のインフラや本番環境を安全に支える「チームの一員」として高い信頼を得ています。
見た目の美しさはもちろんのこと、内部の構造やWordPressのカスタマイズ、運用・セキュリティまでを見据えた、技術的バックボーンのある高品質なWebサイト・システム制作をワンストップでご提供しています。
