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

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

先ずはサンプル

Jquery

SyntaxHighlighterについて
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
   //$("#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

SyntaxHighlighterについて
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?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);
 }
?>

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