امین بهشتی

Design Tutorials

طراحی وِب و گرافیک

آموزش ساخت یک فرم تماسِ یک دست و جذاب با استفاده از PHP و jQuery

خوب برای اولین پستِ وب سایت می‌خوام یک آموزش بسیار مفید و کاربردی برای شما بازدیدکنندگان محترم بزارم!

این آموزش به شما نشان می‌دهد که چگونه می‌توانید یک فرم تماسِ روان و یک دست و با ظاهر جذاب درست کنید که بازدیدکنندگان بدون ترک صفحۀ مورد نظر بتوانند از آن استفاده کنند.

فرم‌های تماس می‌توانند راه مناسبی برای برقراری ارتباط کاربران با صاحب سایت باشند. استفاده از این فرم‌ها ساده بوده و از آنجایی که ایمیل صاحب سایت را نمایش نمی‌دهند، جلوی بسیاری از هرزه‌نامه‌ها (spam) را می‌گیرند.

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

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

در این آموزش ما یک فرم تماسِ روان و یک دست، با ظاهر خوبی درست خواهیم کرد که کاربران بتوانند تنها با کلیک بر روی یک لینک موجود در صفحۀ بازدیدی، از آن استفاده کنند. در طول این آموزش موضوعات مختلفی را کاوش خواهیم کرد، از جمله:

  • فیلدهای فرم HTML5
  • چطور از تکنیکهای fallback استفاده کنیم تا حتی در صورتی که مرورگر جاوا اسکریپت را غیر فعال کرده باشد، فرم قابل اجرا باشد.
  • استفاده از تکنیکهای CSS برای ساختن فرم‌های جذاب
  • نوشتن یک فرم ایمیل کنندۀ امن با استفاده از PHP
  • اضافه کردن افکت‌های انیمیشن به اجزاء صفحه با استفاده از jQuery
  • استفاده از jQuery برای ایجاد درخواست‌های Ajax

قبل از اینکه شروع کنید، با کلیک بر روی دکمۀ پیش‌نمایش در پایین نتیجه نهایی این آموزش را چک کنید. در این پیش‌نمایش یک صفحۀ جدیدی برایتان باز می‌شود که در آن یک سری متن همراه با 2 تا لینک “ارسال ایمیل به ما” در آن قرار دارند. یکی از این 2 لینک را کلیک کنید تا فرم تماس نمایش داده شود.

نکته: فرم تماسی در پیش‌نمایش قرار دارد فقط یک نمایش (ماکت مانندی) از فرم می‌باشد و در واقع ایمیلی نمی‌فرستد امّا فرمی که در پایین با هم خواهیم ساخت کامل بوده و بخوبی کار می‌کند.

گام اول : ایجاد نشانه گذاری ها (markup)

با HTML صفحه‌مان شروع می کنیم. این شامل خود فرم – در ابتدا که صفحه بارگزاری می‌شود آن را توسط JavaScript مخفی خواهیم کرد – و همچنین یک سری متن ساختگی و چند تا لینک “ارسال ایمیل به ما” که وقتی بر رویشان کلیک شود فرم را نمایش می‌دهند.

<!doctype html>
<html lang="en">
<head>

<title>یک فرم تماس جذاب با استفاده از PHP و jQuery</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

</head>
<body>

<div class="wideBox">
  <h1>یک فرم تماس جذاب با استفاده از jQuery و PHP</h1>
  <h2>بر روی یکی از لینکهای "ارسال ایمیل به ما" کلیک کنید...</h2>
</div>

<div id="content">

  <p style="padding-bottom: 50px; font-weight: bold; text-align: center;"><a style="text-decoration: none;" href="#contactForm">~ ارسال ایمیل به ما ~</a></p>

    <!-- محتوی در این قسمت قرار میگیرد -->

  <p style="padding-top: 50px; font-weight: bold; text-align: center;"><a style="text-decoration: none;" href="#contactForm">~ ارسال ایمیل به ما ~</a></p>
 
</div>

<form id="contactForm" action="processForm.php" method="post">

  <h2>ارسال ایمیل به ما</h2>

  <ul>

    <li>
      <label for="senderName">نام شما</label>
      <input type="text" name="senderName" id="senderName" placeholder="لطفاً نام خود را وارد کنید" required="required" maxlength="40" />
    </li>

    <li>
      <label for="senderEmail">آدرس ایمیل شما</label>
      <input type="email" name="senderEmail" id="senderEmail" placeholder="لطفاً آدرس ایمیل خود را وارد کنید" required="required" maxlength="50" />
    </li>

    <li>
      <label for="message" style="padding-top: .5em;">پیغام شما</label>
      <textarea name="message" id="message" placeholder="لطفاً پیغامتان را بنویسید" required="required" cols="80" rows="10" maxlength="10000"></textarea>
    </li>

  </ul>

  <div id="formButtons">
    <input type="submit" id="sendMessage" name="sendMessage" value="ارسال ایمیل" />
    <input type="button" id="cancel" name="cancel" value="انصراف" />
  </div>

</form>

<div id="sendingMessage" class="statusMessage"><p>در حال ارسال پیام شما. لطفاً منتظر بمانید...</p></div>
<div id="successMessage" class="statusMessage"><p>پیغامتان با موفقیت ارسال شد. سپاس!</p></div>
<div id="failureMessage" class="statusMessage"><p>در ارسال پیامتان مشکلی وجود داشت. لطفاً دوباره تلاش بفرمایید</p></div>
<div id="incompleteMessage" class="statusMessage"><p>لطقاً تمام قیلدهای فرم را قبل از ارسال پر کنید.</p></div>

</body>
</html>

فرم داده‌هایش را به یک اسکریپت در processForm.php می فرستد که کار اصلی فرستادن ایمیل را انجام می‌دهد.(اسکریپت PHP را اندکی بعد خواهیم نوشت.) با تنظیم صفت action به “processForm.php“، ما اطمینان حاصل می‌کنیم که فرم حتی در حالتی که JavaScript غیر فعال است قابل استفاده است. بعداً، جاوا اسکریپت ما صفت action را خواهد خواند تا بداند درخواست Ajax را به کجا خواهد فرستاد. خود فرم از برخی ویژگی‌های فرم‌های HTML5 استفاده می‌کند از جمله placeholders، نوع فیلد email، و صفت required تا از پر شدن همۀ فیلدها اطمینان حاصل کند. ما همچنین تاییدیه جاوا اسکریپت برای مرورگرهایی که هنوز تاییدیه HTML5 را پشتیبانی نمی‌کنند اضافه خواهیم کرد.

گام 2 : اضافه کردن CSS

اکنون ما CSS را به صفحه‌مان اضافه مکنیم تا به صفحه و فرم مان استایل بدهیم. این کدهای CSS محل فرم را مشخص می‌کنند و پیغام های فرم را وسط‌چین کرده و همچنین به فرم و فیلدهای فرم استایل می‌دهد.

<style type="text/css">


/* Add some margin to the page and set a default font and colour */

body {
  margin: 30px;
  font-family: Tahoma, Arial;
  line-height: 1.8em;
  color: #333;
}


/* Set the content dimensions */

#content {
  width: 800px;
  padding: 50px;
  margin: 0 auto;
  display: block;
  font-size: 1.2em;
}

#content h2 {
  line-height: 1.5em;
}


/* Add curved borders to various elements */

#contactForm, .statusMessage, input[type="submit"], input[type="button"] {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;  
  border-radius: 10px;
}


/* Style for the contact form and status messages */

#contactForm, .statusMessage {
  color: #666;
  background-color: #ebedf2;
  background: -webkit-gradient( linear, left bottom, left top, color-stop(0,#dfe1e5), color-stop(1, #ebedf2) );
  background: -moz-linear-gradient( center bottom, #dfe1e5 0%, #ebedf2 100% );  
  border: 1px solid #aaa;
  -moz-box-shadow: 0 0 1em rgba(0, 0, 0, .5);
  -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, .5);
  box-shadow: 0 0 1em rgba(0, 0, 0, .5);
  opacity: .95;
}


/* The form dimensions */

#contactForm {
  width: 40em;
  height: 33em;
  padding: 0 1.5em 1.5em 1.5em;
  margin: 0 auto;
}


/* Position the form in the middle of the window (if JavaScript is enabled) */

#contactForm.positioned {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin-top: auto;
  margin-bottom: auto;
}


/* Dimensions and position of the status messages */

.statusMessage {
  display: none;
  margin: auto;
  width: 30em;
  height: 2em;
  padding: 1.5em;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.statusMessage p {
  text-align: center;
  margin: 0;
  padding: 0;
}


/* The header at the top of the form */

#contactForm h2 {
  font-size: 2em;
  font-style: italic;
  letter-spacing: .05em;
  margin: 0 0 1em -.75em;
  padding: 1em;
  width: 19.5em;  
  color: #aeb6aa;
  background: #dfe0e5 url('images/stamp.jpg') no-repeat 15em -3em; /* http://morguefile.com/archive/display/606433 */
  border-bottom: 1px solid #aaa;
  -moz-border-radius: 10px 10px 0 0;
  -webkit-border-radius: 10px 10px 0 0;  
  border-radius: 10px 10px 0 0;
}


/* Give form elements consistent margin, padding and line height */

#contactForm ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#contactForm ul li {
  margin: .9em 0 0 0;
  padding: 0;
}

#contactForm input, #contactForm label {
  line-height: 1em;
}


/* The field labels */

label {
  display: block;
  float: right;
  clear: right;
  text-align: right;
  width: 28%;
  padding: .4em 0 0 0;
  margin: .15em 0 0 .5em;
  font-weight: bold;
}


/* The fields */

input, textarea {
  display: block;
  margin: 0;
  padding: .4em;
  width: 67%;
  font-family: Tahoma, Arial;
  font-size: 1em;
	
	direction: rtl;
  border: 1px solid #aaa;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;    
  border-radius: 5px;
  -moz-box-shadow: rgba(0,0,0,.2) 0 1px 4px inset;
  -webkit-box-shadow: rgba(0,0,0,.2) 0 1px 4px inset;
  box-shadow: rgba(0,0,0,.2) 0 1px 4px inset;
  background: #fff;
}

textarea {
  height: 13em;
  line-height: 1.5em;
  resize: none;
	text-align: right;
}


/* Place a border around focused fields, and hide the inner shadow */

#contactForm *:focus {
  border: 1px solid #66f;
  outline: none;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}


/* Display correctly filled-in fields with a green background */

input:valid, textarea:valid {
  background: #dfd;
}

#senderEmail:focus {
	text-align: left;
    direction: ltr;
}
/* The Send and Cancel buttons */

input[type="submit"], input[type="button"] {
  float: left;
  margin: 2em 1em 0 1em;
  width: 10em;
  padding: .5em;
  border: 1px solid #666;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;  
  border-radius: 10px;
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  color: #fff;
  background: #0a0;
  font-size: 1em;
  line-height: 1em;
  font-weight: bold;
  opacity: .7;
  -webkit-appearance: none;
  -moz-transition: opacity .5s;
  -webkit-transition: opacity .5s;
  -o-transition: opacity .5s;
  transition: opacity .5s;
}

input[type="submit"]:hover,
input[type="submit"]:active,
input[type="button"]:hover,
input[type="button"]:active {
  cursor: pointer;
  opacity: 1;
}

input[type="submit"]:active, input[type="button"]:active {
  color: #333;
  background: #eee;
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
}

input[type="button"] {
  background: #f33;
}


/* Header/footer boxes */

.wideBox {
  clear: both;
  text-align: center;
  margin: 70px;
  padding: 10px;
  background: #ebedf2;
  border: 1px solid #333;
}

.wideBox h1 {
  font-weight: bold;
  margin: 20px;
  color: #666;
  font-size: 1.5em;
  direction: rtl;
}
.wideBox h2 {
	direction: rtl;
}

</style>

<!-- Some IE7 hacks and workarounds -->

<!--[if lt IE 8]>
<style>

/* IE7 needs the fields to be floated as well as the labels */

input, textarea {
  float: right;
}

#formButtons {
  clear: both;
}

/*
  IE7 needs an ickier approach to vertical/horizontal centring with fixed positioning.
  The negative margins are half the element's width/height.
*/

#contactForm.positioned, .statusMessage {
  left: 50%;
  top: 50%;
}

#contactForm.positioned {
  margin-left: -20em;
  margin-top: -16.5em;
}

.statusMessage {
  margin-left: -15em;
  margin-top: -1em;
}

</style>
<![endif]-->

بگزارید به بخشهای جالبی از این کدهای CSS یک نگاهی بیاندازیم: 1 : استایل برای فرم تماس و پیغامهای status ما با استفاده از webkit-gradient- و moz-linear-gradient-، به فرم و جعبه‌های status از بالا تا پایینشان یک شیب (gradient) می‌دهیم، و همچنین توسط box-shadow یک سایه افتاده (drop shadow) می‌دهیم. در نهایت، به فرم و جعبه‌های پیام یک حالت کدری ( (95%) opacity of .95 ) می‌دهیم، که باعث می‌شود که متن صفحه مان از پشت فرم دیده شود.

2: جای دادن فرم در وسط پنجره (اگر JavaScript فعال باشد) در ابتدا، ما فرم را در واقع بصورت inline بعد از محتویات صفحه قرار می‌دهیم. این به این دلیل است که فرم برای مرورگرهایی که جاوا اسکریپشان غیر فعال است، بدون مداخله در محتویات صفحه قابل استفاده باشد. اما برای مرورگرهای دارای JavaScript، ما می‌خواهیم که فرم در وسط پنجره و در بالای محتویات صفحه نمایش داده شود. دستور contactForm.positioned# ما همین کار را انجام می‌دهد. این از موقعیت‌گیری ثابت استفاده می‌کند، مقدارهای top، bottom، left و right را به صفر سِت می‌کند، و اطمینان حاصل می‌کند که هر 4 تا margin به auto سِت شده‌اند. این عنصر مورد نظر را در بسیاری مرورگرهای جدید، هم بصورت افقی و هم عمودی در وسط قرار می‌دهد. اندکی بعد ما از JavaScript مان استفاده خواهیم کرد تا کلاس positioned را به فرم اضافه کنیم. نکته: ما موقعیت جعبه های پیام را نیز به همین روش انجام دادیم.

3 : قسمت سربرگ در بالای فرم فرم ما دارای یک سربرگ با عنوان “ارسال ایمیل به ما…” همراه با تصویر یک تمبر می‌باشد. دستورات contactForm h2# به این سربرگ استایل می‌دهند. ما به متن این این قسمت یک استایل کج(italic) و همچنین کمی بین حروف فاصله می‌دهیم. همچنین با استفاده از margin و padding مقداری فضا دور و داخل این سربرگ ایجاد می‌کنیم. ما از مقدار کمی منفی (75em.-) برای margin چپ استفاده می‌کنیم تا بتوانیم از padding فرم گذشته و سربرگ دقیقاً در گوشۀ چپ فرم قرار گیرد. همپنین عرض سربرگ را به اندازۀ 19.5em تعیین می‌کنیم تا با اندازۀ عرض فرم برابر باشد. ما همچنین رنگ سربرگ را یک پس زمینۀ تیره بهش می‌دهیم و تصویر تمبر را در گوشۀ راست بالا قرار می‌دهیم، و یک حاشیۀ نازک برای قسمت پایین اضافه می‌کنیم، و به گوشه‌های بالا حالت خمیدگی اضافه می‌کنیم.

4: فیلدها به فیلدهای input و textarea فونت Tahoma, Arial می‌دهیم، یک حاشیۀ گرد با استفاده از border-radius و یک سایۀ داخلی با استفاده از دستور box-shadow. لیبل‌ها را هم دستور float: left می‌دهیم تا در سمت راست فیلدها قرار گیرند. وقتی روی فیلدی focus می‌شود (وقتی که روی آن کلیک شود و یا با استفاده از کلید tab روی آن بیاید)، ما به آن یک حاشیۀ آبی می‌دهیم و سایۀ آن را حذف می‌کنیم. همچنین با استفاده از دستور outline: none خط بیرونی آبی را که توسط بعضی مرورگرها بهش اضافه می‌شود را بر می‌داریم. و در نهایت برای مرورگرهایی که تاییدیۀ HTML5 را پشتیبانی می‌کنند، با استفاده از دستور valid pseudo-class: به فیلدهایی که بدرستی پر شده‌اند یک پس زوینۀ سبز رنگ می‌دهیم.

5: دکمه های ارسال و انصراف input[type="submit"] دکمۀ ارسال ایمیل را انتخاب می‌کند و input[type="button"] دکمۀ انصراف را انتخاب می‌کند. ما آنها را در قسمت چپ (float: left) قرار می‌دهیم تا کنار هم (side by side) قرار گیرند و همچنین با اندکی margin مقداری فضا بهشان می‌دهیم. با دادن عرض ثابت و مقداری padding ، یک اندازۀ مناسبی بهشان می‌دهیم. گوشه‌های گرد و یک سایۀ دقیقی اضافه می‌کنیم، و رنگهای پس‌زمینه و متنها را مشخص می‌کنیم. شفافیت آنها را به میزان کمی ست می‌کنیم (opacity: .7) و وقتی که hover می‌شوند کامل شفافشان می‌کنیم تا آنها را برجسته کنیم. برای اینکه کدری آن به آرامی محو شود از یک حالت عبور CSS استفاده می‌کنیم. نهایتاً، وقتی که دکمه‌ها کلیک شدند، (active:) سایه را به داخل دکمه انتقال می‌دهیم تا یک حالت فشردن بهش بدهیم، و بهشان یک طرح رنکی سیاه روی سفید بدهیم.

گام 3 : ساختن فرم ارسال کنندۀ ایمیل PHP اکنون ما صفحۀ فرم مان را ایجاد کردیم، و و فرم را استایل دادیم. قدم بعدی ایجاد یک اسکریپت کوتاه PHP هست که کار اصلی ارسال ایمیل را انجام دهد. این اسکریپت در سمت وب سرور قرار خواهد گرفت. زمانی که کاربر فرم را ارسال می‌کند، اطلاعات فرم به اسکریپت PHP ارسال می‌شود که بعداً ایمیل را ارسال می‌کند و یک جوابی حاوی اینکه ایمیل با موفقیت ارسال شد یا نه را برمی‌گرداند. این اسکریپت را که در زیرمشاهده می‌کنید – آن را با نام processForm.php در همان پوشه‌ای که صفحۀ فرم را در گامهای 1 و 2 ایجاد کردید ذخیره کنید:

<?php

// Define some constants
define( "RECIPIENT_NAME", "فرم تماس" );
define( "RECIPIENT_EMAIL", "emaileshoma@example.com" );
define( "EMAIL_SUBJECT", "پیام بازدید کننده" );

// Read the form values
$success = false;
$senderName = isset( $_POST['senderName'] ) ? preg_replace( "/[^\.\-\' ا-یa-zA-Z0-9]/u", "", $_POST['senderName'] ) : "";
$senderEmail = isset( $_POST['senderEmail'] ) ? preg_replace( "/[^\.\-\_\@a-zA-Z0-9]/", "", $_POST['senderEmail'] ) : "";
$message = isset( $_POST['message'] ) ? preg_replace( "/(From:|To:|BCC:|CC:|Subject:|Content-Type:)/", "", $_POST['message'] ) : "";

// If all values exist, send the email
if ( $senderName && $senderEmail && $message ) {
  $recipient = RECIPIENT_NAME . " <" . RECIPIENT_EMAIL . ">";
  $headers  = 'MIME-Version: 1.0' . "\r\n";
  $headers .= 'Content-type: text/html; charset=UTF-8' . "\r\n";
  $headers .= "From: " . $senderName . " <" . $senderEmail . ">";
  $success = mail( $recipient, EMAIL_SUBJECT, $message, $headers );
}

// Return an appropriate response to the browser
if ( isset($_GET["ajax"]) ) {
  echo $success ? "success" : "error";
} else {
?>
<html>
  <head>
    <title>سپاس!</title>
  </head>
  <body>
  <?php if ( $success ) echo "<p style=\"direction: rtl;\">با تشکر از ارسال پیامتان.</p>" ?>
  <?php if ( !$success ) echo "<p style=\"direction: rtl;\">در ارسال پیامتان مشکلی وجود داشت. لطفاً دوباره تلاش بفرمایید.</p>" ?>
  <p style="direction: rtl;">برای برگشتن به صفحۀ قبلی دکمۀ back مرورگرتان را کلیک کنید.</p>
  </body>
</html>
<?php
}
?>

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

1) ابتدا برای آدرس ایمیل کسی که ایمیل‌ها را دریافت خواهد کرد یک سری گزینه‌های پیکربندی را تعریف می‌کنیم. (اینها را به نام و آدرس ایمیل خود تغییر دهید.) ما همچنین یک موضوع برای ایمیل ست می‌کنیم.

2) خواندن مقادیر فرم سپس ما 3 فیلد فرم در اطلاعات ارسال شده را چک می‌کنیم، senderName، senderEmail و message. برای هر فیلد، ما بررسی می‌کنیم که آیا آن فیلد وجود دارد یا نه. اگر دارد مقادیر آنها را از بین یک سری عبارات معینی پاس می‌دهیم تا هر کاراکتر مخرب مهمی که یک اسپمر احتمالاً از آنها استفاده کند را حذف کنیم، و نتیجه را در یک متغیر ذخیره کنیم. اگر چیزی وجود نداشت آنگاه آن متغیر را تهی ست می‌کنیم.

3) اگر تمام مقادیر موجود هستند، ایمیل را ارسال کن اگر هر 3 فیلد حاوی اطلاعات باشند ایمیل را ارسال میکنیم. ابتدا ما string مربوط به گیرنده را از نام و آدرس ایمیل گیرنده ایجاد می‌کنیم. سپس بخش هدر ایمیل را روی UTF-8 تنظیم می‌کنیم تا کلمات فارسی درست نمایش یابند. سپس یک “:From” به هدر پیغام توسط نام و آدرس ایمیلی که بازدید کننده در فرم وارد کرده، اضافه می‌کنیم. این همان مقدار “:From” است که گیرنده در برنامۀ ایمیل خود خواهد دید. در نهایت با استفاده از تابع ()PHP mail ایمیل را ارسال می‌کنیم و مقدار پاسخ را در متغیر $success ذخیره می‌کنیم. ( اگر ()mail توانست ایمیل را ارسال کند مقدار true را بر می‌گرداند و در غیر این صورت false بر می‌گرداند.)

4) برگرداندن یک پاسخ مناسب برای مرورگر بعد از تلاشمان برای ارسال ایمیل، یک پیغام مناسب “موفقیت” یا “خطاء” به مرورگر برمی‌گردانیم. اگر URL درخواست حاوی یک پارامتر Ajax باشد پس میفهمیم که فرم از طریق Ajax با استفاده از کد JavaScript مان ارسال شده، پس ما به سادگی مقدار success یا error را به JavaScript برمی‌گردانیم که بعداً یک پیغام مناسب به کاربر نمایش خواهد داد. اما اگر، فرم بدون استفاده از Ajax ارسال شده باشد پس احتمالاً کاربر JavaScript را در مرورگر خود غیر فعال کرده است. در این حالت، ما یک پیغامی در مرورگر نمایش می‌دهیم تا با دستورالعمل‌هایی به کاربر کمک کند تا به صفحۀ قبلی برگردد.

گام 4 : قرار دادن کتابخانۀ jQuery و ست کردن تاخیر ما برای اکثر کارهای سنگین از jQuery استفاده خواهیم کرد، پس قدم اول این است که کتابخانۀ jQuery را در قسمت head صفحه جای دهیم.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

نکته: اینجا ما مستقیماً یه کتابخانۀ jQuery در CDN گوگل لینک داده‌ایم، اما شما می‌توانید این کتابخانه را دانلودکرده و روی سرور خودتان میزبانی کنید. ما همچنین یک متغیر سراسری، messageDelay، اضافه می‌کنیم، تا مقدار زمانی که جعبه‌های پیغام روی صفحا نمایش داده می‌شوند را کنترل کنیم. این مقدار برحسب میلی ثانیه هستش. می‌توانید این مقدار را به دلخواه خود تغییر دهید:

<script type="text/javascript">
 
var messageDelay = 2000;  // How long to display status messages (in milliseconds)

گام 5: نوشتن تابع init() اولین مرحله برای بالا آمدن چاوا اسکریپت فرم‌مان تابع ()init می‌باشد. این تابع فرم را طوری ست می‌کند که بنا به درخواست نمایش یا مخفی شود، و همچنین فرم را طوری تغییر می‌دهد که فرم بجای اینکه توسط مرورگر ارسال شود، با JavaScript ما ارسال شود. کد به شرح زیر می باشد:

//Init the form once the document is ready
$( init );
 
 
// Initialize the form
 
function init() {
 
  // Hide the form initially.
  // Make submitForm() the form’s submit handler.
  // Position the form so it sits in the centre of the browser window.
  $('#contactForm').hide().submit( submitForm ).addClass( 'positioned' );
 
  // When the "Send us an email" link is clicked:
  // 1. Fade the content out
  // 2. Display the form
  // 3. Move focus to the first field
  // 4. Prevent the link being followed
 
  $('a[href="#contactForm"]').click( function() {
    $('#content').fadeTo( 'slow', .2 );
    $('#contactForm').fadeIn( 'slow', function() {
      $('#senderName').focus();
    } )
 
    return false;
  } );
   
  // When the "Cancel" button is clicked, close the form
  $('#cancel').click( function() {
    $('#contactForm').fadeOut();
    $('#content').fadeTo( 'slow', 1 );
  } ); 
 
  // When the "Escape" key is pressed, close the form
  $('#contactForm').keydown( function( event ) {
    if ( event.which == 27 ) {
      $('#contactForm').fadeOut();
      $('#content').fadeTo( 'slow', 1 );
    }
  } );
 
}

بیایید قسمت هایی از این کدها را بررسی کنیم: 1) اجرای init زمانی که داکیومنت آماده است ما از شی‌ء $ برای راه انداختن تابع ()init بهنگام آناده شدن DOM استفاده می‌کنیم.

2) مخفی کردن فرم، ست کردن هندلر ارسال و تنظیم موقعیت فرم اولین کاری که در تابع ()init انجام می‌دهیم اینه که یک سری تغییراتی در فرم‌مان می‌دهیم، contactForm#. نخست با استفاده از متد ()hide در jQuery فرم را مخفی می‌کنیم. سپس ایونت هندلر submit را به تابع ()submitForm ست می‌کنیم (که اندکی بعد این تابع را خواهیم نوشت). در نهایت کلاس positioned سی‌اس‌اس را به فرم اضافه می‌کنیم تا موقعیت آن را در وسط پنجره قرار دهیم.

3) تنظیم لینک های “ارسال ایمیل به ما” طوری که فرم را باز کنند در قرم بعدی یک تابع ایونت هندلر ناشناس را به رخدادهای (ایونتهای) click لینکهای “ارسال ایمیل به ما” می‌پیوندیم. این تابع محتویات صفحه را محو( کم رنگ) می‌کند تا فقط در پس زمینه قابل رؤیت باشد. و فرم را به داخل محو می‌کند و فوکوس را روی فیلد “نام شما” قرار می‌دهد تا فرم آماده برای پر کردن توسط کاربر باشد. در نهایت، تابع مقدار false برمی‌گرداند تا لینک‌ها نتوانند دنبال شوند.

4) بستن فرم هنگام فشرده شدن دکمۀ “لغو” اکنون یک تابع ایونت هندلر ناشناس دیگری برای ایونت click دکمۀ “لغو” می‌پیوندیم، تا زمانی که کاربر بتواند با کلیک کردن دکمه فرم را ببندد. این تابع بسادگی فرم را محو می‌کند و محتویات صفحه را از حالت محو برمی‌گرداند.

5) بستن فرم زمانی که دکمۀ “Escape” فشرده شود بطور مشابه یک تابع برای ایونت keydown فرم پیوند می‌دهیم تا بتوانیم هر دکمه‌ای که کاربر هنگام نمایش فرم کلیک می‌کند را بخوانیم. در این تابع ما چک می‌کنیم که آیا کاربر دکمۀ escape (با کد کاراکتری : 27) را فشرده است یا نه. اگر فشرده باشد فرم را محو می‌کنیم و محتویات صفحه زا از حالت محو در می‌آوریم.

گام 6: نوشتن تابع ()submitForm

اکنون فرم ما طوری ست شده است که بجای اینکه به روش معمول ارسال شود، تابع ()submitForm را موقع ارسال اجرا می‌کند. این تابع باید یک سری صحت‌هایی را بررسی کند و اگر همه درست بودند، فرم را از طریق Ajax به اسکریپت PHP ارسال کند. این کل تابع می باشد :

//Submit the form via Ajax

function submitForm() {
  var contactForm = $(this);
 
  // Are all the fields filled in?
 
  if ( !$('#senderName').val() || !$('#senderEmail').val() || !$('#message').val() ) {
 
    // No; display a warning message and return to the form
    $('#incompleteMessage').fadeIn().delay(messageDelay).fadeOut();
    contactForm.fadeOut().delay(messageDelay).fadeIn();
 
  } else {
 
    // Yes; submit the form to the PHP script via Ajax
 
    $('#sendingMessage').fadeIn();
    contactForm.fadeOut();
 
    $.ajax( {
      url: contactForm.attr( 'action' ) + "?ajax=true",
      type: contactForm.attr( 'method' ),
      data: contactForm.serialize(),
      success: submitFinished
    } );
  }
 
  // Prevent the default form submission occurring
  return false;
}

طرز کار تابع به قرار زیر است:

1) ذخیرۀ فرم تماس را در یک متغیر از آنجایی که در طول تابع زیاد از آن استفاده خواهیم کرد، با ذخیرۀ عنصر فرم تماس در یک متغیری بنام contactForm شروع می‌کنیم.

2) بررسی پر شدن تمامی فیلدها اکنون ما با استفاده از متد ()val در jQuery هر فیلد را بررسی می‌کنیم که آیا پر شده است یا نه.

3) نمایش یک اخطار اگر فرم کامل نباشد اگر یک یا بیش از یکی از فیلدها خالی باشد، ما فرم را محو می‌کنیم و div مربوط به incompleteMessage# را نمایش می‌دهیم که حاوی پیغام ” لاطفاً تمام فیلدها را پر کنید…” می‌باشد. ما این پیغام را برحسب زمانی که در messageDelay تنطیک کردیم نمایش می‌دهیم و سپس پیغام را محو کرده و فرم دوباره نمایش داده می‌شود تا کاربر فرم را کامل کند.

4) ارسال فرم درصورتی که کامل باشد اگر فرم کامل باشد، اول فرم را محو می‌کنیم و جعبۀ پیغام “درحال ارسال پیام شما…” را نمایش می ‌هیم. اکنون ما متد ()ajax را فراخوانی می‌کنیم تا فرم را از طریق Ajax به اسکریپت PHP ارسال کنیم. مواردی که به متد ارسال می‌کنیم شامل : url، type، data و success می‌باشد.

5) در نهایت، ایونت هندلر ما مقدار false را بر می‌گرداند تا اینکه از ارسال فرم به روش معمول جلوگیری کند.

گام 7: نوشتن تابع submitFinished() آخرین تابعی که باید بنویسیم تابع ()submitFinished می‌باشد. این تابع زمانی فراخوانی می‌شود که جواب Ajax از اسکریپت PHP نوسط مرورگر دریافت شده است. این تابع باید جواب بررسی کند و یک پیغام موفقیت یا خطای مناسبی نمایش دهد. کد به قرار زیر می باشد :

//Handle the Ajax response

function submitFinished( response ) {
  response = $.trim( response );
  $('#sendingMessage').fadeOut();
 
  if ( response == "success" ) {
 
    // Form submitted successfully:
    // 1. Display the success message
    // 2. Clear the form fields
    // 3. Fade the content back in
 
    $('#successMessage').fadeIn().delay(messageDelay).fadeOut();
    $('#senderName').val( "" );
    $('#senderEmail').val( "" );
    $('#message').val( "" );
 
    $('#content').delay(messageDelay+500).fadeTo( 'slow', 1 );
 
  } else {
 
    // Form submission failed: Display the failure message,
    // then redisplay the form
    $('#failureMessage').fadeIn().delay(messageDelay).fadeOut();
    $('#contactForm').delay(messageDelay+500).fadeIn();
  }
}
 
</script>

نحوه کار این تابع هم فکر کنم ساده باشه و احتیاج به توضیح خاصی نباشد!

امیدوارم از این آموزش استفاده کافی را برده باشید. اگر کمی و کاستی داشت به بزرگی خودتان ببخشید!

موفق باشید.

منبع: Elated.com

درباره امین بهشتی

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

  1. سلام بر شما مهندس عزیز اولا تشکر خیلی خوب بود

    من از این کدها استفاده کردم منتها یه مشکل بزرگ دارم

    اگر action رو اینجوری وارد کنم http//accfile.com/processForm.php هنگام ارسال این پیغام ظاهر میشه در حال ارسال پیام شما. لطفاً منتظر بمانید… و همینم میمونه و ایمیلیم ارسال نمیشه اگر هم بصورت پیش فرضی که خودتون توی کد گذاشته بودید بزاریم اکشن رو مثلا processForm.php میگه مشکلی پیش امد و دوباره تلاش کنید و از این ححرفا میشه منو راهنمائی کنیددددددددددددددد لطفا

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

    با تشکر

  3. با تشکر فراوان از اینکه کدهای مربوطه را اصلاح نمودید.
    بنده با یک مشکل دیگر در این خصوص برخوردم. وقتی در فایل php ایمیل یاهو و جی میل را تنظیم می کنیم در نمایش پیغام ها مشکلی نیست. ولی برای من ایمیل شرکت را در فایل وارد کرده و ایمیل ها را با برنامه outlook دریافت می کنم، نمایش فرستنده پیام و متن پیام به صورت زیر می باشد:
    ط¨ط§ ط³ظ„ط§ظظ‚غŒظ…طھ ط±ط§ ط¨ط±ط
    امکان دارد نوع متن های ورودی برای فیلد نام و پیغام در قسمت کد نویسی از نوع utf-8 تنظیم گردند؟
    با تشکر

  4. سلام.
    سالهاست دنبال یک فرم آژاکس سالم میگردم اما هنوز بدست نیاوردم و فرم شما هم با وجود اینکه بسیار فوق العاده هست اما دو مشکل داره که البته درست شدنی هست ولی بنده تخصصی در php ندارم که خودم درست کنم.

    میخواستم که این فرم شما مثل فرم سایت من باشه و مشخصات خواسته شده رو به ایمیلم بفرسته. چون فرم شما فقط نام ارسال کننده رو مینویسه و ایملش رو توی جیمیلم نمایش نمیده و با هاست خودم میاد.

    الان شما یه نگاهی به فرم من بنداز:
    http://www.farsv.com/contact

    اینم آژاکسه اما فیلدها رو ضروری نمیکنه و حتی خالی هم ارسال میکنه.
    اگه میشه به فرمتون فیلدهای رو که در فیلدهایی فرم من هست اضافه کنید و اجباری کنید.

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

    اگر یه فرم سفارشی و زیبا برای من درست کنید، من تا 1 ماه وبسایت شما رو در سایتم قرار میدم تا جبران لطفتون رو بکنم.

    رنک الکسای سایتم زیر 640 و بازدید روزانه 48 هزار نفر و 17 هزار IP یکتا.
    بی صبرانه منتظر پاسخ شما هستم.
    اگه به ایمیلم بفرستید که چه بهتر.

    ارادتمند.

  5. جناب آقای امین بهشتی عزیز
    واقعا ممنون بابت حل موارد. من مورد UTF-8 را بررسی کرده و حتما به شما اطلاع می دهم. با عرض معذرت بنده به یک مشکل دیگر نیز برخورده ام.
    من توانستم قسمت های CSS و jQuery را هر کدام جداگانه در یک فایل قرار دهم و در فایل html به آنها لینک بدهم.
    سوال من اینست که اگر وب سایت ما مثلا 20 صفحه html داشته باشد ما ناچاریم تمام کدهای form را در آنها کپی نماییم و یا اینکه راه دیگری مثلا جدا کردن فایل form نیز وجود دارد؟
    با تشکر

    • خواهش می‌کنم،

      راهی که به ذهنم می‌رسه اینه که از فایل‌ها و دستورات php استفاده کنید.
      مثلاً این صفحات html را به صفحات php تبدیل کنید و کدهای مربوط به فرم تماس را در یک فایل php جداگانه ذخیره کنید و سپس دستور زیر را در هر صفحه‌ای که می‌خواهید از فرم تماس استفاده کنید وارد نمایید:
      (با فرض اینکه فایل مربوط به فرم تماس را با نام phpajaxform.php ذخیره کرده‌اید)

      <?php include 'phpajaxform.php'; ?>
      

      همچنین دقت کنید که در کد بالا مسیر فایل فرم تماس با مسیر صفحه مورد نظر یکسان است. یعنی هر دو فایل در یک پوشه قرار دارند. اگر مسیر فایل فرم تماس فرق داشته باشد، باید مسیر دقیق آن را وارد کنید.

  6. سلام
    مطلبتون بسیار عالی بود
    من برای ارسال ایمیل استفاده نکردم برای فروم تغییر دادم یعنی وقتی لیست تاپیک ها نشون داده میشه یه لینک پاسخ وجود داره و وقتی روش کلیک میشه از روش شما استفاده کردم
    به لحاظ گرافیکی هیچ مشکلی ندارم
    با دکمه انصراف هم هیچ مشکلی ندارم ولی با submit به مشکل برخوردم
    فرمم سابمیت نمیشه و همش یه صفحه سفید نمایش داده میشه
    من زیاد با Ajax آشنایی ندارم میشه منو راهنمایی کنید که چه اصولی را باید رعایت کنم تا درست بشه؟
    ممنون

  7. سلام
    آقا من هرچی سعی می کنم اینو می زنه:
    در حال ارسال پیام شما. لطفاً منتظر بمانید…
    نمی دونم مشکل از چیه؟
    سایت اصلیم همینه اونم در همین حال می مونه و ارسال نمیشه
    لطف کنید بگید مشکل چیه
    ممنون می شم

    • متاسفانه بدلیل اینکه توضیح کاملی ندادید من باز هم متوجه نشدم دقیقاً چه کاری قصد دارید انجام بدید!

      حالا بر فرض اگر می‌خواهید این خط کدی که اشاره کردید را در یک متغیر تعریفش کنید، به شکل زیر می‌تونید عمل کنید:

      $constant = '<input type="text" name="email" value="myaccount@domain.com" />';
      
  8. سلام مهندس، واقعا عالی بود…
    من یه فرم تماس با ما دارم وقتی پیم رو ارسال میکنم و روی دکمه send کلیک میکنم پیام میره ولی پیغام تشکر رو نمایش نمیده !!
    مشکل از چی میتونه باشه ؟!؟!
    اگه امکان داشته باشه آدرس ایمیلتون رو بفرستین تا کدهارو براتون بفرستم.

    • با سلام و عرض ادب،
      والا در بحث امنیت هیچ وقت نمیشه گفت که امنیت یک اسکریپت یا سایت یا… 100 درصد تضمین شده هست! فقط میشه ریسک‌ها را کم کرد.

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

      حالا اگر می‌خواهید جواب دقیق‌تری بگیرید، حتماً از یک متخصص امنیت در PHP سوال کنید.

      سپاس

  9. سلام و ممنون از آموزشتان من3 سوال دارم که ممنون می شوم اگر در اولین فرصت جوابم را بدهید.
    1-چطور می توانم به اطلاعات label صفحه ام با استفاده از php دسترسی داشته باشم مثلا با استفاده از تابع $_post میتوانم نام و محتویات textboxها را بخوانم ولی نمی توانم محتویات و آیدی، label یا span را بدست بیاورم!
    2-برای اینکه از کدهای جاوااسکریپت در بین کدهای php استفاده کنم مثلا بتوانم از این کد در php استفاده کنم باید چکار کنم؟document.getElementById(“demo”).innerHTML = text+label1
    3- آیا می توانم محتویات متغیرهای javascript را از طریقphp بخوانم ممنونم می شوم راهنماییم کنید .

    • سلام،

      1 – در زمان ارسال فرم‌ها، اطلاعات labelها ارسال نمی‌شوند، بنابراین با php نمی‌تونید به این اطلاعات دسترسی داشته باشید. ولی می‌تونید با ایجاد یک قیلد پنهان input که محتویات برابر با label مورد نظرتان را دارد، با استفاده از $_POST[”] به این اطلاعات دسترسی داشته باشید.

      <input type="hidden" name="" value="<?php $your_value; ?>" >
      

      و یا می‌تونید از جاوا اسکریپت برای این کار استفاده کنید.
      در لینک زیر نمونه مثال‌هایی آورده شده:
      http://stackoverflow.com/questions/19228839/why-i-cant-get-value-of-label-with-jquery-and-javascript

      2 – می‌تونید کد جاوا اسکریپت‌تان را echo کنید. مثال :

      $jscriptcode = '';
      $jscriptcode = '<script type="text/javascript">'
      $jscriptcode .= 'document.getElementById("demo").innerHTML = text+label1;'
      $jscriptcode .= '</script>'
      echo $jscriptcode;
      

      3 – محتویات متغیرهای جاوااسکریپت را نمی‌تونید با php بخونید، چون که php در سمت سرور اجرا میشه و جاوااسکریپت در سمت کاربر (client). نمی‌شه از مرورگر خواست که کد php اجرا کند.
      اگر قصد دارید که یک مقدار را از سرور گرفته و آن را با متغیر جاوا اسکریپت ترکیب کنید، می‌تونید به صورت زیر عمل کنید:
      با استفاده از یک درخواست آژاکس، مقدار مورد نظر را به سرور ارسال کنید. سرور با یک مقدار پاسخی خواهد داد و شما این مقدار را می‌توانید در کد جاوا اسکریپت‌تان استفاده کنید.

  10. سلام داداش ممنونم از آموزشای مفیدت…
    داداش امین اگه میشه یه زحمتی داشتم بهت میشه آموزش ارسال اطلاعات یه فرم html به یه صفحه html دیگه رو یاد بدی یا به ایمیلم بفرستی ممنون میشم بد جور گیرم منتظرم امین جون…
    ممممممممممممممممممممممممممممممممممممنون

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

  12. با عرض سلام و خسته نباشید و تشکر از زحمات شما
    من کد رو آپلود کردم، پیغام ارسال شد هم میده، ولی ایمیلم رو که چک میکنم ، ایمیلی نمیرسه، تا حالا ده تا کد رو امتحان کردم ولی همین مشکل رو دارم، ممنون میشم اگه راهنمایی کنید

درصورت تمایل برای ارسال دیدگاه‌تان از فرم زیر می‌توانید استفاده کنید ↓

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

(الزامی*)

می‌توانید از نشان و برچسب‌های HTML زیر در متن دیدگاه‌تان استفاده کنید:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
(الزامی*)
(اختیاری)

لطفاً جای‌خالی در معادله زیر را پر کنید: * Time limit is exhausted. Please reload the CAPTCHA.