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

اسکریپت فرم تماس با ما

این فرم ۳ قسمت داره ، اولیش کدهای php ، دوم کدهای html که همون فیلدهای مخصوص پرکدن و دکمه ارسال هستش ، سوم هم یک استایل زیبا !

کد php فرم تماس با ما

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


<?php

if(isset($_POST['submit'])) {

if(!empty($_POST['message'])) {

 // send email

$accept = "پیام شما با موفقیت ارسال شد";
$to = "dr.arashheidari@gmail.com";
$mobile = $_POST['mobile'];
$name = $_POST['name'];
$city = $_POST['city'];
$from = $_POST['email'];
$user_message = $_POST['message'];

$body = "\n".
"نام: $name\n".
"وب سایت: $mobile\n".
"موضوع: $city\n".
"پیام: \n ".
"$user_message\n".
$headers = "From: $from \r\n";
$headers .= "Reply-To: $from \r\n";

 mail($to, $subject, $body, $headers);

} else {

$error = "لطفا فیلد پیام را تکمیل نمایید.";

}

}

?>
<?php if(!empty($error)) echo '<div class="error">'.$error.'</div>'; ?>
<?php if(!empty($accept)) echo '<div class="ok">'.$accept.'</div>'; ?>

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

کدهای html فرم تماس با ما

حالا در هر کجایی از صفحه ( دقت کنید در همون فایل قبلی که کدهای php رو قرار دادید حتما باید باشه ) که دوست دارید فیلدهای شما به نمایش در بیاد این کدها رو قرار بدید.


<div class="forms">
 <form action="" method="post">
 <label for="name"> نام : </label>
 <input type="text" class="form" value="" name="name">
 <br><br/><br/>
 <label for="email"> ایمیل : </label>
 <input type="text" id="email" value="" class="form-ltr" name="email">
 <br/><br/><br/>
 <label for="sub"> وب سایت : </label>
 <input type="text" id="sub" value="" class="form" name="mobile">
 <br/><br/><br/>
 <label for="sub">موضوع : </label>
 <input type="text" class="form" name="city">
 <br/><br/><br/>
 <label for="mess"> پیام : </label>
 <textarea class="form" id="mess" rows="7" name="message"></textarea>
 <br/><br/><br/><br/><br/><br/><br/><br/><br/>
 <input type="submit" name="submit" value=" ارسال ">
 </form>
 </div>

شما می تونید عبارات فیلد ها رو هرطور که دوست دارید ویرایش کنید.اگر هم دوست داشتید می تونید کم یا زیاد هم بکنید البته دقت کنید توی اون فرم php هم تغییراته لازمه رو مثل دیگر فیلد ها که هست انجام بدید.

شیوه نامه فرم ارتباط با ما

شیوه نامه زیر را به انتهای استایل قالب خودتون (style.css) اضافه کنید.یا می تونید در یک فایل جدا مثل contact.css ذخیره کنید و در قالب شیوه نامه رو فراخوانی کنید.


.error{
 width:330px;
 border:1px #d3400d solid;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 margin:0 0 10px 10px;
 padding:6px 6px 6px 6px;
 background:#ff8053;
}

.ok{
 width:400px;
 border:1px #5F7E1A solid;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 margin:0 0 10px 10px;
 padding:6px 6px 6px 6px;
 background:#B3DC5B;
 display:block;

}

.clear{clear:both}

form {
 margin:0px;
 padding:0px;
}

input, select, textarea {
 font-family:tahoma;
 padding:5px;
 font-size:11pt;
 border: 1px solid #cacaca;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
}
input[type="submit"]{
 font-family:tahoma;
 padding:5px;
 font-size:9pt;
 border: 1px solid #cacaca;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
}

input[type="submit"]:hover{
 font-family:tahoma;
 padding:5px;
 font-size:9pt;
 border: 1px solid #7613ae;
 background:#7613ae;
 color:#fff;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
}

.forms {
 direction: rtl;
 padding-right:20px;
 text-align: right;
 font: normal 11px Tahoma;
}
.forms h2 {
 font: bold 11px tahoma;
 padding: 8px 2px;
 border-bottom: 1px solid #CCC;
}

.forms label {
 width: 100px;
 float: right;
 margin: 5px 0 0 0;
}

.forms .form, .forms .form-ltr {
 width: 200px;
 float: right;
 padding: 2px;
 font: normal 11px Tahoma, Geneva, sans-serif;
 margin: 5px 0;
}
.forms .form-ltr {
 direction: ltr;
 text-align: left;
}
.forms .text {
 width: 250px;
 height: 100px;
 overflow: auto;
 font: normal 11px/1.4 Tahoma, Geneva, sans-serif;
}

بازم دقت کنید که کلاس هایی که توی این فرم تماس دارید یه موقع تو شیوه نماه خودتون نداشته باشید.اگر دارید فقط همون دوتا کلاس اول ( ok , error) رو اضافه کنید یا اگر دوست دارید بقیه هم باشن ، باید اسمشونو عوض کنید و توی اون کدهای html هم اسامی رو تطبیق بدید.

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

همچنین اگر وب سایتی با وردپرس دارید و از افزونه تماس با ما استفاده می کنید ، در مطالب پیشین در مورد شخصی سازی فرم تماس با ما و دادن یک ظاهر خوب با اون صحبت کردیم !

امتیاز شما از 1 تا 5
1 ستاره میدم به نوشته2 ستاره میدم به نوشته3 ستاره میدم به نوشته4 ستاره میدم به نوشته5 ستاره میدم به نوشته 7 رای
Loading...