Membuat Form Bootstrap Modal Popup dengan Ajax & PHP

Penulis

April 9, 2017

Kalau kamu saat ini menggunakan framework Twitter Bootstrap pada websitemu, ini malah lebih mudah lagi untuk mengintegrasikan Modal Popup ke website. Bootstrap membantu kita untuk menambahkan popup ke tombol atau link tanpa menggunakan kode JavaScript tambahan. Juga, dengan menggunakan Bootstrap, kita dapat membuat form HTML yang dirancang dengan baik dalam waktu yang singkat.

Tutorial ini akan menunjukkan bagaimana kamu dapat mengintegrasikan form Bootstrap modal/popup ke website kamu menggunakan Bootstrap dan mengirimkan formulir dengan jQuery, Ajax, dan PHP. Sebagai contoh, kita akan membangun contact form dengan Bootstrap modal popup dan mengirimkan formulir setelah validasi menggunakan jQuery, Ajax, dan PHP. Hal-hal berikut ini yang akan diimplementasikan di script form Bootstrap modal.

Modal popup dengan contact form menggunakan Bootstrap.
Memvalidasi data form sebelum mengirimkan menggunakan jQuery.
Mengirimkan data form dengan jQuery, Ajax, dan PHP.
Mengirimkan email ke website admin menggunakan PHP.

Bootstrap dan Library jQuery

Bootstrap digunakan untuk membuat modal popup dan mendesain form HTML, kita harus menyertakan bootstrap dan library jQuery lebih dulu.

<!-- bootstrap css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- library jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<!-- bootstrap js -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

HTML: Form Bootstrap Modal Popup

Kode HTML berikut ini akan menghasilkan sebuah dialog Popup Window menggunakan Bootstrap. Tombol digunakan untuk memicu Modal Window dan membuka form untuk mengirimkan permintaan kontak. Tombol atau link membutuhkan dua data-* attribute, data-toggle="modal" dan data-target="#modalForm". Juga, Modal div harus ada dan attribute id harus sama dengan attribute data-target agar memicu link atau tombol.

<!-- Tombol untuk memicu modal -->
<button class="btn btn-success btn-lg" data-toggle="modal" data-target="#modalForm">
    Buka Contact Form
</button>

<!-- Modal -->
<div class="modal fade" id="modalForm" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">Tutup</span>
                </button>
                <h4 class="modal-title" id="labelModalKu">Contact Form</h4>
            </div>

            <!-- Modal Body -->
            <div class="modal-body">
                <p class="statusMsg"></p>
                <form role="form">
                    <div class="form-group">
                        <label for="masukkanNama">Nama</label>
                        <input type="text" class="form-control" id="masukkanNama" placeholder="Masukkan nama Anda"/>
                    </div>
                    <div class="form-group">
                        <label for="masukkanEmail">Email</label>
                        <input type="email" class="form-control" id="masukkanEmail" placeholder="Masukkan email Anda"/>
                    </div>
                    <div class="form-group">
                        <label for="masukkanPesan">Pesan</label>
                        <textarea class="form-control" id="masukkanPesan" placeholder="Masukkan pesan Anda"></textarea>
                    </div>
                </form>
            </div>

            <!-- Modal Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary submitBtn" onclick="kirimContactForm()">KIRIM</button>
            </div>
        </div>
    </div>
</div>

JavaScript: Memvalidasi dan mengirimkan form

Fungsi kirimContactForm() dipicu pada saat mengklik tombol kirim form. Dalam fungsi kirimContactForm(), data form popup akan divalidasi sebelum dikirimkan dan diserahkan ke file kirim_form.php untuk diproses lebih lanjut menggunakan jQuery dan Ajax.

<script>
function kirimContactForm(){
    var reg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
    var nama = $('#masukkanNama').val();
    var email = $('#masukkanEmail').val();
    var pesan = $('#masukkanPesan').val();
    if(nama.trim() == '' ){
  alert('Masukkan nama Anda.');
        $('#masukkanNama').focus();
  return false;
 }else if(email.trim() == '' ){
  alert('Masukkan email Anda.');
        $('#masukkanEmail').focus();
  return false;
 }else if(email.trim() != '' && !reg.test(email)){
  alert('Masukkan email yang valid.');
        $('#masukkanEmail').focus();
  return false;
 }else if(pesan.trim() == '' ){
  alert('Masukkan pesan Anda.');
        $('#masukkanPesan').focus();
  return false;
 }else{
        $.ajax({
            type:'POST',
            url:'kirim_form.php',
            data:'contactFrmSubmit=1&nama='+nama+'&email='+email+'&pesan='+pesan,
            beforeSend: function () {
                $('.submitBtn').attr("disabled","disabled");
                $('.modal-body').css('opacity', '.5');
            },
            success:function(msg){
                if(msg == 'ok'){
                    $('#masukkanNama').val('');
                    $('#masukkanEmail').val('');
                    $('#masukkanPesan').val('');
                    $('.statusMsg').html('<span style="color:green;">Terima kasih telah menghubungi kami.</p>');
                }else{
                    $('.statusMsg').html('<span style="color:red;">Ada sedikit masalah, silakan coba lagi.</span>');
                }
                $('.submitBtn').removeAttr("disabled");
                $('.modal-body').css('opacity', '');
            }
        });
    }
}
</script>

kirim_form.php

Di dalam file kirim_form.php, hal-hal berikut akan dilakukan untuk memproses form.

Memeriksa apakah formulir yang dikirimkan tidak kosong dan memvalidasi email dengan filter FILTER_VALIDATE_EMAIL di PHP.
Mendapatkan data form dengan menggunakan metode PHP $_POST.
Mengirimkan email HTML dengan informasi kontak ke email yang telah ditetapkan menggunakan fungsi PHP yaitu mail().

Setelah langkah-langkah yang diperlukan selesai, pesan status akan ditampilkan yang menggunakan metode success Ajax. Lihat kode JavaScript pada baris 32.

<?php
if(isset($_POST['contactFrmSubmit']) && !empty($_POST['nama']) && !empty($_POST['email']) && (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) === false) && !empty($_POST['pesan'])){

    // data form yang dikirimkan
    $nama   = $_POST['nama'];
    $email  = $_POST['email'];
    $pesan= $_POST['pesan'];

    /*
     * Kirim email ke alamat dibawah ini
     */
    $ke     = '[email protected]';
    $subjek= 'Nyoba Contact Form';

    $kontenHtml = '
    <h4>permintaan kontak telah disampaikan pada Codingan, berikut ini rinciannya.</h4>
    <table cellspacing="0" style="width: 300px; height: 200px;">
        <tr>
            <th>Nama:</th><td>'.$nama.'</td>
        </tr>
        <tr style="background-color: #e0e0e0;">
            <th>Email:</th><td>'.$email.'</td>
        </tr>
        <tr>
            <th>Pesan:</th><td>'.$pesan.'</td>
        </tr>
    </table>';

    // Mengatur header content-type untuk mengirim email HTML
    $headers = "MIME-Version: 1.0" . "\r\n";
    $headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";

    // header tambahan
    $headers .= 'From: '.$nama.'<'.$email.'>' . "\r\n";

    // Kirim email
    if(mail($ke,$subjek,$kontenHtml,$headers)){
        $status = 'ok';
    }else{
        $status = 'err';
    }

    // status output
    echo $status;die;
}

Kesimpulan

Contoh script ini menyediakan cara yang mudah dan cepat untuk mengintegrasikan form Popup dan mengirim data form ke email. Jika kamu ingin menyimpan data form untuk digunakan di kemudian hari, masukkan data form ke dalam database MySQL sebelum mengirim email.