TUTORIAL

Cara Membuat Form Submit Modal Popup Bootstrap dengan Jquery Ajax & PHP

シックス , TUTORIAL
0
33071

Bootstrap membantu untuk merancang dan membangun tombol atau link popup tanpa menggunakan kode JavaScript tambahan, sehingga akan memudahkan pekerjaan kita dan tidak memakan waktu yang banyak untuk membuatnya.

Dalam tutorial ini kita akan belajar integrasi form modal popup untuk website menggunakan Bootstrap dan mensubmit form dengan jQuery, Ajax, dan PHP. Sebagai contoh, kita akan membangun form kontak dengan Bootstrap modal popup dan mensubmit form tersebut dan mem-validasi menggunakan jQuery, Ajax, dan PHP. 

  1. Modal popup dengan form kontak menggunakan Bootstrap.
  2. Memvalidasi data form sebelum mengirimkan menggunakan jQuery.
  3. Mengirimkan data form dengan jQuery, Ajax, dan PHP.
  4. Kirim email ke situs web admin menggunakan PHP.

Bootstrap & jQuery Library

Bootstrap is used to create modal popup and design HTMl form, include the bootstrap and jQuery library first.

Bootstrap digunakan untuk membuat popup modal dan desain form HTML, termasuk bootstrap dan perpustakaan jQuery pertama.

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

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

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

 

HTML Code: Bootstrap Modal Popup Form

HTML berikut membuat dialog popup window menggunakan bootstrap. Tombol digunakan sebagai trigger modal window dan membuka form untuk submit permintaan kontak. Tombol atau link membutuhkan dua data-* attributes, data-toggle="modal" dan data-target="#modalForm". Modal div dan atribut id yang harus sama dengan atribut data-target yang men trigger link atau tombol.

<!-- Button to trigger modal -->
<button class="btn btn-success btn-lg" data-toggle="modal" data-target="#modalForm">
    Open 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">Close</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Contact Form</h4>
            </div>
            
            <!-- Modal Body -->
            <div class="modal-body">
                <p class="statusMsg"></p>
                <form role="form">
                    <div class="form-group">
                        <label for="inputName">Name</label>
                        <input type="text" class="form-control" id="inputName" placeholder="Enter your name"/>
                    </div>
                    <div class="form-group">
                        <label for="inputEmail">Email</label>
                        <input type="email" class="form-control" id="inputEmail" placeholder="Enter your email"/>
                    </div>
                    <div class="form-group">
                        <label for="inputMessage">Message</label>
                        <textarea class="form-control" id="inputMessage" placeholder="Enter your message"></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="submitContactForm()">SUBMIT</button>
            </div>
        </div>
    </div>
</div>

 

JavaScript Code: Validate and Submit Form

Fungsi SubmitContactForm() mengklik form tombol submit. Dalam fungsi submitContactForm(), form popup data divalidasi sebelum mengirimkan dan mengirim file ke submit_form.php untuk diproses lebih lanjut menggunakan jQuery dan Ajax.

<script>
function submitContactForm(){
    var reg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+.)+[A-Z]{2,4}$/i;
    var name = $('#inputName').val();
    var email = $('#inputEmail').val();
    var message = $('#inputMessage').val();
    if(name.trim() == '' ){
        alert('Please enter your name.');
        $('#inputName').focus();
        return false;
    }else if(email.trim() == '' ){
        alert('Please enter your email.');
        $('#inputEmail').focus();
        return false;
    }else if(email.trim() != '' && !reg.test(email)){
        alert('Please enter valid email.');
        $('#inputEmail').focus();
        return false;
    }else if(message.trim() == '' ){
        alert('Please enter your message.');
        $('#inputMessage').focus();
        return false;
    }else{
        $.ajax({
            type:'POST',
            url:'submit_form.php',
            data:'contactFrmSubmit=1&name='+name+'&email='+email+'&message='+message,
            beforeSend: function () {
                $('.submitBtn').attr("disabled","disabled");
                $('.modal-body').css('opacity', '.5');
            },
            success:function(msg){
                if(msg == 'ok'){
                    $('#inputName').val('');
                    $('#inputEmail').val('');
                    $('#inputMessage').val('');
                    $('.statusMsg').html('<span style="color:green;">Thanks for contacting us, we'll get back to you soon.</p>');
                }else{
                    $('.statusMsg').html('<span style="color:red;">Some problem occurred, please try again.</span>');
                }
                $('.submitBtn').removeAttr("disabled");
                $('.modal-body').css('opacity', '');
            }
        });
    }
}
</script>

 

Send Contact Request Email (submit_form.php)

Dalam file submit_form.php, berikut cara kerja yang akan dilakukan untuk memproses form submit request.

  1. Memeriksa apakah formulir yang diajukan tidak kosong dan memvalidasi email dengan FILTER_VALIDATE_EMAIL filter dalam PHP.
  2. Mendapatkan form data dengan menggunakan metode $_POST PHP.
  3. Mengirim email HTML dengan rincian kontak ke situs admin menggunakan fungsi PHP mail().

Setelah aksi yang diperlukan selesai, status pesan akan ditampilkan dengan metode Ajax dengan sukses.

 

<?php
if(isset($_POST['contactFrmSubmit']) && !empty($_POST['name']) && !empty($_POST['email']) && (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) === false) && !empty($_POST['message'])){
    
    // Submitted form data
    $name   $_POST['name'];
    $email  $_POST['email'];
    $message$_POST['message'];
    
    /*
     * Send email to admin
     */
    $to     'admin@example.com';
    $subject'Contact Request Submitted';
    
    $htmlContent '
    <h4>Contact request has submitted at CodexWorld, details are given below.</h4>
    <table cellspacing="0" style="width: 300px; height: 200px;">
        <tr>
            <th>Name:</th><td>'.$name.'</td>
        </tr>
        <tr style="background-color: #e0e0e0;">
            <th>Email:</th><td>'.$email.'</td>
        </tr>
        <tr>
            <th>Message:</th><td>'.$message.'</td>
        </tr>
    </table>';
    
    // Set content-type header for sending HTML email
    $headers "MIME-Version: 1.0" "
";
    $headers .= "Content-type:text/html;charset=UTF-8" "
";
    
    // Additional headers
    $headers .= 'From: CodexWorld<sender@example.com>' "
";
    
    // Send email
    if(mail($to,$subject,$htmlContent,$headers)){
        $status 'ok';
    }else{
        $status 'err';
    }
    
    // Output status
    echo $status;die;
}

 

Kesimpulan

Ini adalah contoh script yang mudah dan cara gampang mengintegrasikan form popup dalam mengirmkan sebuah email.  jika ingin menyimpan form data ke database mysql gunakan fungsi insert sebelum mengirimkan email.

LIVE DEMO    DOWNLOAD SOURCE CODE

0 Comments

×