So let’s start the coding.
Steps1: Include Bootstrap and JavaScript Files
In this tutorial we have created HTML using Bootstrap, so included Bootstrap files and jQuery in head tag in index.php.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="script/feedback.js"></script>
Steps2: Create Form HTML with Button
In index.php, we will create Bootstrap Modal with Form and a Button to open Modal Form.
<div id="feedback"><button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#feedback-modal">Feedback Modal Form</button></div>
<div id="feedback-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Send Feedback</h3>
</div>
<div class="modal-body">
<form class="feedback" name="feedback">
<strong>Name</strong>
<br />
<input type="text" name="name" class="input-xlarge" value="Laeeq">
<br /><br /><strong>Email</strong><br />
<input type="email" name="email" class="input-xlarge" value="phpzag@gmail.com">
<br /><br /><strong>Message</strong><br />
<textarea name="message" class="input-xlarge">Thanks for tutorials and demos!</textarea>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-success" id="submit">Send</button>
<a href="#" class="btn" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
Steps3: Handle Modal Submit with jQuery Ajax
Here in form_process.js, we have handled modal form submit using jQuery Ajax and post form data to server end to feedback.php. Also display response data on page after modal form process.
$(document).ready(function(){
$("button#submit").click(function(){
$.ajax({
type: "POST",
url: "feedback.php",
data: $('form.feedback').serialize(),
success: function(message){
$("#feedback").html(message)
$("#feedback-modal").modal('hide');
},
error: function(){
alert("Error");
}
});
});
});
Steps4: Process Modal Form Data at Server End
In feedback.php, we will get form submitted post data. Now we can send/store feedback form data. Here in this example, we have send back form details with message.
<?php
if (isset($_POST['name'])) {
$name = strip_tags($_POST['name']);
$email = strip_tags($_POST['email']);
$message = strip_tags($_POST['message']);
echo "<strong>Name</strong>: ".$name."</br>";
echo "<strong>Email</strong>: ".$email."</br>";
echo "<strong>Message</strong>: ".$message."</br>";
echo "<span class='label label-info'>Your feedback has been submitted with above details!</span>";
}
?>
You can view the live demo from the Demo link and can download the script from the Download link below.
Demo [sociallocker]Download[/sociallocker]