آموزش ایجاد فرم تماس با ما ساده با php

          حمیدرضا 
            بازدید : 2590
          پنجشنبه 07 خرداد 1394
           نظرات (0)
        

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

طرز کار فرمی که می خواهیم ایجاد کنیم این گونه است: ابتدا اطلاعات توسط یک فرم html دریافت می شوند و به سمت سرور (php) ارسال می گردند. در آنجا پس از تجزیه و تحلیل اطلاعات ، اگر اطلاعات از نظر مقدار مشکلی نداشتند ، به صورت یک پیام به آدرس ایمیلی که شما معلوم خواهید کرد ارسال می شوند و نتیجه به صورت یک متن ساده در یک خط به کاربر نمایش داده می شود.

نکته: برای متوجه شدن این آموزش شما باید با html و php آشنایی داشته باشید.

قبل از هر چیزی ابتدا در یک فولدر دو فایل با نام های index.html و send.php ایجاد کنید.

اما آموزش! برای شروع کار ما باید یک فرم تماس با ما با استفاده از html ایجاد کنیم. برای این کار از تگ form استفاده می کنیم:

Html Form

<<<code>>>

<form action="send.php" method="post">

<input type="text" placeholder="نام خود را وارد کنید" name="name"></input>

<br />

<input type="email" placeholder="آدرس ایمیل خود را وارد کنید" name="email"></input>

<br />

<input type="text" placeholder="موضوع پیام خود را وارد کنید" name="subject"></input>

<br />

<textarea name="message" placeholder="متن پیام شما"></textarea>

<br />

<input type="submit" value="ارسال"></input>

</form>

<<</code>>>

قرمز: در قسمت action ما آدرس فایل php خود را که در یک فولدر با index.html قرار دارد وارد کرده ایم تا اطلاعات به این فایل ارسال شود.

آبی: در موجودیت method ما مقدار را post گذاشته ایم تا اطلاعات به صورت درخواست های header مروگر ارسال شوند نه در آدرس صفحه. این کار باعث می شود که اشخاص توانایی ارسال پیام تنها با ورود به یک لینک خاص را نداشته باشند.

توضیح بیشتر: وقتی ما method یک فرم html را در حالت get قرار می دهیم ، اطلاعاتی که قرار است به فایل php ارسال شوند به صورت متغیر هایی در آدرس فایل منتقل می شوند. برای مثال اگر ما متد را get قرار داده باشیم و اطلاعات « نام: ali ، آدرس ایمیل: email@email.com ، موضوع: test ، متن پیام: this is a test message » را ارسال کنیم ، آدرس صفحه به حالت زیر تغییر خواهد کرد.

send.php?name=ali&email=email@email.com&subject=test&message=this is a test message

شاید به نظر مشکلی نداشته باشد ، اما اگر این طور باشد ، می توان تنها با ورود به لینکی شبیه به لینک بالا از فرم تماس با مای شما ایمیل ارسال کرد. در صورتی که اگر متد برابر post باشد این مشکل پیش نمی آید و از نظر امنیتی هم بهتر است. پس همیشه تا لازم نشده از متد get استفاده نکنید.

سبز: اگر تا به حال با فرم های html کار نکرده اید ، شاید این موجودیت (name) را نشناسید و یا کاربرد آن را ندانید. کاربرد این موجودیت ، مشخص کردن یک نام برای اطلاعات درون یک فرم است تا بتوان بعدا از آن ها استفاده کرد. در واقع مثل id در جاوا اسکریپت می ماند ، با این تفاوت که امکان چند name با مقادیر مشابه در یک صفحه وجود دارد اما این امکان برای id ها وجود ندارد. البته توجه داشته باشید که در یک فرم نمی توان name های برابر ایجاد کرد.

اما فایل send.php ما در این فایل باید اطلاعاتی را که با استفاده از فرم دریافت می کنیم ، تجزیه تحلیل کنیم و در صورت لزوم پاسخ مناسب را به کاربر نمایش دهیم. بسیار جالب است!

send.php

<<<code>>>

<!DOCTYPE html>

<html>

<head>

<title>نمایش نتیجه - www.toolstheme.ir</title>

<meta charset="UTF-8" />

</head>

<body>

<?php

function show_alert($alert)

{

echo "<b style='color: #f00;'>$alert</b>";

}

$error = false;

$to = 'آدرس ایمیل شما';

if( isset($_POST['name'] , $_POST['email'] , $_POST['subject'] , $_POST['message']) )

{

if( $_POST['name'] != '' && $_POST['email'] != '' && $_POST['subject'] != '' && $_POST['message'] != '' )

{

$name = $_POST['name'];

$email = $_POST['email'];

$subject = $_POST['subject'];

$message = $_POST['message'] . "nr email: $email , name: $name";

if( !preg_match( '/^[a-zA-Z ابپتثجچهخدذرزژسشصضطظعغفقکگلمنوهیآ]+$/' , $name ) )

{

show_alert('نام وارد شده مقدار صحیحی ندارد.');

$error = true;

}

if( !preg_match( '/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9_.-]+.[a-zA-Z0-9_.-]+$/' , $email ) )

{

show_alert(' آدرس ایمیل وارد شده مقدار صحیحی ندارد.');

$error = true;

}

if( !$error )

{

mail( $to , $subject , $message );

show_alert( 'پیام شما با موفقیت ارسال شد.' );

}

else show_alert('لطفا تمام موارد را پر کنید.');

}

else show_alert('لطفا تمام موارد را پر کنید.');

?>

<br /><a href="index.html" title="بازگشت به صفحه ی تماس با ما">index.html</a>

</body>

</html>

<<</code>>>

آبی: در این قسمت تابعی را تعریف می کنیم تا با استفاده از آن پیغام خطا یا موفقیت ما به صورت bold و با رنگ قرمز نمایش داده شود.

قرمز: در این قسمت با تعریف یک متغیر به نام error و قرار دادن مقدار آن برابر با false این امکان را ایجاد می کنیم که هر وقت خطایی در مقادیر وارد شده مشاهده شده ، مقدار آن را عوض کنیم به true تا در پایان عملیات ، امکان تشخیص این وجود داشته باشد که آیا خطایی در مقادیر هست یا نه؟ اگر مقدار true باشد یعنی خطا وجود دارد.

سبز: این متغیر ، مقدار آدرس ایمیل گیرنده ی پیام را مشخص می کند. شما می توانید ایمیل خود را در آن وارد کنید.

بنفش: در این قسمت ما با استفاده از تابع پیشفرض isset که در php وجود دارد بررسی می کنیم که آیا مقادیر وارد شده اند یا خیر. isset می تواند بی نهایت آرگومان بگیرد. اگر مقادیر وارد شده باشند. عملیات صورت می گیرد ، اما اگر وارد نشده باشد ، به کاربر پیغام "لطفا تمام موارد را وارد کنید" نشان داده می شود.

نکته: توجه داشته باشید که isset تنها بررسی می کند که آیا مقدار وجود دارد یا نه. یعنی اگر وجود داشته باشد و برابر "" باشد ، مقدار صحیح را بر می گرداند. پس مقدار خالی هم برای isset تعریف شده به حساب می آید. پس ما باید در این ساختار شرطی خود یک شرط دیگه که بررسی می کند آیا مقادیر وارد شده برابر با "" هستند یا خیر را نیز اضافه کنیم. در نتیجه ما در if دو شرط را در نظر می گیریم:

برابر نبودن متغیر ها با ""
تعریف شده بودن متغیر ها

نکته: حتما لازم است که قبل از بررسی مقدار متغیر هایمان ، ببینیم آن ها وجود دارند یا خیر (isset) در غیر این صورت اگر متغیر ها وجود نداشته باشند ، ارور نمایش داده خواهد شد.

بعد از این که مطمئن شدیم ، متغیر ها وجود دارند و برابر "خالی" نیستند ، برای راحت تر بودن در استفاده از آن ها ، هر کدام را در داخل یک متغیر ذخیره می کنیم ؛ یعنی:

( $name , $email , $subject , $message )

نارنجی: بعد از این کار ها ، ما باید صحت مقادیر وارد شده را بررسی کنیم. یعنی ساختار ایمیل و نام را بررسی کنیم. در php تابعی به نام preg_match وجود دارد که کار آن بررسی یک مقدار رشته ای در قبال عبارات باقاعده ای است که به آن داده می شود. لازم نیست حتما کار با عبارات باقاعده را همین الان یاد بگیرید. فقط بدانید که در '/^[a-zA-Z ابپتثجچهخدذرزژسشصضطظعغفقکگلمنوهیآ]+$/' بررسی می شود که آیا الگوی « حروف الفبای فارسی ، انگلیسی (کوچک و بزرگ) و اسپیس ( ) به تعداد حداقل یک کاراکتر » حفظ شده است یا خیر. اما در مقدار دومی یعنی '/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9_.-]+.[a-zA-Z0-9_.-]+$/' هم بررسی می کند که آیا مقدار از الگوی یک آدرس ایمیل یعنی « some text@some text.some text » تبعیت می کند یا خیر.

با گذاشتن علامت ! در قبل از تابع preg_match عمل بررسی صحت بر عکس می شود. این تابع اگر الگوی وارد شده حفظ شده باشد ، مقدار صحیح را بر می گرداند. اما چیزی که مدنظر ما است این است که اگر این الگو حفظ نشده بود ، پیغام خطا نمایش داده شود و مقدار $error به true تغییر کند.

مقدار متن و موضوع هم در این فرم تماس با ما از نظر من آزاد است. پس هیچ شرطی برای مقادیر آن ها وارد نمی کنم.

در شرط آخر بررسی می شود که آیا مقدار $error برابر با false است. اگر این طور بود (یعنی خطایی وجود نداشت) ایمیل ارسال می شود و پیغام موفقیت آمیز بودن عملیات به کاربر نمایش داده می شود. و در این جا است که فرم تماس با مای ما کار خود را به خوبی انجام می دهد.

در پایان کار هم ، یک لینک وجود داد تا کاربر دوباره بتوانذ به صفحه ی index.html باز گردد.

در نتیجه ، صفحه ی index.html هم اینطور خواهد شد:

index.html

<<<code>>>

<!DOCTYPE html>

<html>

<head>

<title>فرم تماس با ما - www.toolstheme.ir</title>

<meta charset="UTF-8" />

</head>

<body>

<form action="send.php" method="post">

<input type="text" placeholder="نام خود را وارد کنید" name="name"></input>

<br />

<input type="email" placeholder="آدرس ایمیل خود را وارد کنید" name="email"></input>

<br />

<input type="text" placeholder="موضوع پیام خود را وارد کنید" name="subject"></input>

<br />

<textarea name="message" placeholder="متن پیام شما"></textarea>

<br />

<input type="submit" value="ارسال"></input>

</form>

</body>

</html>

<<</code>>>

نکته ی مهم: از نظر امنیتی باید یک سری موارد در این فرم تماس با ما رعایت شود که ما در بالا آن ها را رعایت نکرده ایم. در مطالب آینده به موضوع امنیت فرم تماس با ما هم خواهیم پرداخت.

عنوان	پاسخ	بازدید	توسط
پنهان کردن عناصر صفحه در php	4	2560	snakeeye
طراحی باکس دانلود	6	2769	mary567
ارزیابی رایگان سایت ها و وبلاگ ها	25	9475	grimboy
انواع قالب اختصاصی	3	2313	ghraphic-home
بهترین افزونه های AMP وردپرس	2	2718	jack7788
کد پاپ اپ دو یا چند پنجره به طور همزمان پشت صفحه	23	9847	jack7788