Cara menggunakan smtp contact form php

Indonesian (Bahasa Indonesia) translation by No Name's (you can also view the original English article)

Tidak peduli apa jenis situs web yang seseorang memiliki atau mengelola, mereka mungkin perlu formulir kontak. Formulir kontak dapat membantu pengunjung Anda meminta kutipan, meminta informasi atau berbagi tips atau masalah yang mereka menghadapi saat menggunakan situs web.

Dalam tutorial ini, fokus kita akan menciptakan sebuah formulir kontak yang berfungsi penuh di PHP dari awal sampai akhir. Kita akan mulai dengan markup dari semua bidang yang kita perlu menambahkan dan styling dasar formulir kontak. Setelah itu, kita akan beralih ke kode PHP untuk melaksanakan fungsi.

Tentu saja, cara termudah untuk membuat formulir kontak adalah dengan mengunduh skrip formulir kontak profesional dari CodeCanyon.

Tetapi jika Anda ingin belajar tentang bagaimana formulir kontak dibuat, baca terus! Mungkin lebih mudah dari yang Anda pikirkan.

Markup Formulir Kontak HTML Kami

Langkah pertama menuju membuat formulir kontak adalah 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 adalah menghubungi kami, dan kami akan memerlukan bidang untuk alamat email mereka sehingga kami dapat mengirimkan balasan kembali kepada mereka jika kebutuhan muncul. Kami juga akan membutuhkan sebuah field input untuk alasan orang menghubungi Anda dan textarea di mana pengguna dapat mengetik pesan mereka.

Jika Anda mengelola website ini sangat populer, Anda akan mendapatkan banyak email melalui formulir kontak. Untuk memastikan bahwa orang yang tepat bisa membaca email-email dan merespon dengan cepat, Anda perlu beberapa bidang lain. Misalnya, Anda bisa menambahkan bidang yang dapat menentukan Departemen yang pengunjung ingin menghubungi seperti pemasaran, dukungan, atau penagihan. Informasi ini nantinya bisa digunakan untuk merutekan email untuk tepat. Pada akhirnya, yang mungkin membantu Anda menjawab kembali lebih cepat dan mengurutkan email lebih efisien.

Berapa banyak bidang yang Anda tambahkan ke formulir kontak tergantung pada jenis website Anda menjalankan tetapi pastikan Anda tidak lebih dari melakukannya. Memaksa pengunjung untuk mengisi rincian terlalu banyak mungkin mencegah mereka menghubungi Anda sama sekali.

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

<form action="contact.php" method="post">
  <div class="elem-group">
    <label for="name">Your Name</label>
    <input type="text" id="name" name="visitor_name" placeholder="John Doe" pattern=[A-Z\sa-z]{3,20} required>
  </div>
  <div class="elem-group">
    <label for="email">Your E-mail</label>
    <input type="email" id="email" name="visitor_email" placeholder="" required>
  </div>
  <div class="elem-group">
    <label for="department-selection">Choose Concerned Department</label>
    <select id="department-selection" name="concerned_department" required>
        <option value="">Select a Department</option>
        <option value="billing">Billing</option>
        <option value="marketing">Marketing</option>
        <option value="technical support">Technical Support</option>
    </select>
  </div>
  <div class="elem-group">
    <label for="title">Reason For Contacting Us</label>
    <input type="text" id="title" name="email_title" required placeholder="Unable to Reset my Password" pattern=[A-Za-z0-9\s]{8,60}>
  </div>
  <div class="elem-group">
    <label for="message">Write your message</label>
    <textarea id="message" name="visitor_message" placeholder="Say whatever you want." required></textarea>
  </div>
  <button type="submit">Send Message</button>
</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 Anda tidak memiliki atribut tindakan, data dikirim kembali ke URL yang sama. Di sini kita telah digunakan contact.php, sehingga data formulir akan dikirim ke bahwa script.

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

Kami menggunakan atribut placeholder untuk memberikan pengguna beberapa ide dasar dari input yang diharapkan untuk setiap bidang dalam bentuk. Atribut required memastikan bahwa tidak penting akan 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 kami, kami hanya membolehkan pengguna untuk menggunakan huruf dan karakter ruang nama mereka menyerahkan. Kita juga membatasi jumlah karakter yang dapat diterima dari 3-20 inklusif. Pola yang Anda gunakan akan tergantung pada jenis masukan yang Anda inginkan dari pengguna.

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

Membuat kontak HTML kami bentuk fungsional menggunakan PHP

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

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

<?php

if($_POST) {
    $visitor_name = "";
    $visitor_email = "";
    $email_title = "";
    $concerned_department = "";
    $visitor_message = "";
    
    if(isset($_POST['visitor_name'])) {
      $visitor_name = filter_var($_POST['visitor_name'], FILTER_SANITIZE_STRING);
    }
    
    if(isset($_POST['visitor_email'])) {
    	$visitor_email = str_replace(array("\r", "\n", "%0a", "%0d"), '', $_POST['visitor_email']);
    	$visitor_email = filter_var($visitor_email, FILTER_VALIDATE_EMAIL);
    }
    
    if(isset($_POST['email_title'])) {
    	$email_title = filter_var($_POST['email_title'], FILTER_SANITIZE_STRING);
    }
    
    if(isset($_POST['concerned_department'])) {
    	$concerned_department = filter_var($_POST['concerned_department'], FILTER_SANITIZE_STRING);
    }
    
    if(isset($_POST['visitor_message'])) {
    	$visitor_message = htmlspecialchars($_POST['visitor_message']);
    }
    
    if($concerned_department == "billing") {
    	$recipient = "";
    }
    else if($concerned_department == "marketing") {
    	$recipient = "";
    }
    else if($concerned_department == "technical support") {
    	$recipient = "";
    }
    else {
    	$recipient = "";
    }
    
    $headers  = 'MIME-Version: 1.0' . "\r\n"
    .'Content-type: text/html; charset=utf-8' . "\r\n"
    .'From: ' . $visitor_email . "\r\n";
    
    if(mail($recipient, $email_title, $visitor_message, $headers)) {
    	echo "<p>Thank you for contacting us, $visitor_name. You will get a reply within 24 hours.</p>";
    } else {
    	echo '<p>We are sorry but the email did not go through.</p>';
    }
    
} else {
    echo '<p>Something went wrong</p>';
}

?>

kita telah melakukan beberapa validasi di input pengguna dari sisi klien. Namun, akan lebih aman untuk melakukan validasi dari sisi server juga. Kami menggunakan fungsi filter_var() untuk membersihkan nama yang diberikan oleh pengguna. Dengan cara yang sama, kami juga membersihkan nilai $email_title dan $concerned_department. Anda dapat 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 dikirim 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 ke dalam masalah menerima email.

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

Keamanan sangat penting ketika Anda berurusan dengan data pengguna atau masukan. Apakah Anda harus memvalidasi atau membersihkan input pengguna tergantung pada apa input dan bagaimana Anda 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, pengguna jahat mencoba menghubungi Anda melalui formulir bisa menambahkan tag script di dalam textarea untuk Anda untuk men-download script berbahaya. Hal ini sangat mengkhawatirkan ketika situs web Anda memiliki forum publik yang dapat diakses oleh semua orang.

Namun, Anda harus sangat berhati-hati ketika menyingkirkan yang tidak diinginkan karakter dalam input pengguna. Misalnya, Anda dapat memutuskan untuk menggunakan filter_var ($user_input, FILTER_SANITIZE_STRING); pada beberapa masukan untuk strip semua tag dan encode karakter khusus. Namun, bendera ini juga strip berbahaya karakter masukan oleh pengguna yang sah. Berikut adalah contoh:

<?php

$string = 'One of your posts about inequalities mentioned that when x < y and y < z then x < z.';

// Output: One of your posts about inequalities mentioned that when x 
echo filter_var($string, FILTER_SANITIZE_STRING);

// Output: One of your posts about inequalities mentioned that when x &lt; y and y &lt; z then x &lt; z.
echo htmlspecialchars($string);

?>

Jika situs Anda memiliki banyak matematika topik terkait, itu akan menjadi relatif umum bagi pengguna untuk menulis < atau > dalam formulir kontak atau posting forum. Menggunakan bendera FILTER_SANITIZE_STRING dengan fungsi filter_var() akan menghapus informasi yang diperlukan dari pesan dalam kasus ini.

Intinya aku mencoba membuat adalah bahwa meskipun Anda selalu harus memvalidasi atau membersihkan data pengguna, pastikan bahwa Anda tidak akan stripping pergi informasi penting dalam proses.

Kesimpulan Akhir

Menciptakan dasar formulir kontak di PHP relatif sederhana sekali Anda sudah familiar dengan dasar-dasar. Anda mulai dengan menulis HTML yang diperlukan untuk membuat elemen-elemen input untuk informasi seperti nama pengguna, alamat email, nomor telepon dll. Langkah berikutnya adalah menulis CSS untuk memastikan formulir kontak menyatu secara sempurna dengan sisa website. Langkah terakhir melibatkan menulis kode PHP yang akan mengambil informasi dari form kontak dan aman melalui email ke Anda.

Tujuannya adalah untuk memastikan bahwa unsur-unsur bentuk yang berbeda diatur dalam cara yang tidak membingungkan orang dan input pengguna dibersihkan dan divalidasi sebelum Anda mengirimkannya kepada pihak terkait. Jika semua ini baru bagi Anda atau jika Anda tidak ingin menghabiskan banyak waktu untuk membuat formulir kontak mencari profesional, Anda pasti harus check out ini Rating Tertingi skrip PHP formulir kontak.

Jika Anda memiliki pertanyaan, jangan ragu untuk membiarkan saya tahu di komentar. Tutorial berikutnya saya akan menunjukkan kepada Anda bagaimana menerapkan CAPTCHA Anda sendiri untuk membantu menjaga formulir kontak spam di cek.

Jika Anda tertarik dalam skrip PHP formulir berkualitas profesional yang dapat Anda mulai menggunakan situs Anda hari ini, check out beberapa posting kami yang lain.