Membuat Form Kontak yang Indah dan Atraktif dengan AJAX [Part 1]

Dalam sebuah website, form kontak sangat penting sebagai komunikasi antara admin dan pengunjung,namun form kontak juga bisa rumit, terutama karena mereka biasanya pada halaman terpisah. Pengunjung harus mengunjungi halaman form kontak, mengisi rincian, melihat belum halaman respon lain, dan kembali ke halaman yang sebelumnya mereka kunjungi

Untungnya, Ajax memberi kita cara mengatasi masalah ini. Dengan memasukannya pada halaman form, dan mengirimkan data melalui Ajax, pengunjung tidak harus meninggalkan halaman.

Pada tutorial ini, kita akan membuat form Ajax yang bagus untuk pengunjung dapat mengumpulkan dengan mengklik link di halaman.

 

Mari kita mulai dengan HTML untuk halaman utamanya, kita akan menyembunyikan awalnya menggunakan JavaScript saat memuat halaman, dan juga beberapa konten lainnya dan link “Send us email” yang akan menampilkan form ketika diklik:

<!doctype html>
<html lang="en">
<head>
 
<title>A Slick Ajax Contact Form with jQuery andPHP</title>
<meta http-equiv="Content-Type"content="text/html;charset=utf-8">
 
</head>
<body>
 
<div id="content">
 
  <p style="padding-bottom: 50px; font-weight: bold; text-align: center;"><a href="#contactForm">~ Send us an email ~</a></p>
 
  <!-- Content here -->
 
  <p style="padding-top: 50px; font-weight: bold; text-align: center;"><a href="#contactForm">~ Send us an email ~</a></p>
  
</div>
 
<form id="contactForm"action="processForm.php"method="post">
 
  <h2>Send us an email...</h2>
 
  <ul>
 
    <li>
      <label for="senderName">Your Name</label>
      <input type="text"name="senderName"id="senderName"placeholder="Please type your name"required="required"maxlength="40"/>
    </li>
 
    <li>
      <label for="senderEmail">Your Email Address</label>
      <input type="email"name="senderEmail"id="senderEmail"placeholder="Please type your email address"required="required"maxlength="50"/>
    </li>
 
    <li>
      <label for="message"style="padding-top: .5em;">Your Message</label>
      <textarea name="message"id="message"placeholder="Please type your message"required="required"cols="80"rows="10"maxlength="10000"></textarea>
    </li>
 
  </ul>
 
  <div id="formButtons">
    <input type="submit"id="sendMessage"name="sendMessage"value="Send Email"/>
    <input type="button"id="cancel"name="cancel"value="Cancel"/>
  </div>
 
</form>
 
<div id="sendingMessage"class="statusMessage"><p>Sending your message. Please wait...</p></div>
<div id="successMessage"class="statusMessage"><p>Thanks forsending your message! We'll get back to you shortly.</p></div>
<div id="failureMessage"class="statusMessage"><p>There was a problem sending your message. Please tryagain.</p></div>
<div id="incompleteMessage"class="statusMessage"><p>Please complete all the fields in the form before sending.</p></div>
 
</body>
</html>

Form mengirimkan datanya ke script processForm.php yang akan mengirimkan email. Dengan menetapkan atribut form =”action” pada “processForm.php”, kita memastikan bahwa form yang dapat digunakan dengan JavaScript dinonaktifkan. Kemudian,  JavaScript akan membaca atribut this =”action” sehingga tahu di mana untuk mengirim permintaan Ajax.

Form itu sendiri menggunakan beberapa bentuk fitur HTML5 seperti placeholders,, the email field type, dan atribut yang diperlukan untuk memastikan bahwa semua bidang telah diisi. Kita juga akan menambahkan validasi JavaScript untuk browser yang belum mendukung validasi HTML5.

Pada Tutorial berikutnya kita akan menambahkan CSS agar tampilan Form menjadi lebih indah.

Sampai ketemu di Tutorial Selanjutnya.

sumber : jagocoding

Cara Daftar Google Adsense Indonesia Agar Cepat Diterima

Google Adsense adalah salah satu program PPC (Pay Per Click) yang paling banyak digemari oleh ...

Learn more
Share This:Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on Pinterest

Leave a Reply

Your email address will not be published. Required fields are marked *