Search code examples
formsemailgoogle-apps-scriptgoogle-sites

Using Google Sites/Scripts: Send Input Values from a Form to a Support Email Address


Disclaimer- I AM A BEGINNER. If there is not a simple answer here, I will gladly review the correct tutorial, etc. But I've been looking for a couple days and I can't quite get this.

Use Case:

AS A: visitor viewing a Google Site
I WANT TO: fill out a form and select Submit
SO THAT: the information entered will populate an email and be sent to a specific address.

What I've done:

  • Created emailForm.html:

    <html>
     <body>
      <script>google.script.run.processForm(document.getElementById('myForm'));
      </script>
      <div> 
       <form id='myForm'>
        Subject:<input name='emailSubject' type='text'>
        <br><br>
        Body: <textarea name='emailBody' type='text'></textarea>
        <br><br>
        Add an Attachment: <input name='emailFile' type='file'>
        <br>
         <input type='button' value="Submit ZD Ticket" onclick='google.script.run.formSubmitReply()'>
        </form>
       </div>
      </body>
     </html>
    
  • Created sendEmail.gs: (NOTE: Script is incomplete. I have added my comments)

    function doGet() {  // This function creates the form on the google site for the customer to use
    
    return HtmlService.createHtmlOutputFromFile('emailForm.html')
    
    }
    
    function formSubmitReply() {   // This function is ran on the "Submit" button is selected and sends the email
    
    var subject = // ?? HELP: In a perfect world, it would be as easy as HtmlOuput.getInput('emailSubject')
    var body = // ?? HELP: In a perfect world, it would be as easy as HtmlOuput.getContent('emailBody')
    var attachment = // ?? HELP: In a perfect world, it would be as easy as HtmlOuput.getContent('emailFile') 
    MailApp.sendEmail ('support@support.com', 'subject, body + attachment,                  
                {name:'Support Request'});
    }
    

My Assumptions:

  • I don't think I need to access any DB and I'm trying to avoid using a Google Spreadsheet. I just want to send the input values straight from the form to an email address.
  • I read one tutorial that suggested Logging the form values and then call that. But I don't know how to call the appropriate input from the form OR have those inputs added to the email. Sample function from Tutorial:

    function processForm(theForm) {
    Logger.log(  // What goes here?
    );
    }
    

THANKS ALL for Any help!


Solution

  • You need to pass the form in to the call from your client code. You can retrieve the form using document.getElementById or simply make use of the fact that the parent of the button is the form, so you can reference it via this.parentNode. Try changing the html like this:

    onclick='google.script.run.formSubmitReply( this.parentNode )'

    Then in your server code you can use it all:

    function formSubmitReply(theForm) {
      var subject = theForm.emailSubject;
      var body = theForm.emailBody;
      var file = theForm.emailFile;
      MailApp.sendEmail ('support@support.com', subject, body, {attachments: file});
    }