Emailing a Form

A common thing on websites is to get some information from the user. Perhaps you want to solicit comments or allow people to request to be added to your mailing list. Maybe you want to allow them to order some merchandise. In general, an interactive site like that is way outside the scope of this course (see CS 304, instead), but we can do a specific case where an HTML form is emailed to a fixed address using JavaScript and Ajax.

For this example, we are imagining that the website will allow the user to order a t-shirt, specifying the size, color and a message. The size and color are chosen from menus, and the form will ensure that the user doesn't forget to choose a value.

Once the user fills out the form, they can click the submit button, which will first check that the required inputs have non-empty values, and then invoke a function to handle the submit event. That function does several things: (1) Formats the email message by copying the user's data into a template element, rather like the Madlibs assignment, then (2) extracts the formatted message as text and sends it to the server using Ajax. There is a custom PHP script on the server that sends the email.

Here's the example:

T-Shirt Form

Here's our example form:

The response is here:

Template

Here's the email message we want to send. In practice, you would probably make this element hidden, using display: none, but we've left it visible so you can understand what's happening.

Note that the line breaks in the source code will be preserved in the email, so you can format the email message however you like.

My name is CUSTOMER and my phone number is PHONE. My email address is EMAIL.

I would like a SIZE shirt, in COLOR with this message:

MESSAGE

How It Works

Earlier, we gave a high-level description of how the application works. Let's dig into more of the details now.

First, build the form you want. That's just HTML and CSS, so while it's tricky to get all this looking just the way you want, there's no JavaScript involved. Note that we don't currently cover radio buttons and checkboxes in CS 110, because the HTML coding is trickier, and the JavaScript to determine the value of the input is more complex. So if you want those kinds of inputs, you will have to go beyond the scope of CS 110. Talk to your advisor.

The action of the form should be a custom PHP script, created using the web application that we provided in class and lab. That PHP script sends email messages to a fixed email address that you supplied when you used the web application to create the PHP script. This means that your users don't have any choice about where the email message goes: it goes to the email address you specified.

If you want to make certain inputs required, as we did, you can add the required attribute to those inputs. Modern web browsers will look for that attribute and stop the form submission. Again, no JavaScript is necessary.

Second, build the formatted mail message. Leave it visible during development; you can always hide it once you are done. Again, this is just plain HTML. No CSS is necessary, since you're just formatting text. Put placeholders into the template like this: 

    <div id="email_body">
      My email address is <span class="addr">EMAIL</span>.
    </div>

Third, define a function that will copy over the data from the form into the formatted email message. The function will look like this: 

function format_message() {
    ...
    $("#email_body .addr").text( $("#tshirt_form [name=addr]").val() );
    ...
}

Test that function and get it working before you go on. The body of your email message will be created like this, so make sure the value looks like you want: 

     $("#email_body").text()

Finally, write a function that will invoke the send_email_using_ajax function to send the email. That function needs four inputs:

  1. the name of the sender
  2. the email address of the sender
  3. the subject line of the sender, and
  4. the body of the email, as one string.

Sometimes these are drawn from the order form, as we've done here, but they don't have to be. Here's the function for our example: 

function email_tshirt_order() {
    format_message();
    var name = $("#tshirt_form [name=customer]").val();
    var email = $("#tshirt_form [name=addr]").val();
    var dest = $("#tshirt_form").attr("action");
    send_email_using_ajax(dest, name, email, "T-shirt order", $("#email_body").text());
    // Because this is now a 'submit' handler, we want to prevent
    // the normal form submission, since we are using Ajax instead
    return false;
}

Note the documentation of the last few lines. This function will be a handler for the submit event for the form. We don't want the form submitted, because we're doing it with Ajax instead, so this function must return false.

There's one last step, which is to attach that function as the submit event handler, like this: 

$("#tshirt_form").submit(email_tshirt_order);

That's it. View the source of this example for the full details.