使用 html 网络表单发送 php 邮件

Question

我已经建立了一个仍在建设中的页面，我正在构建一个网络表单供用户与我联系。

当我填写网络表单并点击 "send" 按钮时，消息发送成功并且我在我的邮件中收到了它......但是当我点击 "send" 按钮时，我重新- directed off page，说发送成功。

如何在不重定向页面的情况下提示用户消息已成功发送，并在同一 window 中获取消息？

这是我的HTML代码

<form action="assets/php/contactUs.php" id="contact" class="form" role="form" method="post">
      <div class="row">
        <div class="col-xs-6 col-md-6 form-group">
          <input class="form-control" id="name" name="name" placeholder="Name" type="text" required />
        </div>
        <div class="col-xs-6 col-md-6 form-group">
          <input class="form-control" id="email" name="email" placeholder="Email" type="email" required />
        </div>
      </div>
      <textarea class="form-control" id="message" name="message" placeholder="Message" rows="5"></textarea>
      <div class="row">
        <div class="col-xs-12 col-md-12">
          <button class="btn btn btn-lg">Send Message</button>
        </div>
      </div>
    </form>

这是我的contactUs.php代码

<?php

$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];

$message = <<<EMAIL

$message

From: $name

My email is: $email

EMAIL;

$to = "mymail@mymail.com";
$subject = "New Customer Enquiry";

mail($to, $subject, $message, "From: " . $email);
echo "Thank you, your message has been successfully sent!";

?>

AJAX

<script        src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"     type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('.btn-lg').click(function(){
$.post( "assets/php/contactUs.php", $( "#contact" ).serialize(),     function(msg){
    alert(msg);
} );
});
});
</script>

这是消息发送成功的结果。

请大家帮帮我！谢谢！

重定向选项

$firstpageurl = 'http://example.com';
echo "Your message has been successfully sent!";
$header('Location: '.$firstpageurl);

Answer 1

您的表单标签的操作部分是 "assets/php/contactUs.php"

<form action="assets/php/contactUs.php" id="contact" class="form" role="form" method="post">

这意味着发布此表单会将您带到该页面。您可以对该页面进行编码以发送电子邮件并像这样将它们重定向回来...

header('Location: '.$firstpageurl);

或将 php 代码放入第一页并删除整个操作属性。如果将 php 放在该页面上，则需要将代码包装在 if 中，以便人们可以在发布表单之前加载该页面。

    if (isset($_POST['email'])){
      echo "Sent email";
      [email send code here]
    }

至于把消息说它已发送...这只适用于第二种方法。要在完全不加载整页的情况下执行此操作，请使用 ajax。

Answer 2

通过删除 type 属性，将 Ajax 用作 below.Change 提交类型按钮到普通按钮。

<script        src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"     type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('.btn-lg').click(function(event){
$.post( "config.php", $( "#contact" ).serialize(),     function(msg){
    alert(msg);
} );
event.preventDefault();
});
});
</script>

Answer 3

你想为此使用 JQuery。

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$("#contact").submit(function(){
    var form_data=$("form").serialize();
    $.post( "assets/php/contactUs.php",form_data, function( data ) {
        alert(data);
    });
    event.preventDefault();
});
</script>

Answer 4

不使用 Javascript 也可以做到。执行以下操作：

将表单设置为 post 自身（例如，如果您的表单在 index.php 上，请设置 action="index.php"
页面加载后，检查$_POST是否发送了表单值。
如果$_POST值为空，显示表格
如果设置了 $_POST 值，请对这些值执行您需要执行的操作，然后将结果输出到页面中。

这是一个非常简单的例子来说明我的意思。

<?php
  $submitted = false;

  if (isset($_POST["myinput"]) && $_POST["myinput"] != '') {
    $submitted = true;
  }
?>
<?php
  if ($submitted == false) {
?>
  <form action="index.php" method="post">
    <input name="myinput"><input type="submit">
  </form>
<?php } else { ?>
  <h1>Form Submitted</h1>
<?php } ?>

使用 html 网络表单发送 php 邮件

Send php mail using html webform

html

php

email

webforms

sendmail