ロゴ
HOME > jQuery・Javascript > Jquery非同期通信+PHPでお問い合わせフォームを作る

Jquery非同期通信+PHPでお問い合わせフォームを作る

2014年03月07日

先ずはサンプル

Jquery

   //$("#button").click(function(){ //これペケ
     
   $(document).on('click','#button',function(e){ // クリックで実行 2014-07-24 修正
      
      if( $("#name").val() && $("#email").val() && $("#str").val() ){
         
         if(!$("#email").val().match("^[0-9A-Za-z._\-]+@[0-9A-Za-z.\-]+$")){
            $('#error').html('メールアドレス形式で記入して下さい');
            return false;
         }
         var data = $("#form").serialize(); //送信されたデータ
         $('#form').html('<img src="../lib/loader2.gif" />'); //ローディング画像を表示
         $.ajax({
            type: "POST",
            url: "04/mail.php", //PHPを呼び出す
            data: data, //記入されたデータを渡す
            success: function(xml){
               $('#form').html('メールを送信しました');
            }
         });
      } else {
         $('#error').html('未記入の項目が有ります');
      }
   });
});

未記入エラー制御もやっていますが、こういうのは他のライブラリーを使った方が楽です。

PHP

<?php
 mb_language("Japanese");
 mb_internal_encoding("UTF-8");
 
 //設定
   $sendmail = 'xxxx@xxxx.xxxxx';    //問い合わせ先メールアドレス (自分のメアド)
   $from     = $_POST['email'];  //送信元メールアドレス
 
 //管理者へ届くメール 本文
   $body  = sprintf("お名前:%s\n" ,$_POST['name'] );
   $body .= sprintf("メールアドレス:%s\n" ,$_POST['email'] );
   $body .= sprintf("内容:%s\n" ,$_POST['str'] );
   
   sendMail($body,'お問い合わせ',$sendmail,$from);
   
 //送信者へ届くメール 本文
   $body  = "以下の内容でお問い合わせを受け付けました\n\n";
   $body .= sprintf("お名前:%s\n" ,$_POST['name'] );
   $body .= sprintf("メールアドレス:%s\n" ,$_POST['email'] );
   $body .= sprintf("内容:%s\n" ,$_POST['str'] );
   
   sendMail($body,'お問い合わせありがとうございます',$from,$sendmail); 

/*
 * メール送信処理
 */
 function sendMail($body,$subject,$sendmail,$from){
   $header  = "From: $from"."\n"."X-Priority: 1"."\n"."X-Mailer: PHP/".phpversion();  
   mb_send_mail($sendmail,$subject,$body,$header);
 }
?>

一番簡単でシンプルなものです。サーバーによっては文字化けしたりなど、苦労する場合もあると思いますが、大手レンタルサーバーなどは大丈夫だと思います。