Cara membuat contact form dengan PHP yang terkirim ke email | Form kontak merupakan salah satu element penting yang ada hampir pada setiap website. Form contact us / hubungi kami memungkinkan pengunjung untuk berkomunikasi dengan pemilik situs website tersebut.

Dengan menggunakan form kontak, pengunjung dapat dengan mudah mengirim permintaan maupun penawaran mereka untuk melakukan bisnis, memberikan opini, pendangan dan saran kepada administrator mengenai konten website, layanan atau produk.

Contact Form

Contact Form (Image: youtube.com)

Selain itu informasi yang disampaikan dapat dikirim kepada pemilik website ataupun administrator melalui email.

Seperti sudah kita singgung sebelumnya, form kontak bisa membantu pemilik website untuk menerima penawaran maupun permintaan bisnis dari pengunjung dan dengan begitu bisa lansung memberikan respon terhadap kiriman tersebut.

Singkatnya, form kontak memungkinkan pengunjung untuk menghubungi pemilik website dengan mudah dan cepat.

Membuat contact form dengan PHP yang terkirim ke email

Pada tutorial kali ini Jurnalweb akan memberikan cara membuat form kontak dengan PHP dan mengintegrasikannya ke dalam website Anda, sehingga cukup dalam 5 menit Anda sudah bisa memiliki di dalam website Anda.

– Baca juga: Tutorial Cara Upload Multiple File dengan PHP

Untuk memudahkan Anda dalam memahami, kami akan memisahkan script HTML dan PHP. Anda dapat menambahkan kode ini secara bersamaan pada website yang Anda inginkan.

Membuat tampilan contact form dengan HTML

Pertama kita perlu untuk membuat tampilan form kontak ini dengan menggunakan HTML, dimana kita akan membuat kolom untuk menuliskan nama, email, subjek dan isi pesan, serta sebuah tombol Kirim yang akan menjadi pemicu terkirimnya pesan.

<div class="mainContent">
    <h2>Kontak Form PHP / <small><a href="http://www.jurnalweb.com">Jurnalweb.com</a></small></h2>
    <div class="contactFrm">
        <?php if(!empty($statusMsg)){ ?>
            <p class="statusMsg <?php echo !empty($msgClass)?$msgClass:''; ?>"><?php echo $statusMsg; ?></p>
        <?php } ?>
        <form action="" method="post">
            <h4>Name</h4>
            <input type="text" name="name" placeholder="Nama Anda" required="">
            <h4>Email </h4>
            <input type="email" name="email" placeholder="email@example.com" required="">
            <h4>Subject</h4>
            <input type="text" name="subject" placeholder="Tulis subject" required="">
            <h4>Message</h4>
            <textarea name="message" placeholder="Tulis pesan Anda disini" required=""> </textarea>
            <input type="submit" name="submit" value="Submit">
            <div class="clear"> </div>
        </form>
    </div>
</div>

Script PHP untuk menangani kiriman data

Setelah tampilan form dibuat, tentu kita butuh script untuk menangani kiriman data dari form tersebut, untuk itu kita membutuhkan PHP untuk melakukan proses pengiriman data ke email si pemilik website.

Email dikirim akan di validasi terlebih dahulu dengan menggunakan fungsi FILTER_VALIDATE_EMAIL, setelah email dianggap benar maka pesan akan dikirim ke email dengan menggunakan fungsi mail().

$statusMsg = '';
$msgClass = '';
if(isset($_POST['submit'])){
    // Get the submitted form data
    $email = $_POST['email'];
    $name = $_POST['name'];
    $subject = $_POST['subject'];
    $message = $_POST['message'];
    
    // Cek apakah ada data yang belum diisi
    if(!empty($email) && !empty($name) && !empty($subject) && !empty($message)){
        
        if(filter_var($email, FILTER_VALIDATE_EMAIL) === false){
            $statusMsg = 'Please enter your valid email.';
            $msgClassk = 'errordiv';
        }else{
            // Pengaturan penerima email dan subjek email
            $toEmail = 'email@namadomain.com'; // Ganti dengan alamat email yang Anda inginkan
            $emailSubject = 'Pesan website dari '.$name;
            $htmlContent = '<h2> via Form Kontak Website</h2>
                <h4>Name</h4><p>'.$name.'</p>
                <h4>Email</h4><p>'.$email.'</p>
                <h4>Subject</h4><p>'.$subject.'</p>
                <h4>Message</h4><p>'.$message.'</p>';
            
            // Mengatur Content-Type header untuk mengirim email dalam bentuk HTML
            $headers = "MIME-Version: 1.0" . "\r\n";
            $headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
            
            // Header tambahan
            $headers .= 'From: '.$name.'<'.$email.'>'. "\r\n";
            
            // Send email
            if(mail($toEmail,$emailSubject,$htmlContent,$headers)){
                $statusMsg = 'Pesan Anda sudah terkirim dengan sukses !';
                $msgClass = 'succdiv';
            }else{
                $statusMsg = 'Maaf pesan Anda gagal terkirim, silahkan ulangi lagi.';
                $msgClass = 'errordiv';
            }
        }
    }else{
        $statusMsg = 'Harap mengisi semua field data';
        $msgClass = 'errordiv';
    }
}

Mempercantik tampilan dengan CSS

Agar tampilan lebih menarik maka kita bisa menambahkan script berikut ini.

.mainContent {
    width: 35%;
    margin: 2.5em auto;
    background: #fff;
    padding: 2.5em;
}
.contactFrm h4 {
    font-size: 1em;
    color: #252525;
    margin-bottom: 0.5em;
    font-weight: 300;
    letter-spacing: 5px;
}
.contactFrm input[type="text"], .contactFrm input[type="email"] {
    width: 70%;
    outline: none;
    font-size: 0.9em;
    padding: .7em 1em;
    border: 1px solid #000;
    -webkit-appearance: none;
    display: block;
    margin-bottom: 1.2em;
}
.contactFrm textarea {
    resize: none;
    width: 93.5%;
    font-size: 0.9em;
    outline: none;
    padding: .6em 1em;
    border: 1px solid #000;
    min-height: 10em;
    -webkit-appearance: none;
}
.contactFrm input[type="submit"] {
    outline: none;
    color: #FFFFFF;
    padding: 0.5em 0;
    font-size: 1em;
    margin: 1em 0 0 0;
    -webkit-appearance: none;
    background: #006faa;
    transition: 0.5s all;
    border: 2px solid #006faa;
    -webkit-transition: 0.5s all;
    transition: 0.5s all;
    -moz-transition: 0.5s all;
    width: 47%;
    cursor: pointer;
}
.contactFrm input[type="submit"]:hover {
    background: none;
    color: #006faa;
}

p.statusMsg{font-size:18px;}
p.succdiv{color: #008000;}
p.errordiv{color:#E80000;}

Tidak ada yang terlalu spesial dari script CSS ini, hanya ada atribut input[type=”text”], input[type=”email”] dan input[type=”submit”] yang digunakan untuk menargetkan secara khusus pada field dengan tipe teks, email ataupun submit.

DEMO | DOWNLOAD

Jika Anda tertarik untuk dengan form kontak dengan PHP ini, Anda bisa melihat DEMO dan download script nya disini.

Pada beberapa domain website, email akan masuk ke dalam spam, untuk menghindari jika terjadi hal demikian, Anda juga bisa menggunakan SMTP khusus seperti SMTP gmail.

Artikel Lain:

jsonCara Membuat File JSON dengan PHP embed youtubeCara Embed Video YouTube Responsive, Efisien & Tidak Berat apache xampp virtual hostCara Membuat Virtual Host di XAMPP Windows email addressCara Validasi Alamat Email dengan PHP backup websiteCara Backup Website dan Database MySQL dengan PHP exec() alexa rankCara Mendapatkan Ranking Alexa dengan PHP phpApakah Bahasa Pemrograman PHP Sudah Mati? Tutorial Cara Membuat Kalender Dengan PHP, HTML dan CSS google maps wordpress shortcodeCara Memasang Google Maps Responsive di WordPress Tanpa Plugin facebook like countCara Mengetahui Jumlah Like Facebook Page dengan PHP Menampilkan isi file txt dengan phpMenampilkan Isi File TXT Dengan PHP upload file ajaxTutorial Cara Upload Foto dengan AJAX dan PHP (jQuery)