در این مطلب آموزش ساخت فرم تماس با ما و ارسال آن به ایمیل را با کد های Php و Ajax را فرامیگیرید
برای ساخت فرم تماس با ما به زبان PHP و تکنولوژی Ajax بهتر است با ساخت فرم تماس ساده به زبان PHP آشنا باشید.
در آموزش های قبلی آموزش ساده فرم تماس با ما با اچ تی ام ال و پی اچ پی آموزش داده شده است.
همانطور که میدانید برای ارسال محتویات فرم به اسکریپت پردازش گر ارسال ایمیل PHP ، بعد از کلیک بر روی دکمه ارسال، صفحه مرورگر برای ارسال اطلاعات و پردازش آن نیاز به بارگذاری مجدد داشت. یا به عبارتی صفحه فرم تماس با ما دوباره بارگذاری میشد تا نتیجه عملیات نمایش داده شود. از آنجایی که کاربران سایت تمایل زیادی برای بارگذاری اجباری و مجدد یک صفحه ندارند (به علتهای مختلف مانند کم بودن سرعت اینترنت یا مصرف پهنای باند و …) استفاده از روشی که باعث بارگذاری مجدد صفحه تماس با ما نشود، هم منطقی و هم کاربر پسندتر است و تجربه مثبتی در ذهن کاربر ایجاد میکند.
برای ساخت فرم تماس با ما با تکنولوژی Ajax ما از فریم ورک JQuery استفاده میکنیم. در این فرم از ۲ فایل به ترتیب زیر استفاده شده است:
- فایل contactform.html
- فایل sendemail.php
در زیر کدهای مربوط به فرم را ملاحظه میکنید که در فایل 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 بهره ببریم.
در زیر کدهای مربوط به فایل 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 به صورت زیر است:
$(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="http://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 برای ارسال اطلاعات فرم به ایمیلتان استفاده میکند.
امیدواریم آموزش برایتان مفید واقع شده باشد متشکریم.گروه کامپیوتر دانشگاه آزاد
