Google Sites Help
Steegle

Contact Us Form - Email - Google Apps Script

Google now provide scripts you can add to spreadsheets, so now when a Google Sites visitor uses your Google Spreadsheet Form you can have the response e-mailed to you, rather than having to go to the spreadsheet.

Instructions

Create Form

  1. Go to Google Docs (either http://drive.google.com for a personal account or http://drive.google.com/a/example.com for Google Apps uses, where example.com is your domain)
  2. Use the Create button then choose Form to make a new form
  3. In the form you need to make three required questions
    1. Name
    2. E-mail Address (so you can get back in touch)
    3. Message (or whatever you want to call it)
  4. For further information on how to create forms see Forms: Creating Forms - Google Docs Help Centre
  5. In the form editor use View responses button to open the spreadsheet of responses. If cannot see a View responses button use the Choose response destination button and choose to make a new spreadsheet (give it a sensible name) for your responses. Once created the Choose response destination button changes to a View responses button.

Create the script

  1. Once in the spreadsheet use the Tools menu, then Script editor...
  2. In the Google Apps Script dialogue box choose to make a Blank Project.
  3. In the Script editor give your script a sensible name, (rather than Untitled project) delete all the existing text and paste in the script below
function nl2br_(input_string){
  return input_string.replace(/(\r\n|\r|\n)/g,'<br />');
}

function contactUsMailer(e) {
  //  This script e-mails the contents of a form to a given recipient
  //  The form must have three fields in the order of: name; e-mail address; and message
  //  You must change the recipient variable below to your e-mail address
  try {
    var recipient = '';
    var timestamp = e.values[0];
    var name = e.values[1];
    var email = e.values[2];
    var message = e.values[3];
    var body = name+' <'+email+'> sent the following message: '+message;
    var bodyHTML = '\
        <p>'+name+' <a href="mailto:'+email+'">'+email+'</a> sent the following message: </p>\
        <blockquote>'+nl2br_(message)+'</blockquote>\
        <p>Sent by the <a href="http://www.steegle.com/">Steegle.com</a> Contact Us Form Google Apps Script</p>';
    var advancedArgs = {htmlBody:bodyHTML , replyTo:email};
    MailApp.sendEmail(recipient, "Contact Us Form", body, advancedArgs);
  } catch(e){
    MailApp.sendEmail(recipient, "Error - Contact Us Form", e.message);
  }
}

Adapt the script

Enter your e-mail address in between the quotation marks on the

var recipient = ''; 

line, so it should now look something like

var recipient = 'someone@example.com';

and use the Save button (it's a little icon of a floppy disc)

Create the script trigger

  1. While still in the Script Editor use the Edit menu, then Current project's triggers...
  2. In the Current Project's Triggers box use the No triggers set up. Click here to add one now link
  3. From the drop-down boxes make sure that contactUsMailer, From spreadsheet and On form submit are selected and use the Save button.
  4. Close the Script Editor and return to your spreadsheet. While you're there save the spreadsheet and close it.
  5. Go to your Google Site and use the Edit Page button, then the Insert menu and then Spreadsheet form
  6. Choose the form you have created and use the Select button, then choose the display options you want for the form (width, height title, border, etc) and then use the Save button
  7. Use the Save button (top-right corner) to save the page and then you can test your form.

I have included the form below, so please do use the form to let me know what you think of the script.

Screenshots

Google Form - Choose response destination

Google Sheets - Tools menu - Script Editor

Google Apps Script - Blank Project

Script Editor with new blank project

Script Editor with pasted script

Resources - Current Project's Triggers Menu

Current Project's Triggers

Larger Forms

If you have a larger form and want to e-mail the form contents upon submission please see Henrique Abreu's Form Emailer Google Apps Script. Form Emailer can send any size form and you do not need any knowledge of JavaScript.

Many thanks to Henrique Abreu for creating his Form Emailer script.