Jquery-PhpNo Comments

default thumbnail

You want to send a mail from pop(modal) and you want to show the ‘thank you message’ on same popup without reloading the page. Here is the full guide step by step

HTML

<div class="modal" id="new_form">
    <div class="modal-dialog">
	<div class="row">
	   <div class="col-md-7">
		<button class="close1 hidden-md hidden-sm hidden-lg" data-dismiss="modal">×</button>
		<div class="modal-content">
		<div class="modal-body modal-body1">
		<form method="POST" id="webinar_form">
		<h2>Apply For Webinar</h2>
		    <div class="form-group">
			<label for="name">Full Name:</label>
			<input type="text" class="form-control" name="name" id="name" required>
		    </div>
		    <div class="form-group">
			<label for="email">Email:</label>
			<input type="email" class="form-control" name="email" id="email" required>
		    </div>
		    <div class="form-group">
			<label for="phone">Phone:</label>
			<input type="text" class="form-control" name="mobile" id="mobile" required>
		   </div>
		   <div class="form-group">
			<label for="phone">Webinar:</label>
			<select class="form-control" name="webinar" id="webinar_select" required>
			<option value="">Select Webinar</option>
			<option value="Free formulas webinar">Free formulas webinar</option>
			<option value="Pivot Table & Dashboard webinar">Pivot Table & Dashboard webinar</option>
			</select>
		   </div>
		   <div class="form-group">
		      <label style="width:100%">Webinar Time: <b id="webinar_time"></b></label>
		   </div>
		   <button type="submit" name="submit" class="btn btn-default" id="form_btn">Submit</button>
		</form>
	    </div>
					
	    <div class="modal-body modal-body2">
		<div class="after-mail">
		<h2>Email Sent</h2>
		<p>Please check your email for further instructions.</p>
		<span>(If this email has not arrived in the next couple of minutes, check your Spam or Promotions folder)</span>
		</div>
	    </div>
	</div>
    </div>
    <div class="col-md-5"><button class="close close1" data-dismiss="modal">×</button></div>
   </div>
</div>
</div>	  

Ajax(Jquery)

$("#webinar_form").on('submit',function(e) {
    var name = $("#name").val();
    var email = $("#email").val();
    var mobile = $("#mobile").val();
    var webinar_select = $("#webinar_select").val();
    $.ajax({
        type: 'POST',
        url: 'send_enquiry.php',
        data:{'name':name,'email':email,'mobile':mobile,'webinar_select':webinar_select},
        success: function(data){
            if(data == 1){
                $(".modal-body1").hide();
                $(".modal-body2").show();
            }
        }
    });
     e.preventDefault();
});

PHP(send_enquiry.php)

?php
$statusMsg = '';
$msgClass = '';
if(isset($_POST['name'])){
    // Get the submitted form data
    $email = $_POST['email'];
    $name = $_POST['name'];
    $mobile = $_POST['mobile'];
    $webinar = $_POST['webinar_select'];
      
        if(filter_var($email, FILTER_VALIDATE_EMAIL) === false){
            $statusMsg = 'Please enter your valid email.';
            $msgClass = 'errordiv';
        }else{
            // Recipient email
            $toEmail = '[email protected]';
            $emailSubject = 'Form submitted by'.$name;
            $emailSubject2 = 'Company Name';
	    $htmlContent2 = 'Hello,
			
Thank you for showing interest in us. We will get back to you shortly
			
Thanks & Regards,
Your Company Name';
            $htmlContent = "<h2>Form Details</h2><br><table width='500' border='1' cellpadding='3px' style='border-collapse: collapse; border:1px;'>

  <tr>
    <td>Full name</td>
    <td>$name</td>
  </tr>
  <tr>
    <td>Email</td>
    <td>$email</td>
  </tr>
  <tr>
    <td>Phone</td>
    <td>$mobile</td>
  </tr>
  <tr>
    <td>Webinar</td>
    <td>$webinar</td>
  </tr>
</table>";
           
			
            // Set content-type header for sending HTML email
            $headers = "MIME-Version: 1.0" . "\r\n";
            $headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
            
            // Additional headers
            $headers .= 'From: '.$name.'<'.$email.'>'. "\r\n";
            
            // Send email
            mail($toEmail,$emailSubject,$htmlContent,$headers);
            mail($_POST['email'],$emailSubject2,$htmlContent2);
            
            echo '1';
            
        } 
}
?>	

We are using 2 mail functions. One mail will be sent to the admin and another will be sent to the person who is filling the form

Be the first to post a comment.

Add a comment