Sending an email using php

Question

Given a standard html form such as the one below;

<form method="post" action=<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>>
                            <div class="row half">
                                <div class="6u"><input type="text" placeholder="Name" name="name" /></div>
                                <div class="6u"><input type="text" placeholder="Email" name="email" /></div>
                            </div>
                            <div class="row half">
                                <div class="12u"><textarea name="message" placeholder="Message" name="message"></textarea></div>
                            </div>
                            <div class="row">
                                <div class="12u">
                                    <ul class="actions">
                                        <li><input type="submit" class="button" value="Send Message" name="submit" /></li>
                                        <li><input type="reset" class="button alt" value="Clear Form" name="clear"/></li>
                                    </ul>
                                </div>
                            </div>
                        </form>

And the following php

if(isset($_POST['submit'])){
    $to = "enquiries@appcloudkent.com"; // this is your Email address
    $from = $_POST['email']; // this is the sender's Email address
    $name = $_POST['name'];
    $subject = "Website Enquiry";
    $message = $name . " wrote the following:" . "\n\n" . $_POST['message'];
    $headers = "From:" . $from;
    $headers2 = "From:" . $to;

    if(isValidString($from) && isValidString($name) && isValidString($message)){
        mail($to,$subject,$message,$headers);
    }
}

It is possible to send an email, however, this approach causes a couple of problems. Because my form is at the bottom of the page, when send is clicked the page is redirected back and the focus goes back to the top of the page.

What is the correct way to provide adequate user feedback to let the user know the email was sent, is it possible to navigate back to the page and automatically scroll to the bottom - allowing me to change the send button to green or something?

Failing that, is there a better approach to doing this?

Thanks

Answer 1

Add an anchor link before your form. <a id="anchorName"></a>

Post your form to the anchor.

<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>#anchorName">

Answer 2

You could submit the form using an XMLHttpRequest, and cancel the default action of pressing submit. jQuery's .post() and event.preventDefault() methods are particularly good at that.

Answer 3

The form action should point to the page itself (like it does in your example) so you can display error messages from validation (like you don't).

If the form is not at the top of your page you can add an anchor:

<h2><a name="theForm">The form</a></h2>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>#theForm">

If the form is processed properly (=mail sent), it is good practice to redirect to another page, showing a success message. So pressing F5 doesn't submit the form again (and send another mail).

if (mail($to,$subject,$message,$headers)) {
    // redirect to page showing success message and exit script
} else {
    // redirect to page showing error message and exit script
}

I usually redirect to the same page again, but attach an param ( $_SERVER["PHP_SELF"].'?mail_success=1' ) and then inside the template I decide whether to show the success message, error message or the form:

if (isset($_REQUEST['mail_success'])) {
    // show success message
} elseif (isset($_REQUEST['mail_error'])) {
    // show error message, technical issues, try again bla bla
} else {
    // show the form (including validation errors if necessary)
}