jQuery | Contact From එකක්‌ හදමු

වෙබ් අඩවියක වැදගත් අංගයක්‌ නේ contact form එක. අපි අද බලමු කොහොමද jquery/php/ajax භාවිතයෙන් එකක්‌ හදන්නෙ කියලා. හුගක්‌ වෙබ් අඩවි වල මේ පිලිබඳ සටහන් තිබුනත්, සිංහලෙන් වැඩි විස්‌තර නැති නිසා මම හිතුවා මේ ගැන ලියන්න.

අවසාන ප්‍රතිඵලය මුලින්ම බලලම ඉමු. කිසිම කොටුවක්‌ සම්පූර්ණ නොකර send බොත්තම ඔබා බලන්න. මෙහි fileds පුරවන්නෙ නැතිව send බොත්තම එබුවොත් පනිවුඩයක්‌ දිස්‌ වෙනවා එම fields සම්පූර්ණ කරන ලෙස ඉල්ලමින්. නැවත එම fields සම්පූර්ණ කල පසු පමනයි form එක submit වන්නේ.

අපි form layout එකෙන් පටන්ගමු.

html

<div id="wrapper">
 <h1>Contact Form</h1>
    <ul id="response">
     <li class="process">Processing..</li>
    </ul>
 <form method="post" action="send.php">
     <label for="name">Name</label>
        <input type="text" name="name" id="name" />
        <label for="email">Email</label>
        <input type="text" name="email" id="email" />
        <label for="message">Message</label>
        <textarea id="message" name="message" cols="20" rows="5"></textarea>
        <input type="button" value="send" id="send" name="submit" />
    </form>
</div>

css

* {
 padding:0; 
 margin:0;
}

body { 
 font-family:Verdana, Arial, Helvetica, sans-serif; 
 font-size:12px; 
 padding-top:30px; 
}

#wrapper { 
 width:500px; 
 margin:0 auto; 
 padding:20px; 
 background:#f9f9f9; 
 border:1px solid #ddd; 
}

label { 
 display:block; 
 padding:10px 0 5px; 
}

input, textarea { 
 width:490px; 
 border:1px solid #ddd!important; 
 padding:5px!important; 
}

input#send { 
 margin-top:15px; 
 width:100px; 
 text-align:center; 
 font-weight:bold; 
 background:#ddd; 
}

ul#response { 
 list-style-position:inside; 
 padding:20px 0 10px; 
}

ul#response li { 
 color:#c00; 
}

.sent { 
 color:#090!important; 
 list-style:none; 
}

jQuery

jquery.com වෙබ් අඩවියෙන් අලුත්ම jQuery ගොනුව ලබාගෙන ඔබේ පිටුවට link කරගන්න. මෙම form එක සඳහා අපි jquery හි ajax යෙදුම භාවිතා කරනවා. එය කරන්නෙ මෙහෙමයි. පහතින් පේලියෙන් පේලිය විස්‌තර කරන්නම්.

$(document).ready(function(){
  $('.process').hide();
  $('#send').click(function(){
    $('.process').fadeIn('fast');
      var name = $('#name').val();
      var email = $('#email').val();
      var message = $('#message').val();      
      $.ajax({
        type: 'post',
        url: 'send.php',
        data: 'name=' + name + '&email=' + email + '&message=' + message,
        success: function(msg{
          $('.process').fadeOut(1000);    
          $('#response').html(msg);
        }
      });
  });
});

පලවන පේලියෙන් සුපුරුදු පරිදි ආරම්භ වීමට ප්‍රථම පිටුව පූරණය වන තෙක්‌ සිටිනවා.

දෙවන පේලියෙන් කරන්නේ අපේ තාවකාලික පනිවිඩය ෆෝරමයේ send බොත්තම ඔබන තෙක්‌ සගවා තබා ගැන්ම.

තුන් වන පේලියේදී #send id එක සහිත send බොත්තම සදහා click function එකක්‌ යොදනවා. එනම් බොත්තම එබූ පසු එම වරහන් තුල ඇති කේතය (4 සිට 16 දක්‌වා පේලි) ක්‍රියත්මක වෙනවා.

හතරවන පේලියෙන් තාවකාලික පනිවිඩය පෙන්වනවා.

5, 6, 7 පේලි මගින් භාවිතයේ පහසුව සදහා අදාල id සහිත input සහ textarea වෙතින් එන අගයන් (values) විචල්‍යන්ට දමා ගන්නවා.

8 - 16 පේලි ajax post එක සදහායි. මෙහි මම භාවිතා කරන සැකසුම කොටස්‌ හතරකින් සමන්විතයි.type - යවන ආකාරය, url - යවන්නේ කුමන ගොනුවටද, data - යවන දත්තයන් සහ success - ලැබෙන ප්‍රතිචාරය එම කොටස්‌ හතරයි.

මෙහිදී මම ඊමේල් පනිවිඩය යෑවීමට 'phpMailer' නමැති නොමිලේ ලබාගත හැකි php class එක පාවිච්චි කරනවා. ඔබේ සර්වරයේ php version එකට ගැලපෙන ගොනුව phpMailer වෙතින් ලබාගන්නට පුලුවන්.

එම phpMailer ෆෝල්ඩරයත් ඔබේ contact form එක ඇති ෆෝල්ඩරය තුලටම දමන්න.

දැන් ඇත්තේ send.php ගොනුව php මගින් සාදා ගැනීමයි. මෙය ඉතා පහසුවෙන් phpMailer හි example ගිනු පිරික්‌සීමෙන් සාදාගන්නට පුලුවන්. අපේ contact form එක සඳහා සරල validation සහිත send.php ගොනුවක්‌ පහත පරිදි ලියන්න පුලුවන්.

<?php
 
 $name = trim($_POST['name']);
 $email = $_POST['email'];
 $message = $_POST['message'];
 
 $site_owners_email = 'youremail@email.com'; // ඔබේ ඊමේල් ලිපිනය යොදන්න 
 $site_owners_name = 'your name'; // ඔබේ නම යොදන්න 
 
 if (strlen($name) < 2) {
  $error['name'] = "Please enter your name"; 
 }
 
 if (!preg_match('/^[a-z0-9&\'\.\-_\+]+@[a-z0-9\-]+\.([a-z0-9\-]+\.)*+[a-z]{2}/is', $email)) {
  $error['email'] = "Please enter a valid email address"; 
 }
 
 if (strlen($message) < 3) {
  $error['message'] = "Please leave a comment.";
 }
 
 if (!$error) {
  
  require_once('phpMailer/class.phpmailer.php');
  $mail = new PHPMailer();
  
  $mail->From = $email;
  $mail->FromName = $name;
  $mail->Subject = "Website Contact Form";
  $mail->AddAddress($site_owners_email, $site_owners_name);
  $mail->Body = $message;
    
  $mail->Send();
  
  echo "<li class='sent'>Thank You " . $name . ". We recived your message.</li>";
  
 }
 else {

  $response = (isset($error['name'])) ? "<li>" . $error['name'] . "</li> \n" : null;
  $response .= (isset($error['email'])) ? "<li>" . $error['email'] . "</li> \n" : null;
  $response .= (isset($error['message'])) ? "<li>" . $error['message'] . "</li>" : null;
  
  echo $response;
 }

?>

දැන් සියල්ල සූදානම්. ගැටලු ඇත්නම් comment මගින් විමසන්න.

සම්පූර්ණ කේතය මෙතනින් ගන්න