如何通知用户他们的电子邮件已在同一页面上发送而不是页面重定向

Question

我是 PHP 的新手，我正在使用脚本在用户使用网站联系我们表单时发送电子邮件。电子邮件工作正常。然而，我遇到的问题是，当用户提交消息时，他们被重定向到一个新页面，说明 "Contact form successfully submitted. Thank you, I will get back to you soon!"。我想要的是表格上方同一页面上的一条简单消息（即绿色消息，上面写着 "email sent".

PHP 脚本是：

Code Share

我的 HTML 表格目前看起来像：

                <form id="contact-form" method="post" action="sendemail.php" role="form">

                <div class="messages"></div>

                <div class="controls">

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="form_name">Firstname *</label>
                                <input id="form_name" type="text" name="name" class="form-control" placeholder="Please enter your firstname *" required="required" data-error="Firstname is required.">
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="form_lastname">Lastname *</label>
                                <input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Please enter your lastname *" required="required" data-error="Lastname is required.">
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="form_email">Email *</label>
                                <input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="form_phone">Phone</label>
                                <input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Please enter your phone">
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="form_message">Message *</label>
                                <textarea id="form_message" name="message" class="form-control" placeholder="Message for me *" rows="6" required="required" data-error="Please,leave us a message."></textarea>
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <input type="submit" class="btn btn-success btn-send" value="Send message">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <p class="text-muted"><strong>*</strong> These fields are required.</p>
                        </div>
                    </div>
                </div>

            </form>

提前致谢！

Answer 1

最好的方法是在 PHP 中制作一个脚本来像您已经这样做的那样发送您的电子邮件（您可能需要修改它）。您将需要更改您的表格以使用 Ajax。这将允许您将 POST 数据发送到将发送电子邮件的脚本，但它也会给您回复，然后您可以在回复中显示已发送的消息。

Answer 2

好的，在评论中讨论后我创建了这个：

<div class="messages"></div>

<div class="controls">

    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="form_name">Firstname *</label>
                <input id="form_name" type="text" name="name" class="form-control" placeholder="Please enter your firstname *" required="required" data-error="Firstname is required.">
                <div class="help-block with-errors"></div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label for="form_lastname">Lastname *</label>
                <input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Please enter your lastname *" required="required" data-error="Lastname is required.">
                <div class="help-block with-errors"></div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="form_email">Email *</label>
                <input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
                <div class="help-block with-errors"></div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label for="form_phone">Phone</label>
                <input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Please enter your phone">
                <div class="help-block with-errors"></div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label for="form_message">Message *</label>
                <textarea id="form_message" name="message" class="form-control" placeholder="Message for me *" rows="6" required="required" data-error="Please,leave us a message."></textarea>
                <div class="help-block with-errors"></div>
            </div>
        </div>
        <div class="col-md-12">
            <button class="btn btn-success btn-send" id="sendEmailBtn">Send message</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <p class="text-muted"><strong>*</strong> These fields are required.</p>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#sendEmailBtn").click(function () {
            /* Disable the input fields and button so the user
                can't edit them or submit the form multiple times */
            $("input").prop("disabled", true);
            $("#sendEmailBtn").prop("disabled", true);

            // Submit the form via ajax
            $.post("http://yourdomain.com/sendemail.php", {
                name: $("#form_name").val(),
                surname: $("#form_lastname").val(),
                email: $("#form_email").val(),
                phone: $("#form_phone").val(),
                message: $("#form_message").val()
            }, function (data, status) {
                /* Responses, check the data is correct if it is display
                   your message else enable the form elements and button
                   and display an error message */
                console.log(data, status);
                // Method to display your message, maybe something like this: $(".messages").html("<h1>your messages</h1>");
            });
        });
    });
</script>

无需更改您的 PHP 脚本即可正常工作。

如何通知用户他们的电子邮件已在同一页面上发送而不是页面重定向

How to notify a user their email has been sent on the same page rather than page redirect

html

php

contactus