Cara Membuat Formulir Kontak Di PHP Dengan HTML dan CSS

Tidak peduli apa jenis situs web yang seseorang miliki atau kelola, tapi yang pasti mereka mungkin perlu formulir kontak. 

Formulir kontak dapat membantu pengunjung kalian meminta informasi lebih lanjut atau berbagi tips atau masalah yang mereka menghadapi saat menggunakan situs web.

Dalam tutorial kali ini, fokus kita akan menciptakan sebuah formulir kontak menggunakan HTML dan CSS yang berfungsi penuh di PHP dari awal sampai akhir. 

Kita akan mulai dengan markup dari semua bidang yang kita perlu, lalu menambahkannya dengan styling dasar formulir kontak. Setelah itu, kita akan beralih ke kode PHP untuk melaksanakan fungsi.

Tetapi jika kalian ingin belajar tentang bagaimana formulir kontak itu dibuat, baca terus! Mungkin tutorial ini akan lebih mudah dari yang kalian pikirkan.

Markup Formulir Kontak HTML

Langkah pertama sebelum kita membuat formulir kontak adalah kita siapkan kode markup. Kita akan mulai melakukan hal itu setelah kita memiliki daftar semua elemen yang kita inginkan dalam formulir. 

Kita akan membutuhkan sebuah field input untuk nama orang yang akan menghubungi kita, dan kita akan memerlukan bidang untuk alamat email mereka sehingga kita bisa mengirimkan balasan kembali kepada mereka jika memang itu sangat mereka butuhkan.

Kita juga akan membutuhkan sebuah field input untuk menanyakan apa alasan orang menghubungi kalian dan text area di mana user bisa mengetik pesan mereka.

Jika kalian mengelola website yang sangat populer (Baca : Menjadi Web Master), kalian akan mendapatkan banyak email melalui formulir kontak yang akan kita buat ini. 

Untuk memastikan bahwa orang yang tepat bisa membaca email-email dan merespon dengan cepat, kalian perlu beberapa bidang lain. Misalnya, kalian bisa menambahkan bidang yang dapat menentukan Departemen yang ingin pengunjung atau user hubungi seperti bagian pemasaran, dukungan, atau penagihan. 

Informasi ini nantinya bisa digunakan untuk merutekan email yang tepat, pada siapa atau departemen mana email ini ditujuakan. Pada akhirnya, yang akan membantu kalian menjawab kembali lebih cepat dan mengurutkan email lebih efisien.

Berapa banyak bidang yang kalian tambahkan ke formulir kontak tergantung pada jenis website yang kalian jalankan, tetapi pastikan kalian tidak melebih - lebih kan isi bidang / text field yang akan di buat. 

Memaksa pengunjung untuk mengisi rincian terlalu banyak mungkin mencegah mereka untuk menghubungi kalian, karena banyak nya text field yang harus mereka isi.

Mari kita menulis kode HTML untuk menambahkan semua bidang yang saya hanya ingin sebutkan ke formulir kontak.

1:  form action="contact.php" method="post">  
2:   <div class="elem-group">  
3:    <label for="name">Nama Anda</label>  
4:    <input type="text" id="name" name="visitor_name" placeholder="Dayat eMJe" pattern=[A-Z\sa-z]{3,20} required>  
5:   </div>  
6:   <div class="elem-group">  
7:    <label for="email">E-mail Anda</label>  
8:    <input type="email" id="email" name="visitor_email" placeholder="emje@matapanda-crew.com" required>  
9:   </div>  
10:   <div class="elem-group">  
11:    <label for="department-selection">Pilih Departemen Terkait</label>  
12:    <select id="department-selection" name="concerned_department" required>  
13:      <option value="">Pilih Departemen</option>  
14:      <option value="billing">Penagihan</option>  
15:      <option value="marketing">Penjualan</option>  
16:      <option value="technical support">Dukungan teknis</option>  
17:    </select>  
18:   </div>  
19:   <div class="elem-group">  
20:    <label for="title">Alasan Menghubungi Kami</label>  
21:    <input type="text" id="title" name="email_title" required placeholder="Tidak dapat Mengatur Ulang Kata Sandi saya" pattern=[A-Za-z0-9\s]{8,60}>  
22:   </div>  
23:   <div class="elem-group">  
24:    <label for="message">Tulis pesan Anda</label>  
25:    <textarea id="message" name="visitor_message" placeholder="Katakan apapun yang kamu mau." required></textarea>  
26:   </div>  
27:   <button type="submit">Kirim Pesan</button>  
28:  </form>  

Sebelum melanjutkan lebih jauh, saya ingin cepat meringkas arti dari beberapa atribut penting dalam markup di atas. 

Atribut action berupa menentukan dimana data formulir harus dikirim. Jika kalian tidak memiliki atribut tindakan, data dikirim kembali ke URL yang sama. Di sini kita telah menggunakan contact.php, sehingga data formulir akan dikirim ke script itu.

Atribut name untuk elemen input yang berbeda dalam bentuk, digunakan untuk mengakses nilai elemen pada sisi server. Sebagai contoh, dalam bentuk di atas, kalian bisa mendapatkan nama pengunjung yang menghubungi kalian menggunakan $_POST ['visitor_name'] dalam contact.php.

Kita menggunakan atribut placeholder untuk memberikan user beberapa ide dasar dari input atau masukan yang diharapkan untuk setiap bidang di formulir tersebut. 

Atribut required memastikan bahwa ada beberapa aturan penting yang harus user perhatikan dan tidak boleh dibiarkan kosong sebelum pengguna menekan tombol Kirim pada formulir. 

Atribut pattern digunakan untuk menegakkan beberapa aturan pada jenis nilai-nilai yang dapat masuk ke dalam bidang-bidang tertentu. Dalam kasus kita, kita hanya membolehkan user untuk menggunakan huruf dan karakter spasi pada nama yang merek kirimkan. 

Kita juga membatasi jumlah karakter yang dapat diterima dari 3-20 inklusif. Pola yang kalian gunakan akan tergantung pada jenis masukan yang kalian inginkan dari pengguna.

Demo CodePen berikut menunjukkan kepada kita seperti apa formulir kontak kita dengan markup di atas dan sedikit tambahan code CSS.

See the Pen Dasar Contact Form by Dayat Miftahul Jannah (@dayat-emje) on CodePen.

Membuat kontak HTML Kita Dalam Bentuk Fungsional Menggunakan PHP

Sekarang, Form kita tidak melakukan sesuatu yang berguna. Pengunjung dapat mengisinya dan tekan tombol Kirim pesan tapi kita tidak akan menerima apa-apa karena tidak ada kode dari sisi server untuk menangani informasi yang diberikan oleh form. Dalam bagian ini, kita akan membuat formulir kontak kita menjadi fungsional menggunakan PHP.

Mulailah dengan membuat contact.php file dan masukkan kode berikut di dalamnya.

1:  <?php  
2:  if($_POST) {  
3:    $visitor_name = "";  
4:    $visitor_email = "";  
5:    $email_title = "";  
6:    $concerned_department = "";  
7:    $visitor_message = "";  
8:    if(isset($_POST['visitor_name'])) {  
9:     $visitor_name = filter_var($_POST['visitor_name'], FILTER_SANITIZE_STRING);  
10:    }  
11:    if(isset($_POST['visitor_email'])) {  
12:      $visitor_email = str_replace(array("\r", "\n", "%0a", "%0d"), '', $_POST['visitor_email']);  
13:      $visitor_email = filter_var($visitor_email, FILTER_VALIDATE_EMAIL);  
14:    }  
15:    if(isset($_POST['email_title'])) {  
16:      $email_title = filter_var($_POST['email_title'], FILTER_SANITIZE_STRING);  
17:    }  
18:    if(isset($_POST['concerned_department'])) {  
19:      $concerned_department = filter_var($_POST['concerned_department'], FILTER_SANITIZE_STRING);  
20:    }  
21:    if(isset($_POST['visitor_message'])) {  
22:      $visitor_message = htmlspecialchars($_POST['visitor_message']);  
23:    }  
24:    if($concerned_department == "billing") {  
25:      $recipient = "billing@domain.com";  
26:    }  
27:    else if($concerned_department == "marketing") {  
28:      $recipient = "marketing@domain.com";  
29:    }  
30:    else if($concerned_department == "technical support") {  
31:      $recipient = "tech.support@domain.com";  
32:    }  
33:    else {  
34:      $recipient = "contact@domain.com";  
35:    }  
36:    $headers = 'MIME-Version: 1.0' . "\r\n"  
37:    .'Content-type: text/html; charset=utf-8' . "\r\n"  
38:    .'From: ' . $visitor_email . "\r\n";  
39:    if(mail($recipient, $email_title, $visitor_message, $headers)) {  
40:      echo "<p>Terima kasih sudah menghubungi kami $visitor_name. Anda akan mendapatkan balasan dalam waktu 24 jam.</p>";  
41:    } else {  
42:      echo '<p>Kami minta maaf tetapi emailnya tidak berhasil.</p>';  
43:    }  
44:  } else {  
45:    echo '<p>ada yang salah</p>';  
46:  }  
47:  ?>  

kita telah melakukan beberapa validasi di input pengguna dari sisi client. Namun, akan lebih aman untuk melakukan validasi dari sisi server juga.

Kita menggunakan fungsi filter_var() untuk membersihkan nama yang diberikan oleh pengguna. Dengan cara yang sama, kita juga membersihkan nilai $email_title dan $concerned_department. 

Kalian bisa menggunakan filter_var () fungsi untuk memvalidasi atau membersihkan semua jenis input pengguna. Kita juga menggunakan fungsi htmlspecialchars() untuk mengkodekan semua karakter HTML khusus dalam pesan pengunjung yang dikirimkan kepada kita.

Nilai $recipient didasarkan pada nilai dari variabel $concerned_department. Dengan cara ini kita memastikan bahwa hanya orang-orang yang benar-benar seharusnya untuk melihat dan menyelediki isi email tersebut.

Selain itu, kita telah menggunakan variabel $ email_body untuk memformat body / isi email yang akan menjadi konten utama email. Saat kita mengirimkan email dalam format HTML, kita telah menggunakan HTML untuk memformat konten badan (body / isi) email.

Akhirnya, kita menggunakan fungsi mail() untuk mengirim email yang berisi informasi pengunjung yang ingin kita tahu. Setelah pengiriman email berhasil, kita akan memberi tahu kan pada pengunjung bahwa kita telah menerima email mereka dan mereka akan dihubungi segera.

Keamanan sangat penting ketika kalian berurusan dengan data atau input pengguna. Apakah kalian harus memvalidasi atau membersihkan input pengguna tergantung pada apa input dan bagaimana kalian ingin menggunakannya. 

Validasi hanya memeriksa jika input pengguna mengikuti seperangkat aturan tertentu. Sebagai contoh, validasi dapat memeriksa bahwa nama dari orang yang tidak mengandung angka apapun. Sanitasi digunakan untuk menghapus setiap karakter menyinggung yang menimbulkan risiko keamanan. 

Misalnya, user jahat mencoba menghubungi kalian melalui formulir bisa menambahkan tag script di dalam textarea untuk kalian lalu digunakan untuk men-download script berbahaya. Hal ini sangat mengkhawatirkan ketika situs web kalian memiliki forum publik yang dapat diakses oleh semua orang.

Namun, kalian harus sangat berhati-hati saat membuang karakter yang tidak diinginkan pada input pengguna. 

Misalnya, kalian mungkin memutuskan untuk menggunakan filter_var ($ user_input, FILTER_SANITIZE_STRING); pada beberapa masukan untuk menghapus semua tag dan menyandikan karakter khusus. Namun, tanda ini juga menghapus masukan karakter yang tidak berbahaya oleh pengguna yang sah. Berikut ini contohnya:

1:  <?php  
2:  $string = 'One of your posts about inequalities mentioned that when x < y and y < z then x < z.';  
3:  // Output: One of your posts about inequalities mentioned that when x   
4:  echo filter_var($string, FILTER_SANITIZE_STRING);  
5:  // Output: One of your posts about inequalities mentioned that when x &lt; y and y &lt; z then x &lt; z.  
6:  echo htmlspecialchars($string);  
7:  ?>  

Jika situs web kalian memiliki banyak topik yang berhubungan dengan matematika, akan relatif umum bagi pengguna untuk menulis <or> dalam formulir kontak atau posting forum. Menggunakan flag FILTER_SANITIZE_STRING dengan fungsi filter_var () akan menghapus informasi yang diperlukan dari pesan dalam kasus ini.

Poin yang ingin saya sampaikan adalah bahwa meskipun kalian harus selalu memvalidasi atau membersihkan data pengguna, pastikan kalian tidak membuang informasi penting dalam prosesnya.

Kesimpulan Akhir

Membuat formulir kontak dasar di PHP cukup sederhana. kalian hanya perlu mulai dengan menulis HTML yang diperlukan untuk membuat elemen masukan untuk informasi seperti nama pengguna, alamat email, nomor telepon, dll. 

Langkah selanjutnya adalah menulis CSS untuk memastikan formulir kontak menyatu sempurna dengan bagian situs web lainnya. Langkah terakhir melibatkan penulisan kode PHP yang akan mengambil informasi dari formulir kontak dan mengirimkannya dengan aman kepada kalian.

Tujuannya adalah untuk memastikan bahwa elemen formulir yang berbeda ditata dengan cara yang tidak membingungkan orang dan masukan pengguna dibersihkan dan divalidasi sebelum kalian mengirimkannya ke pihak terkait. 

Jika semua ini baru bagi kalian atau jika kalian tidak ingin menghabiskan banyak waktu membuat formulir kontak yang terlihat profesional, kalian pasti harus memeriksa skrip PHP formulir kontak teratas ini.

Jika kalian memiliki pertanyaan, silakan beri tahu saya di komentar. See You Next Time :)