آموزش برنامه نویسی در مشهد
فرم تماس با ما یکی از ابزارهای ضروری برای تبدیل کاربر به مشتری می باشد. در این مطلب قصد داریم به آموزش ایجاد یک فرم با PHP برای تماس با ما بپردازیم که رایگان بوده و می توانید بر روی وب سایت تان از آن استفاده نمایید. این فرم تماس واکنش گرا بوده و قابل استفاده بر روی دستگاه های مختلف می باشد.
فرم های تماس با ما، در ابتدا نوعی ارتباط سرد با کاربری که قرار است به مشتری تبدیل شود برقرار می کند. اهمیت بهترین فرم تماس با ما متاسفانه در سایت ها دچار آسیب شده است. به همین خاطر، ساخت یک فرم تماس در نگاه اول ساده می باشد و در واقع سخت است.
در این آموزش ما یک فرم تماس با ما با PHP داریم تا کاربر بتواند سوالات، توضیحات، بازخورد و جزئیات بیشتری را ارسال کند. در این فرم دو فایل PHP در زمینه های مختلف با دو شیوه ی متفاوت وجود دارد. در اسکریپت index.php اطلاعات فرم ارسال شده در پایگاه داده ذخیره میشود. در فایل send_contact_mail.php‚ یک کد PHP را برای ارسال ایمیل به منظور ارسال اطلاعات تماس تایید شده قرار گرفته است.
رابط کاربری فرم تماس با ما
رابط کاربری فرم تماس با ما PHP با نام، ایمیل، موضوع و فیلد محتوا به کاربر نمایش داده میشود که برای این منظور از کد اسکریپت HTML استفاده شده است. اگر به دنبال کد واکنش گرا برای رابط کاربری فرم تماس با ما هستید، مقاله را بررسی کنید. در این کد HTML، رابط کاربری کاملا ساده در نظر گرفته شده و بیشتر تمرکز بر روی نشان دادن قابلیت ارسال ایمیل یا ذخیره اطلاعات در پایگاه داده باشد.
این فرم شامل اسکریپت اعتبارسنجی jQuery با مقادیر بولین می باشد. اگر تابع اعتبارسنجی مقدار true را برگرداند، آن فرم برای PHP تایید میشود. در غیر این صورت، پیام های اعتبارسنجی به منظور اشاره به اینکه کاربر اطلاعات اشتباه وارد نموده است، در فرم نمایش داده میشوند.
<html>
<head>
<title>PHP Contact Form</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="form-container">
<form name="frmContact" id="" frmContact"" method="post"
action="" enctype="multipart/form-data"
onsubmit="return validateContactForm()">
<div class="input-row">
<label style="padding-top: 20px;">Name</label> <span
id="userName-info" class="info"></span><br /> <input
type="text" class="input-field" name="userName"
id="userName" />
</div>
<div class="input-row">
<label>Email</label> <span id="userEmail-info"
class="info"></span><br /> <input type="text"
class="input-field" name="userEmail" id="userEmail" />
</div>
<div class="input-row">
<label>Subject</label> <span id="subject-info"
class="info"></span><br /> <input type="text"
class="input-field" name="subject" id="subject" />
</div>
<div class="input-row">
<label>Message</label> <span id="userMessage-info"
class="info"></span><br />
<textarea name="content" id="content"
class="input-field" cols="60" rows="6"></textarea>
</div>
<div>
<input type="submit" name="send" class="btn-submit"
value="Send" />
<div id="statusMessage">
<?php
if (! empty($message)) {
?>
<p class='<?php echo $type; ?>Message'><?php echo $message; ?></p>
<?php
}
?>
</div>
</div>
</form>
</div>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"
type="text/javascript"></script>
<script type="text/javascript">
function validateContactForm() {
var valid = true;
$(".info").html("");
$(".input-field").css('border', '#e0dfdf 1px solid');
var userName = $("#userName").val();
var userEmail = $("#userEmail").val();
var subject = $("#subject").val();
var content = $("#content").val();
if (userName == "") {
$("#userName-info").html("Required.");
$("#userName").css('border', '#e66262 1px solid');
valid = false;
}
if (userEmail == "") {
$("#userEmail-info").html("Required.");
$("#userEmail").css('border', '#e66262 1px solid');
valid = false;
}
if (!userEmail.match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/))
{
$("#userEmail-info").html("Invalid Email Address.");
$("#userEmail").css('border', '#e66262 1px solid');
valid = false;
}
if (subject == "") {
$("#subject-info").html("Required.");
$("#subject").css('border', '#e66262 1px solid');
valid = false;
}
if (content == "") {
$("#userMessage-info").html("Required.");
$("#content").css('border', '#e66262 1px solid');
valid = false;
}
return valid;
}
</script>
</body>
</html>
فرآیند ورود اطلاعات در فرم تماس با ما PHP
در قالب فرم تماس با ما، برچسب فرم با متد درخواست POST مشخص میشود. در فرم های موفق که بعد از اعتبارسنجی JQUERY پذیرفته میشوند، اسکریپت PHP به اطلاعات از طریق متد درخواست $-POST دسترسی دارد.
فرم های تماس با ما همیشه با مسائل مربوط به اسپم یا هرزنامه ها روبرو هستند. تعداد زیادی ربات در سراسر وب وجود دارند که از فرم های تماس با ما مخصوصا فرم هایی که برای تایید و پذیرش اطلاعات می باشد، برای ارسال ایمیل های اسپم استفاده می کنند. در محتوای اسپم بیشتر لینک های مجاز برای تبلیغ وجود دارد. دو راه برای مسدود کردن این ایمیل های اسپم وجود دارد. یکی از این روش ها استفاده از اسکریپت سازی سفارشی شده honypot و منطق مربوط به آن می باشد و روش دوم، استفاده از اجرای برنامه captcha مانند google recapcha می باشد.
فایل های index.php و send_contact_mail.php از فایل های PHP به منظور مدیریت داده های فرم تماس با ما PHP استفاده می کند تا در پایگاه داده ذخیره کند و از طریق یک ایمیل ارسال کند. هر دو فایل PHP ذکر شده از قالب فرم تماس مشابه که با فایل contact-view.php ایجاد شده است، استفاده می کنند.
ارسال داده های ورودی فرم تماس از طریق ایمیل
در این قطعه کد PHP، اطلاعات فرم تماس با استفاده از $-POST دریافت شده اند. این اطلاعات برای تنظیم هدر ایمیل و بدنه ی آن و همچنین تنظیم تابع ایمیل PHP مور استفاده قرار میگیرد. هنگامی که ایمیل به گیرنده ارسال میگردد، پیام های موفق در رابط کاربری برای کاربر نمایش داده میشود. ارسال ایمیل را می توانید با پکیج PHPmailer انجام دهید و می توانید در PHP با سرور SMTP گوگل به ایمیل مراجعه کنید.
<?php
if(!empty($_POST["send"])) {
$name = $_POST["userName"];
$email = $_POST["userEmail"];
$subject = $_POST["subject"];
$content = $_POST["content"];
$toEmail = "admin@phppot_samples.com";
$mailHeaders = "From: " . $name . "<". $email .">\r\n";
if(mail($toEmail, $subject, $content, $mailHeaders)) {
$message = "Your contact information is received successfully.";
$type = "success";
}
}
require_once "contact-view.php";
?>
ذخیره سازی اطلاعات فرم تماس با ما در پایگاه داده
قطعه کد زیر به شما کمک میکند تا اطلاعات فرم تماس را در پایگاه داده ذخیره نمایید. برای این منظور ابتدا یک جدول پایگاه داده به نام tbl_content به فیلدهای name، ایمیل و سایر ستون های موجود در فرم تماس ایجاد کنید. پس از دریافت اطلاعات فرم PHP، آنها در mysql insert مورد استفاده قرار میگیرند. با اجرای insert، اطلاعات فرم تماس در پایگاه داده ذخیره میشوند. کد زیر اتصال پایگاه داده mysql و دسترسی به پایگاه داده را برای ورود اطلاعات تماس پیاده سازی میکند. بعد از ورود اطلاعات به صورت موفق در پایگاه داده، متغییر $message به ترتیب تنظیم میشود.
<?php
$conn = mysqli_connect("localhost", "root", "test", "blog_samples") or die("Connection Error: " . mysqli_error($conn));
mysqli_query($conn, "INSERT INTO tblcontact (user_name, user_email,subject,content) VALUES ('" . $name. "', '" . $email. "','" . $subject. "','" . $content. "')");
$insert_id = mysqli_insert_id($conn);
if(!empty($insert_id)) {
$message = "Your contact information is saved successfully";
?>
پس از اجرای قطعه کد بالا، اطلاعات تماس در جدول پایگاه داده اضافه میشود.
خروجی فرم تماس PHP
تصویر زیر خروجی فرم تماس با ما PHP را نمایش میدهد. دراین فرم، اطلاعات اعتبارسنجی شده و بعد از این کار پیام های موفقیت در برچسب فیلد فرم بعدی نمایش داده میشود. بعد از پردازش موفقیت آمیز اطلاعات فرم تماس PHP، پیام موفقیت پایین فرم تماس نمایش داده خواهد شد.
نتجیه نهایی مقاله ایجاد یک فرم با PHP :
آکادمی برنامه نویسان برگزار کننده کلاس های برنامه نویسی در مشهد می باشد و دوره های تخصصی برنامه نویسی و آموزش طراحی سایت مشهد را برگزار می کند جهت شرکت در این دوره می توانید با آموزشگاه تماس بگیرید
الان این فایلارو کجا باید بزاریم دقیق حاجی اصلا خوب نگفتی این موضوعو