Как отправить контактную кнопку отправки отправить письма по электронной почте?

Question

Я очень новичок, пытаясь использовать форму для связи с нами на своем веб-сайте, который отправит нам запрос по форме на мой адрес электронной почты. Я использую шаблон, и я не знаю, как отправить эти запросы формы на мой адрес электронной почты.

Как это сделать, свяжитесь с нами, работая на моем статическом веб-сайте, а не на стороне сервера, потому что я хочу, чтобы он работал с html и javascript, как человек вводит имя, адрес электронной почты и сообщение в форме, а затем при нажатии на Отправить, затем я получаю данные человека на мой адрес электронной почты

Это коды.

<div class="container"> 
      <div class="row"> 
       <div class="col-lg-12 text-xs-center"> 
        <h2 class="section-heading">Contact Us</h2> 
        <h3 class="section-subheading text-muted">Use ths form to contact us.</h3> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-lg-12"> 
        <form name="sentMessage" id="contactForm" novalidate> 
         <div class="row"> 
          <div class="col-md-6"> 
           <div class="form-group"> 
            <input type="text" class="form-control" placeholder="Your Name *" id="name" required data-validation-required-message="Please enter your name."> 
            <p class="help-block text-danger"></p> 
           </div> 
           <div class="form-group"> 
            <input type="email" class="form-control" placeholder="Your Email *" id="email" required data-validation-required-message="Please enter your email physics."> 
            <p class="help-block text-danger"></p> 
           </div> 
           <div class="form-group"> 
            <input type="tel" class="form-control" placeholder="Your Phone *" id="phone" required data-validation-required-message="Please enter your phone number."> 
            <p class="help-block text-danger"></p> 
           </div> 
          </div> 
          <div class="col-md-6"> 
           <div class="form-group"> 
            <textarea class="form-control" placeholder="Your Message *" id="message" required data-validation-required-message="Please enter a message."></textarea> 
            <p class="help-block text-danger"></p> 
           </div> 
          </div> 
          <div class="clearfix"></div> 
          <div class="col-lg-12 text-xs-center"> 
           <div id="success"></div> 
           <button type="submit" class="btn btn-xl">Send Message</button> 
          </div> 
         </div> 
        </form> 
       </div> 
      </div> 
     </div> 

код Javascript для формы

$(function() 
{ $("#contactForm input,#contactForm textarea").jqBootstrapValidation({ 
     preventSubmit: true, 
     submitError: function($form, event, errors) { 
      // additional error messages or events 
     }, 
     submitSuccess: function($form, event) { 
      event.preventDefault(); // prevent default submit behaviour 
      // get values from FORM 
      var name = $("input#name").val(); 
      var email = $("input#email").val(); 
      var phone = $("input#phone").val(); 
      var message = $("textarea#message").val(); 
      var firstName = name; // For Success/Failure Message 
      // Check for white space in name for Success/Fail message 
      if (firstName.indexOf(' ') >= 0) { 
       firstName = name.split(' ').slice(0, -1).join(' '); 
      } 
      $.ajax({ 
       url: "././mail/contact_me.php", 
       type: "POST", 
       data: { 
        name: name, 
        phone: phone, 
        email: email, 
        message: message 
       }, 
       cache: false, 
       success: function() { 
        // Success message 
        $('#success').html("<div class='alert alert-success'>"); 
        $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;") 
         .append("</button>"); 
        $('#success > .alert-success') 
         .append("<strong>Your message has been sent. </strong>"); 
        $('#success > .alert-success') 
         .append('</div>'); 

        //clear all fields 
        $('#contactForm').trigger("reset"); 
       }, 
       error: function() { 
        // Fail message 
        $('#success').html("<div class='alert alert-danger'>"); 
        $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;") 
         .append("</button>"); 
        $('#success > .alert-danger').append("<strong>Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!"); 
        $('#success > .alert-danger').append('</div>'); 
        //clear all fields 
        $('#contactForm').trigger("reset"); 
       }, 
      }); 
     }, 
     filter: function() { 
      return $(this).is(":visible"); 
     }, 
    }); 

    $("a[data-toggle=\"tab\"]").click(function(e) { 
     e.preventDefault(); 
     $(this).tab("show"); 
    }); 
}); 
    $('#name').focus(function() { 
    $('#success').html(''); 
}); 

Answer 1

Все значения формы могут быть доступны в вашем коде PHP с $_POST

<?php 
$recipient = 'your@email.com'; 
//construct your email text here 
$message = 'Name: '.$_POST['name'].'<br/>Email: '.$_POST['email'].'Phone: '.$_POST['phone'].'<br/>Message: '.$_POST['message']; 
mail($recipient, 'MAIL SUBJECT', $message); 
?> 

mail() делает задачу отправки почты , Подробнее об этом можно узнать здесь http://php.net/manual/en/function.mail.php.

Вы можете загрузить скрипт php в основной корень общей папки сервера. Однако это означает, что вы измените URL-адрес вызова ajax только на «contact_me.php», если страница с помощью javascript находится в той же папке с php-скриптом