آموزش ساخت فرم تماس

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

 

[demo link=”http://bit.ly/wd_spcf”]فرم تماس[/demo]

 

simple-php-contact-form

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

پس دقت کنید تمامی کدهای HTML و  CSS و PHP در یک صفحه خواهد بود، ولی من برای اینکه کدها پیچیده به نظر نرسند،‌ هر بخش را بصورت مجزا ایجاد می‌کنم تا خوانایی کدها را برای شما بالا ببرم.

طراحی فرم
اولین قدم برای ایجاد فرم تماس ایجاد فیلدهای مورد نیاز از طریق HTML و CSS است. سعی من در اینجا ایجاد یک فرم ساده است، پس زیاد به ظاهر آن نمی‌پردازم.

<html>
<body>
<head>
<meta http-equiv="Content-Language" content="fa" />
<meta http-equiv="content-type" content="text/html" charset="utf-8" />
<title>تماس با ما</title>
<!-- Css Codes -->

<!-- PHP Codes -->
<form action="" method="post">
<label>نام و نام خانوادگی:</label><input type="text" name="name" /><br />
<label>پست الکترونیکی:</label><input type="text" name="email" /><br />
<label>شماره تماس:</label><input type="text" name="phonenumber" /><br />
<label>موضوع پیام:</label><input type="text" name="subject" /><br />
<label>متن پیام:</label><textarea name="message"></textarea><br />
<input type="submit" value="ارسال" name="submit" />
</form>

</body>
</html>

تا به اینجای کار ما یک فرم تماس با پنج فیلد ایجاد کردیم که قرار است اطلاعات را از کاربر بگیرد و برای ما ارسال کند.
در قسمت Css Codes و PHP Codes هم قرار است کدهای CSS و PHP قرار بگیرند.
فقط به خاطر داشته باشید چون محتوای ما فارسی است، مقدار charset در تگ meta باید برابر با utf-8 باشد تا نوشته‌ها بصورت صحیح نمایش داده شوند و در نهایت صفحه را با فرمت php و انکودینگ utf-8 without BOM ذخیره کنید.

استایل و ظاهر فرم
استایل بندی فرم و صفحه کاملاً به خود شما بستگی دارد. من یک استایل ساده بصورت زیر برای فرم خودم ایجاد می‌کنم. شما می‌توانید هر نوع محیط گرافیکی جذابی را برای فرمتان ایجاد کنید.
چون من قصد دارم از CSS بصورت Internal استفاده کنم، کد بصورت زیر خواهد بود.

<style>
body{
font-family: tahoma;
font-size: 12px;
line-height: 250%;
direction: rtl;
}
form{
margin: auto;
margin-top: 30px;
width: 250px;
line-height: 30px;
font-size: 12px;
}
label{
float: right;
width: 130px;
}
input,textarea{
font-family: Tahoma;
font-size: 12px;
}
.alert{
color: red;
text-align: center;
}
</style>

کدهای بالا در بخش HTML و به جای CSS Codes جایگزین می‌شوند.

بررسی، دریافت و ارسال اطلاعات به وسیله PHP
حالا به مهمترین بخش کار، یعنی نوشتن کدهای PHP رسیدیم. کد PHP ما بصورت زیر خواهد بود که در قسمت PHP Codes جایگزین خواهد شد. من قسمت‌های مهم این فرم را توضیح می‌دهم.

سطر ۲ بررسی می‌کند که آیا بر روی دکمه ارسال کلیک شده است یا خیر، در صورتی که بر روی دکمه ارسال کلیک نشده باشد، فرم بصورت عادی به شما نمایش داده می‌شود، اما اگر این قسمت را از فرم حذف کنیم، شاهد خواهیم بود که در صفحه خطاهایی رخ می‌دهد.

سطر ۳ پر یا خالی بودن فیلدها را بررسی می‌کند و در صورتی که هر کدام از فیلدها خالی باشد در خط سه یک پیغام خطا به کاربر نمایش داده می‌شود.

سطرهای ۹ تا ۱۷ اطلاعات فیلدها را گرفته و در متغیرهایی ذخیره می‌کنند و همچنین آن را برای کاربر در صفحه نمایش می‌دهند تا کاربر از صحت اطلاعات وارد شده اطمینان حاصل کند.

سطر ۲۰ ایمیلی است که اطلاعات به آن ارسال خواهد شد.

سطرهای ۲۳ برای درست نمایش دادن فونت فارسی در ایمیل شما لازم است. با وجود این سطر شما می‌توانید ایمیل‌های خود را استایل دهی کنید و به صورت دلخواه در ایمیلتان نمایش دهید و همچنین سطر ۲۴ ایمیل وارد شده توسط کاربر را به عنوان ایمیل فرستنده نمایش خواهد داد.

در سطرهای ۲۵ تا ۳۰ هم اطلاعاتی وجود دارد که قرار است به ایمیلمان ارسال شود و ما در این خطوط استایل دلخواه و نحوه نمایش در حساب ایمیلمان را مشخص کرده‌ایم و به این منظور از CSS بصورت Inline بهره برده‌ایم.

در سطر ۳۳ هم تابع mail وجود دارد که مسئولیت ارسال تمامی اطلاعات را بر عهده دارد. این تابع از چندین آرگومان تشکیل شده است و اطلاعات مورد نظر را به ایمیل داده شده ارسال می‌کند.

<?php
if(isset($_POST['submit'])){
if($_POST['name']=='' or $_POST['email']=='' or $_POST['phonenumber']=='' or $_POST['subject']=='' or $_POST['message']==''){
echo '<div>لطفاً اطلاعات را به صورت کامل تکمیل کنید.</div>';
}else{
echo '<div>';
echo 'اطلاعات با موفقیت ارسال شد.';
echo '<br />';
echo $name=$_POST['name'];
echo '<br />';
echo $email=$_POST['email'];
echo '<br />';
echo $phonenumber=$_POST['phonenumber'];
echo '<br />';
echo $subject=$_POST['subject'];
echo '<br />';
echo $message=$_POST['message'];
echo '</div>';

$to='Your E-Mail Here';
$subject=$subject;
$from=$email;
$headers='Content-type: text/html; charset=utf-8' . "\r\n";
$headers.="From:$from To $to";
$body=
"<div style=\"font-size:12px;font-family:tahoma;direction:rtl;text-align:right;line-height:35px;\"><b>نام و نام خانوادگی:</b> $name\n</div>".
"<div style=\"font-size:12px;font-family:tahoma;direction:rtl;text-align:right;line-height:35px;\"><b>پست الکترونیک:</b> $email\n</div>".
"<div style=\"font-size:12px;font-family:tahoma;direction:rtl;text-align:right;line-height:35px;\"><b>شماره تماس:</b> $phonenumber\n</div>".
"<div style=\"font-size:12px;font-family:tahoma;direction:rtl;text-align:right;line-height:35px;\"><b>موضوع پیام:</b> $subject\n</div>".
"<div style=\"font-size:12px;font-family:tahoma;direction:rtl;text-align:right;line-height:35px;\"><b>متن پیام:</b> $message\n</div>";

mail($to,$subject,$body,$headers);
}
}
?>

بدون شک فرم تماس ایجاد شده یک فرم ایده آل نیست، ولی هدف این آموزش فقط آشنا کردن شما با نحوه ایجاد یک فرم به زبان PHP است. حال که شما با نحوه‌ی ایجاد یک فرم و ارسال اطلاعات آشنا شدید، می‌توانید فرم‌های امن، قدرتمندتر و با ظاهری جذاب ایجاد کنید.

٪ نظرات