This tutorial help to create feedback form using bootstrap and send through email using php. We will use PHP mail functionality to send form content using email. I just want to send a user feedback form through email using the PHP on-click of submit button.
Form content will go to the mentioned email id, you can configure the target email id in config or into PHP script file.
You can also check other tutorials of PHP mail,
- Send Feedback Form Through Mail Using PHP
- How To Send Email From Localhost Using PHP
- How to Send Mail in PHP
I will use the following files for this Product Listing tutorial,
index.php: This file contains the feedback form.email.php: This file will use to send a feedback form to the target email id.
Video Tutorial:
If you are more comfortable in watching a video that explains about Send Feedback Form Through Email, then you should watch this video tutorial.
How to send Feedback Form Through Email
We will create feedback from into index.php file, You can use this tutorial for Quote Form and send to email id or as a contact-us page that will send to email id through php email.
Step 1: We will create an HTML form using Bootstrap.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <div class="container"> <div class="col-sm-6" style="padding-top: 50px;"> <div class="well"> <h2>How To Send Feedback Form Through PHP Email</h2> </div> <div class="col-md-12"> <div class="form-area"><form id="frm_feedback" role="form" method="post" name="frm_feedback"> <div class="alert alert-success hide"> </div> <br style="clear: both;"> <h3 style="margin-bottom: 25px; text-align: center;">Feedback Form</h3> <div class="alert alert-danger hide"> </div> <div class="form-group"><input id="name" class="form-control" name="name" type="text" placeholder="Name"></div> <div class="form-group"><input id="email" class="form-control" name="email" type="email" placeholder="Email"></div> <div class="form-group"><input id="mobile" class="form-control" name="mobile" pattern="[0-9]*" type="number" placeholder="Mobile Number"></div> <div class="form-group"><textarea id="comments" class="form-control" maxlength="140" name="comments" rows="7" placeholder="comments"></textarea></div> <button id="submit" class="btn btn-primary pull-right" name="submit" type="submit">Submit Form</button></form></div> </div> </div> </div>
Step 2: We will create AJAX request that will send Form data to email.php file.
<script type="text/javascript">
// this is the id of the form
$("#frm_feedback").submit(function(e) {
var string_msg = '';
$.ajax({
type: "POST",
url: "email.php",
data: $("#frm_feedback").serializeArray(), // serializes the form's elements.
success: function(data)
{
var data = jQuery.parseJSON(data);
if(data.status) {
$('.alert-success').toggleClass('hide');
$('.alert-danger').addClass('hide');
$('.alert-success').html(data.message);
//console.log(data); // show response from the php script.
} else {
console.log(data);
$('.alert-danger').toggleClass('hide');
$('.alert-success').addClass('hide');
string_msg = data.message.join('<br />');
console.log(string_msg);
$('.alert-danger').html(string_msg);
}
}
});
e.preventDefault(); // avoid to execute the actual submit of the form.
});
</script>
I am using jQuery, so i’ll use jQuery AJAX fucntionality to send data to server side.
Step 3: We will create send mail functionality into email.php, need to add below code into email.php. We will use php mail() function to send mail.mThe mail() function takes some parameters like, to_email, subject of email and body of email.
<?php
if(isset($_POST)) {
// EDIT THE 2 LINES BELOW AS REQUIRED
$email_to = "[email protected]";
$email_from = "[email protected]";
$email_subject = "Test Email Using PHP feedback from";
$name = $_POST['name']; // required
$email = $_POST['email']; // required
$mobile = $_POST['mobile']; // required
$comments = $_POST['comments']; // required
$response = array('status' =--> false, 'message' => array());
$email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
if(!isset($email) || !preg_match($email_exp,$email)) {
array_push($response['message'], 'The Email Address you entered does not appear to be valid');
}
if(!isset($name) || empty($name)) {
array_push($response['message'], 'The Name you entered does not appear to be valid.');
}
if(!isset($mobile) || empty($mobile)) {
array_push($response['message'], 'The Mobile you entered does not appear to be valid.');
}
if(!isset($comments) || empty($comments) || strlen($comments) < 2) {
array_push($response['message'], 'The Comments you entered do not appear to be valid.');
}
if(!empty($response['message'])) {
echo json_encode($response);
} else {
$email_body = "Form details below.\n\n";
$email_body .= "Name: ".$name."\n";
$email_body .= "Email: ".$email."\n";
$email_body .= "mobile: ".$mobile."\n";
$email_body .= "Comments: ".$comments."\n";
// create email headers
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
if(mail($email_to, $email_subject, $email_body, $headers)) {
$response = array('status' => true, 'message' => 'Thank you for contacting us. We will be in touch with you very soon.');
echo json_encode($response);
}
}
}
?>
We are doing validation of input fields, if any input fields is empty then sent consolidated error message and displayed into feedback form, if everything perfect then we are sending success message to feedback form. We are using json_encode() function to use to send data in json format.
Truly when someone doesn’t know then its up to other users
that they will assist, so here it takes place.
Thanks, Its working fine
hello, this is a good information
Excellent post. I’m dealing with some of these
issues as well..