Carnegie Mellon University

How to Create a MailTo Web Form

You use a web form to collect information directly through a site, for example, to provide a method of contact, conduct a survey, request an RSVP, place an order or solicit feedback.

Note: Do not use a MailTo web form to request personal or sensitive information, such as Social Security numbers, banking information, passwords, and so on.

Follow these three steps to create a MailTo web form.

To add a form to your web page, first create it in HTML using a text editor or the HTML source option in the CMS. You can also use a web authoring tool such as Dreamweaver, available in the Computer Labs, which enables you to build the form in preview mode. Before you begin, it may be helpful to document the information you want to request on the form or sketch how you want the form to look. 

IMPORTANT: HTML field names are case sensitive and cannot contain spaces.

  1. Begin your HTML form with the <form> tag and end with the </form> tag.

<form id="my-form" name="my-form" method="post" action="http://www.cmu.edu/cgi-bin/mailto">
</form>

  1. Select the form input elements to request information. This example has text fields to request a customer's name, email address, phone number, and a Submit button.

<form id="my-form" name="my-form" method="post" action="http://www.cmu.edu/cgi-bin/mailto">
<p>Name <input name="Name" type="text" /></p>
<p>Email Address <input name="Email" type="text"/></p>
<p>Phone Number <input name="Phone" type="text" /></p>
<p><input type="submit" name="Submit" value="Submit" /></p>
</form>

  1. Specify the CMU email address of the person who will receive the form responses (@andrew.cmu.edu or @cmu.edu). This email address is a hidden field and will not display on the published form. 

<form id="my-form" name="my-form" method="post" action="http://www.cmu.edu/cgi-bin/mailto">
<input name="MailTo" type="hidden" value="your-email@andrew.cmu.edu" />
<p>Name <input name="Name" type="text" /></p>

<p>Email Address <input name="Email" type="text"/></p>

<p>Phone Number <input name="Phone" type="text" /></p>

<p><input type="submit" name="Submit" value="Submit" /></p>
</form>

  1. (Optional) Add the MailCC attribute with the CMU email address of a second person who will receive the form responses. This email address is a hidden field and will not display on the published form.

<form id="my-form" name="my-form" method="post" action="http://www.cmu.edu/cgi-bin/mailto">
<input name="MailTo" type="hidden" value="your-email@andrew.cmu.edu" />
<input name="MailCC" type="hidden" value="your-second-email@andrew.cmu.edu" />
<p>Name <input name="Name" type="text" /></p>

<p>Email Address <input name="email" type="text"/></p>

<p>Phone Number <input name="Phone" type="text" /></p>

<p><input type="submit" name="Submit" value="Submit" /></p>
</form>

Note: Contact the Computing Services Help Center if you want to email form results to a non-cmu.edu address.

Follow these steps to create a text file that acts as the template for the email message sent to the specified recipient when the form is submitted.

  1. Create your email template using a web authoring tool  or text editor (e.g., Dreamweaver, TextEdit, Notepad or SimpleText). Your text file should include variables for all information that is submitted on the form. See Example - Text File for Email Form Results.
  • Include typical headers: To, From, CC (if you want the message sent to a secondary recipient) and Subject.
  • Do not include a header for the date; this will be included as part of the email message.
  • Use an input name variable for each item (%InputName). The variables must be the same as those defined in your HTML form.
  1. Save your email message template as a text (.txt) file in your web form folder.
  2. In the HTML web form, reference the text file by adding the hidden field EmailForm with the value set to the path (complete URL) of the email message template. The complete URL includes the name of your website, text file folder name and email message template name.

<form id="my-form" name="my-form" method="post" action="http://www.cmu.edu/cgi-bin/mailto">

<input name="MailTo" type="hidden" value="primary@andrew.cmu.edu" />

<input name="MailCC" type="hidden" value="secondary@andrew.cmu.edu" />

<input name="EmailForm" type="hidden" value="http://www.cmu.edu/my-site/email-message-template/email-message.txt" />
<p>Name <input name="Name" type="text" /></p>

<p>Email Address <input name="Email" type="text"/></p>

<p>Phone Number <input name="Phone" type="text" /></p>

<p><input type="submit" name="Submit" value="Submit" /></p>

</form>

Example - Text File for Email Form Results

The following example uses these variables:

  • %MailTo - the email address of the person who will receive the form results
  • %UserID - the email address of the person who submitted the form
  • %MailCC - the email address of the second person who will receive the form results
  • %Name - the name of the person who submitted the form
  • %Phone - the phone number of the person who submitted the form

To: %MailTo
From: %UserID
CC: %MailCC
Subject: Form Results

The following person submitted a website form: %Name, %UserID, %Phone

There are two options to define the action (or response) presented to the user when the form is submitted:

  • Redirect an individual to a web page
  • Create a custom response page that contains variable text based on form responses (AWPS, UserWeb and CourseWeb forms only)

Redirect to a Response Web Page (RedirectURL Attribute)

  1. Select an existing page or create a new web page containing the information you want to display after an individual submits a form. If creating a new response page, save the HTML page in a separate response page folder. 
    CMS Note: The response page appears in the side navigation by default, but you can choose to hide it.
  2. In the HTML web form page, add the hidden field RedirectURL with the value set to the path (complete URL) of the response page you created. The response page must be a web page published to a CMU web server (cmu.edu or andrew.cmu.edu). 

    In this example, the form named "my-form" redirects to a page named "response.html" when submitted.

<form id="my-form" name="my-form" method="post" action="http://www.cmu.edu/cgi-bin/mailto">

<input name="MailTo" type="hidden" value="your-email@andrew.cmu.edu" />

<input name="MailCC" type="hidden" value="your-second-email@andrew.cmu.edu" />

<input name="EmailForm" type="hidden" value="http://www.cmu.edu/my-site/email-message-template/email-message.txt" />
<input name="RedirectURL" type="hidden" value="http://www.cmu.edu/my-site/redirect-response/response.html" />
<p>Name <input name="Name" type="text" /></p>

<p>Email Address <input name="Email" type="text"/></p>

<p>Phone Number <input name="Phone" type="text" /></p>

<p><input type="submit" name="Submit" value="Submit" /></p>

</form>

Create a Customized Response Page With Variable Text (ResponseForm Attribute)

IMPORTANT: If you create your web form page in the Content Management System (CMS), you CANNOT use the ResponseForm attribute to create a customized response template.

  1. Create a new web page as your response form template, then save the page as an HTML file in your response page folder.
  2. Write the response message you want to display after an individual submits a form. Use variables (%VariableName) in the HTML code to pull responses from the submitted form into the response page.

    In this example, the Name (%Name) and UserID (%UserID) entered on the web form will display within the custom message of the response page.

<html>
<body>
<p>Thank you %Name for using my-form. You indicated that your UserID is %UserID.</p>
</body>
</html>

  1. In the HTML web form page, add the hidden field ResponseForm with the value set to the name of the response form template page you created.

    In the example below, the web form named "my-form" uses a custom response page named "acknowledge.html." 

<form id="my-form" name="my-form" method="post" action="http://www.cmu.edu/cgi-bin/mailto">

<input name="MailTo" type="hidden" value="your-email@andrew.cmu.edu" />

<input name="MailCC" type="hidden" value="your-second-email@andrew.cmu.edu" />

<input name="EmailForm" type="hidden" value="http://www.cmu.edu/my-site/email-message-template/email-message.txt" />
<input name="ResponseForm" type="hidden" value="http://www.cmu.edu/my-site/response-form-template/acknowledge.html" />
<p>Name <input name="Name" type="text" /></p>

<p>Email Address <input name="Email" type="text"/></p>

<p>Phone Number <input name="Phone" type="text" /></p>

<p><input type="submit" name="Submit" value="Submit" /></p>

</form>