آموزش ساخت فرم تماس با ما و ارسال به ایمیل با PHP و Ajax

daskhatmin فواد طهماسبی
67,716 بازدید
آموزش ساخت فرم تماس با ما و ارسال به ایمیل با PHP و Ajax

برای ساخت فرم تماس با ما به زبان PHP و تکنولوژی Ajax بهتر است با ساخت فرم تماس ساده به زبان PHP آشنا باشید.

قبلا در دسخطی به صورت مستقل و کامل ساخت فرم تماس با ما آموزش داده شده است که میتوانید از این لینک مطالعه کنید: آموزش ساختن فرم تماس با ما

همانطور که میدانید برای ارسال محتویات فرم به اسکریپت پردازش گر ارسال ایمیل PHP ، بعد از کلیک بر روی دکمه ارسال، صفحه مرورگر برای ارسال اطلاعات و پردازش آن نیاز به بارگذاری مجدد داشت. یا به عبارتی صفحه فرم تماس با ما دوباره بارگذاری میشد تا نتیجه عملیات نمایش داده شود. از آنجایی که کاربران سایت تمایل زیادی برای بارگذاری اجباری و مجدد یک صفحه ندارند (به علتهای مختلف مانند کم بودن سرعت اینترنت یا مصرف پهنای باند و …) استفاده از روشی که باعث بارگذاری مجدد صفحه تماس با ما نشود، هم منطقی و هم کاربر پسندتر است و تجربه مثبتی در ذهن کاربر ایجاد میکند.

 

مراحل ساخت فرم تماس با ما و ارسال به ایمیل با PHP و Ajax

 

برای ساخت فرم تماس با ما با تکنولوژی Ajax ما از فریم ورک JQuery استفاده میکنیم. در این فرم از ۲ فایل به ترتیب زیر استفاده شده است:

  • فایل contactform.html
  • فایل sendemail.php

 

کدهای مربوط به HTML

در زیر کدهای مربوط به فرم را ملاحظه میکنید که در فایل contactform.html قرار خواهد گرفت :

<form id="contactform" action="" method="post">
    <label>Name:</label><input id="name" type="text" name="name" />
    <label>Email:</label><input id="email" type="text" name="email" />
    <label>Message:</label><textarea id="message" name="message"></textarea>
    <input id="submit" type="button" value="send" />
    <div id="success" style="color: red;"></div>
</form>

تا اینجای کار تنها تفاوت با فرم تماس با ما ساده، فیلد input مربوط به دکه ارسال هست که به جای نوع submit از نوع button استفاده شده و یک id تخصیص داده شده است. این امر به این دلیل هست که هنگام کلیک بر روی دکمه ارسال صفحه به صورت خودکار شروع به ارسال و بارگذاری مجدد صفحه نکند تا ما بتوانیم از دستورات JQuery بهره ببریم.

 

کدهای مربوط به PHP

در زیر کدهای مربوط به فایل sendemail.php را مشاهده میکنید:

// Here we get all the information from the fields sent over by the form.
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];

$to = 'youremail@domain.com';
$subject = 'the subject';
$message = 'FROM: '.$name.' Email: '.$email.'Message: '.$message;
$headers = 'From: youremail@domain.com' . "\r\n";

if (filter_var($email, FILTER_VALIDATE_EMAIL)) { // this line checks that we have a valid email address
mail($to, $subject, $message, $headers); //This method sends the mail.
echo "Your email was sent!"; // success message
}else{
echo "Invalid Email, please provide an correct email.";
}

همانطور که متوجه شدید هیچ فرقی با فرم ارسال ایمیل ساده ندارد و فقط در انتها نتیجه عملیات را چاپ میکند.

 

کدهای مربوط به jQuery

کدهای مربوط به عملیات JQuery به صورت زیر است:

            $(document).ready(function() {
                $('#submit').click(function() {
                    $('#submit').attr('value', 'Please wait...');
                    $.post("sendemail.php", $("#contactform").serialize(), function(response) {
                        $('#success').html(response);
                        $('#submit').attr('value', 'SEND');
                  });
                    return false;
                });
            });

کد بالا کلیک بر روی دکمه ارسال را تشخیص داده و اطلاعات فرم را به صورت تکنولوژی Ajax به فایل PHP مربوط ارسال کرده و نتیجه HTML چاپ شده در فایل PHP را در داخل تگ با id با نام success نمایش میدهد. فراموش نکنید که برای اجرای کدهای JQuery نیاز به بارگذاری آن بخش head صفحه فرم تماس با ما دارید.

به صورت کلی فایل contactform.html به صورت زیر خواهد بود:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-latest.js"></script>
    <script>
            $(document).ready(function() {
                $('#submit').click(function() {
                    $('#submit').attr('value', 'Please wait...');
                    $.post("sendemail.php", $("#contactform").serialize(), function(response) {
                        $('#success').html(response);
                        $('#submit').attr('value', 'SEND');
                    });
                    return false;
                });
            });
    </script>
  </head>
  <body>

    <form id="contactform" action="" method="post">
      <label>Name:</label><input id="name" type="text" name="name" />
      <label>Email:</label><input id="email" type="text" name="email" />
      <label>Message:</label><textarea id="message" name="message"></textarea>
      <input id="submit" type="button" value="send" />
      <div id="success" style="color: red;"></div>
    </form>
  </body>
</html>

اکنون شما یک فرم تماس با ما دارید که از تکنولوژی Ajax برای ارسال اطلاعات فرم به ایمیلتان استفاده میکند.

 

send-ajax-php-mail

پیش نمایش فایلهای آموزش

فایلهای این آموزش کاملا پیاده سازی و تست شده است.

daskhatmin

فواد طهماسبی

فواد طهماسبی هستم، موسس وبسایت آموزشی دسخط. مهندسی نرم افزار خوندم و چندین سال تجربه کاری مرتبط با تکنولوژیهای توسعه وب دارم. علاقمند به ایده پردازی و توسعه کسب و کارهای اینترنتی هستم.

59 دیدگاه برای “آموزش ساخت فرم تماس با ما و ارسال به ایمیل با PHP و Ajax”

  1. موسوی گفت:

    سلام . یه سئوال مهم داشتم خیلی مهمه واسم . اگه ممکن بود یه اشاره ای یا توضیحی بدید.
    این ارسال نظر به این شیوه و جواب شما که در سایت هستش چطور ایجاد میشه ؟!!
    فرض کنید سرور از پی اچ پی و دیتا بیس اس کیو ال ساپورت می کنه . و سایت ما یه سایت استاتیک با اچ تی ام ال هستش . آیا میشه در یه صفحه همچین ارسال نظری ایجاد کرد که به صورت آنلاین نظر رو بزنه و من بخوام پاسخ بدم بتونم !! که البته نیاز به نصب سی ام اس و این حرفا نباشه !!
    اگه میشه یه راهنمایی بفرمایید
    ممنون
    موسوی

  2. jumpeR گفت:

    وااااااااای عالی بود

  3. محمود شکرانه گفت:

    سلام جناب طهماسبی
    من میخواهم برای ایمیهایی که می فرستم در داخل یک فرم دلخوا خودم باز شود ،لطف می کنید راهنمای بفرماید که این فرم را با چه نرم افزاری بسازم و چگونه و چکار کنم که مثلا در جی میل دریافت کننده باز شود؟ با احترام

  4. مریم گفت:

    من هر دو تا فرم را ساختم ولی در اجرا فقط please wait میشه و دیگه send نمیشه. میدونم اشکالم در sendmail هست ولی نمی دونم کجاست؟ کد رو کپی کردم ولی جواب نداد.
    ممنون

  5. زهرا گفت:

    یعنی نمیخوام جدا به اینترنت متصل بشم فقط ازمایشی هر چی تو فرم وارد میکنم توی ی صفحه وارد بشه

  6. زهرا گفت:

    سلام ممنون ولی من میخوام اطلاعات بطور ازمایشی توی ی صفحه لنک داده بشه واز ایمیلم استفاده نکنم میشه راهنماییم کنید خیلی لازم دارم

  7. محمد امين گفت:

    سلام خسته نباشید ببخشید این فروم رو تو wordpress هم امتحان کردید؟؟؟ من این فرم رو تو وردپرس امتحان کردم ولی فقط رو please wait میمـــــــــونه دلیلش اگه فایل php من به صورت مسستقیم تو index قرار دادم ولی بازم please wait نشون میده ! البته من این کد رو تو لوکال امتحان کردم هنوز تو سرور قرار ندادم

  8. هادی گفت:

    خدا خیرتون بده بسیار بسیار عالی بود لطفا ادامه دهید

  9. رضا گفت:

    با سلام و خسته نباشید
    من فرم رو درست کردم و کاملاً سالمه فقط زمانی ک ایمیل ارسال میشه و میخوام تو جیمیلم بازش کنم اسمش $email هست میشه راهنمایی کنید چطور اسم مورد نظر رو بزارم؟؟؟

  10. ranjer گفت:

    با سلام
    میخواستم برای کاربران فرم هایی حاوی دکمه های افزاییش و یا کاهش فرم (+ و – ) برای سفارشات درست کنم لطفا من راهنمایی کنید خیلی گشتم ولی به جایی نرسیدم .از دوستان خواهش میکنم اگر کتاب یا نرم افزار و سیستم مدیریت محتوا خاصی که بتونم این فرم ها رو را ه اندازی کنم معرفی کنند

    سایت زیر نمونه ای از این فرم هست
    http://www.samanpl.ir/search/professionalsearch/Index/

دیدگاه‌های بیشتر

کد HTMLCSSJavaScriptPHP