آموزش ایجاد فرم تماس با ما برای وبسایت ها و وبلاگ ها
| مطالب آموزشی - برنامه نویسی پی اچ پی |
| فهرست مطلب |
|---|
| آموزش ایجاد فرم تماس با ما برای وبسایت ها و وبلاگ ها |
| 2 |
| تمامی صفحات |
امروزه یکی از نیازهای ضروری هر وبسایت و وبلاگی در ارتباط بودن با مخاطبین هست و همین امر موجب میشه تا مدیران وبسایت ها و وبلاگ ها در پی برقراری هرچه بهتر ارتباط با مخاطبینشون باشند.لذا امروز براتون نحوه ی ایجاد کردن یک فرم ساده "تماس با ما" رو آموزش میدم.
قابلیت های فرم:
دریافت اطلاعات مخاطب شامل : نام و نام خانوادگی ، پست الکترونیک
دریافت آدرس آی پی (IP) مخاطب
دریافت پیام مخاطب
و سرانجام ارسال تمام این موارد به آدرس پست الکترونیک شما
(همچنین نحوه ی Validation هم آموزش داده میشه که بتونید تکمیل کردن فرم رو کنترل کنید و مخاطب رو ملزم به تکمیل همه و یا برخی از مواردی که لازم میدونید بکنید).
خوب آماده اید؟ پس شروع می کنیم
مرحله اول
(توجه کنید : تگی که با رنگ قرمز مشخص شده است فقط برای مدیران وبلاگ ها و کسانی می باشد که سرور php در اختیار ندارند ، مدیران وبسایت ها بخش مذکور را حذف نمایند _مدیران وبلاگ ها حتما برای اطلاعات بیشتر به انتهای صفحه مراجعه کنید)
<html>
<head><title>تماس با ما</title></head>
<body style="font-family:tahoma; font-size:12px">
<div align="center">
<form method="Post" action="example.php">
<table style="border:hidden; font-family:tahoma; font-size:11px">
<tr><td><input name="Name" type="text" /></td><td>نام و نام خانوادگی*</td></tr>
<tr><td><input name="E-Mail" type="text" /></td><td> پست الکترونیک*</td></tr>
<tr><td><input name="Title" type="text" /></td><td>موضوع*</td></tr>
<tr><td><textarea name="Message" cols="25" rows="6" ></textarea></td><td>متن پیام*</td></tr>
<tr><td><input name="To" type="hidden" value="YOUR E-Mail HERE" /></td><td> </td></tr>
<tr><td><input type="reset" value="از نو" /></td><td><input type="submit" value="ارسال" /></td></tr>
</table>
</form>
</div>
</body>
</html>
اولین مرحله برای ایجاد هرگونه فرم اینه که شما کد فرم رو داشته باشید و یا اون رو با استفاده از اچ تی ام ال (HTML) طراحی کنید. ما هم اول از طراحی فرم HTML شروع می کنیم و برای منظم کردن فرم هم از جدول ها استفاده می کنیم (همچنین برای زیباتر کردن فرم میتونید از CSS استفاده کنید)
برای ایجاد فرم به تگ شروع <form> نیاز داریم که خصوصیات مختلفی رو شامل می شه:
<form method="Post" action="example.php">
همونطور که می بینید در تگ <form> از خاصیت method و action استفاده کردیم که به ترتیب نحوه ی ارسال اطلاعات و مکان ارسال اطلاعات برای پردازش شدن رو مشخص می کنند.
یکی از تگ هایی که می تونیم در تگ فرم ازش استفاده کنیم تگ <input> هست که تگ خاتمه نداره و با یک / در انتهای همون تگ بسته میشه:
<input name="Name" type="text" />نام و نام خانوادگی:
در اینجا اولین فیلد اطلاعاتی ساخته شد و از مخاطب نام و نام خانوادگی رو درخواست کردیم .خاصیت name نام و نام خانوادگی مخاطب رو با برچسب Name به صفحه ی php که در کد <form> مشخص کردیم ارسال می کنه تا پردازش بشه.خاصیت type هم مقدار text رو دریافت کرده و این نشون میده که فیلد ما یک فیلد متنی هست.
<input name="E-Mail" type="text" />پست الکترونیک:
در اینجا هم مانند فیلد قبل عمل کردیم ولی به جای name="Name" از name="E-Mail" استفاده کردیم.
<input name="Title" type="text" />موضوع پیام:
تگ <textarea> برای وارد کردن اطلاعات بیش از یک سطر بکار برده میشه و تگ خاتمه ی اون هم <textarea/> هست و خصوصیات مختلفی رو شامل میشه.
<textarea name="Message" cols="40" rows="6" ></textarea>پیام:
همونطور که گفتبم در اینجا به جای تگ <input> از تگ <textarea> استفاده کردیم تا فضای بیشتری برای نوشتن پیام در اختیار مخاطب قرار بدیم . شما می تونید با تغییر اعداد cols و rows اندازه ی این فیلد رو کنترل کنید.
<input type="submit" value="ارسال" />
در بخش بالا هم با استفاده از type="submit" دکمه ی ارسال را برای مخاطب نمایش می دهیم تا پس از تکمیل فرم بر روی آن کلیک کند و اطلاعات را به آدرس تعیین شده (که در اینجا example.php می باشد)بفرستد.
برای راحتی شما عزیزان هر دو کد ذکر شده رو برای دانلود براتون آماده کردم:
فرم تماس با ما (بخش html) برای مدیران وبسایت ها
فرم تماس با ما (بخش html) برای مدیران وبلاگ ها
برای مشاهده ی مرحله دوم و آموزش برنامه نویسی php فرم مربوطه به صفحه بعد بروید
| نظر |
|
|
||||||
|
||||||
|
||||||
|
||||||
|
|||||
|
||||||
|
|||||
|
||||||
|
|||||
|
||||||











