1

I am new to php and bootstrap, so go easy on me.

I have a HTML5 template that uses Bootstrap 3.3.4 that I have done a bunch of work on customizing it to our needs. There is a contact form on the html page that uses HTML5 validation and a sendmail.php page to send a message to us. I read up a bit on php and managed to configure it to send successfully when installed on our server, however right now the confirmation is being redirected to a new page once submit is clicked. I would like to modify it so that the echo "alert" shows as a bootstrap alert (green or red) on the same html5 page above or below the contact form rather than opening a new page. Through my searching I found the bootstrap alert code (lines 3-5) for the html side and added to my code below:

 <div class="contact-form default-form">
<form method="post" action="sendmail.php">
<div class="alert alert-success hide"></div>
<br style="clear:both"> 
<div class="alert alert-danger hide"></div>
<div class="form-group">
<input type="text" name="name" value="" placeholder="Name *" required></div>
<div class="form-group">
<input type="email" name="email" value="" placeholder="Email *" required></div>
<div class="form-group">
<input type="text" name="subject" value="" placeholder="Subject*" required></div>
<div class="form-group">
<textarea name="message" placeholder="Message *" required></textarea>
</div>
<button type="submit" class="theme-btn btn-style-two">Send Message</button>
</form>
</div>
</div>

but I am not sure how to have the sendmail.php post the messages to the html file. Here is my sendmail.php file:

<?php
    //we need to get our variables first
    
    $email_to =   'sales@*****************.ca'; //the address to which the email will be sent
    $name     =   $_POST['name'];  
    $email    =   $_POST['email'];
    $subject  =   $_POST['subject'];
    $message  =   $_POST['message'];
    
    /*the $header variable is for the additional headers in the mail function,
     we are asigning 2 values, first one is FROM and the second one is REPLY-TO.
     That way when we want to reply the email gmail(or yahoo or hotmail...) will know 
     who are we replying to. */
    $headers  = 'From: '. $name . '<' . $email . '>' . "\r\n";
    $headers .= "Reply-To: $email\r\n";
    
    if(mail($email_to, $subject, $message, $headers)){
        echo 'Thanks for your message. Someone will be in touch soon!'; // we are sending this text to the ajax request telling it that the mail is sent..      
    }else{
        echo 'Message failed to send. Please get in touch with us via another contact option or try again later.';// ... or this one to tell it that it wasn't sent    
    }
?>

Any help would be appreciated!

Higguns
  • 21
  • 2
  • You can simply POST to the same page that the form is on. Put the code from `sendmail.php` in the file which shows the form, and only have it run if `$_POST` is set, ie if the form has been posted. Alternatively, `sendmail.php` redirect back to that form with some `$_SESSION` or `$_GET` variables, and use them on the page to display your status msg. If you want to get fancy, using Javascript and AJAX you can avoid the page reloading/refreshing at all - search for "*PHP send email AJAX*" and you will find many examples here on SO. – Don't Panic Aug 09 '21 at 06:56
  • 1
    Searching for "*PHP mail same page*" turns up many examples of all these approaches to get you started. – Don't Panic Aug 09 '21 at 06:58
  • 1
    Does this answer your question? [PHP form - on submit stay on same page](https://stackoverflow.com/questions/17333901/php-form-on-submit-stay-on-same-page) – Don't Panic Aug 09 '21 at 06:59

1 Answers1

1

As you said, you are sending a message as a response in Ajax, You have to remove action from the <form> tag and replace the button type from submit to button. After that, you need to do 2 changes as below.

  1. Pass message from the PHP file

    $response = array();
if(mail($email_to, $subject, $message, $headers)){
    $response['status'] = 'success';
    $response['message'] = 'Thanks for your message. Someone will be in touch soon!';     
}else{
    $response['status'] = 'error';
    $response['message'] = 'Message failed to send. Please get in touch with us via another contact option or try again later.';   
}
echo json_encode($response);
exit();

  2. Show message once ajax will get the response.

$.ajax({
    type: "POST",
    dataType: "json",
    url: "URL",
    data: "yourdata"
}).success(function (response) {
    if(response.status == 'success') {
        $('.alert-danger').html('');
        $('.alert-danger').addClass('hide');
        $('.alert-success').html('<label>'+ response.message + '</label>');         
        $('.alert-success').removeClass('hide');
    } else if(response.status == 'error') {
        $('.alert-success').html('');
        $('.alert-success').addClass('hide');
        $('.alert-danger').html('<label>'+ response.message + '</label>');          
        $('.alert-danger').removeClass('hide');
    }   
});
Nirav Bhut
  • 11
  • 4