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.
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 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">×</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>
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>
Dalam file submit_form.php, berikut cara kerja yang akan dilakukan untuk memproses form submit request.
$_POST 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; }
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.
