HTML Dog
Skip to navigation

Form to Email

Tiptoeing outside of the boundaries of client-side coding, this page tackles a commonly requested server-side technique. It outlines a very basic method for taking the contents of a submitted form and sending it to any given email address. Y’know, like in “Contact us” forms.

There are numerous ways of achieving this, with numerous wild and wonderful programming languages, but we’re going to use a scripting language called PHP.

Step 1: Create a PHP page

If you use the extension “.php” instead of “.html” for your web page, the server hosting the page will know to execute any PHP sitting within it. So, to start, simply save an empty HTML page as “contact.php”.

Step 2: Create a form

You can read about the ins and outs of forms in the HTML Beginner Tutorial. To jump straight in, let’s use the following super-stripped-down form HTML:


<form method="post" action="contact.php">
    <textarea name="message"></textarea>
    <input type="submit">
</form>

All quite straightforward, right? The action="contact.php" bit tells the page to send the form’s content to itself when the form is submitted. Crazy, huh? We’re doing everything here with the same page…

Step 3: Send the form’s data in an email

At the very top of the page, even before the Doctype, we are going to enter a smattering of PHP to handle the form data:


<?php
if($_POST["message"]) {
    mail("your@email.address", "Form to email message", $_POST["message"], "From: an@email.address");
}
?>

<?php” marks the start of the PHP and “?>” marks the end. The server will attempt to execute everything in between as PHP.

This code checks if form data has been sent and, if it has, it uses the mail function to send the data as an email to “your@email.address” with the subject “Form to email message” and the message body that is the same as the form field with the name “message”. The email will appear to be from “an@email.address”.

Recap

You can try this out once you upload it (it requires the server to run — you won’t be able to run it locally).

Here’s what’s happening:

  1. Once the form has been submitted, the page will send the data to itself.
  2. The page will check if data has been sent and, if it has, it will send it on as an email.
  3. The browser will load the page’s subsequent HTML, including your form.

Further steps: A basic “Contact us” page

OK, how about making this a bit more like a “Contact us” form? We can add sender name and sender email address to the message and also include a confirmation message, to let the sender know their message has been sent. Here’s the whole shebang:


<?php

if($_POST["submit"]) {
    $recipient="your@email.address";
    $subject="Form to email message";
    $sender=$_POST["sender"];
    $senderEmail=$_POST["senderEmail"];
    $message=$_POST["message"];

    $mailBody="Name: $sender\nEmail: $senderEmail\n\n$message";

    mail($recipient, $subject, $mailBody, "From: $sender <$senderEmail>");

    $thankYou="<p>Thank you! Your message has been sent.</p>";
}

?><!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>Contact form to email</title>
</head>

<body>

    <?=$thankYou ?>

    <form method="post" action="contact.php">
        <label>Name:</label>
        <input name="sender">

        <label>Email address:</label>
        <input name="senderEmail">

        <label>Message:</label>
        <textarea rows="5" cols="20" name="message"></textarea>

        <input type="submit" name="submit">
    </form>

</body>

</html>

This time we’re:

  1. Checking the form has been sent (this time by looking for the form field named “submit”) and, if it has…
  2. Setting a bag-load of variables:
    1. Your email address
    2. The email subject
    3. The sender’s name (taken from the form)
    4. The sender’s email address (taken from the form)
    5. The message (taken from the form)
  3. Sending the email, using all of those variables
  4. Setting a variable for a confirmation message
  5. Loading the HTML, including the confirmation message

If the page loads and no form data has been sent then no email will be composed and no conformation message will be set so all that will happen is loading of the page’s HTML.