Google Apps Script HTML Form

I have a simple html form with email sending

this is the html file:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      function submitForm() {
        var name = document.getElementById('name').value;
        var email = document.getElementById('email').value;
        var comment = document.getElementById('comment').value;
        
        /**
         * First run submitData(name, email, comment) function of Code.gs
         * Then, run showMessage(value) function of this html file
         */
        google.script.run
              .withSuccessHandler(showMessage) // execute showMessage(value) function on success
              .submitData(name, email, comment); // call submitData(name, email, comment) function present in Code.gs file
      }
      
      function showMessage(value) {
        document.getElementById('message').innerHTML = value;
        document.getElementById('name').value = '';
        document.getElementById('email').value = '';
        document.getElementById('comment').value = '';
      }
    </script>
  </head>
  <body>
    <h2>Feedback Form</h2>
    <div id="message" style="color:green"></div>
    <p><input id="name" type="text" placeholder="Your Name"><p>
    <p><input id="email" type="email" placeholder="Your Email"></p>
    <p><textarea id="comment" rows="10" cols="40"></textarea></p>
    <p><button onclick="submitForm(); return false;">Submit</button></p>    
  </body>
</html>

and this is the gs file:

function doGet(e) {
  return HtmlService
    .createHtmlOutputFromFile('index.html')
    .setTitle("Simple HTML Form Example");
}
 
function submitData(name, email, comment) {
  var subject = 'New Feedback';
  var body = 'Name: ' + name + '<br> Email: ' + email + '<br> Comment: ' + comment;
  var to = '[email protected]'; // EMAIL ADDRESS WHERE THE FEEDBACK EMAIL IS SENT
  MailApp.sendEmail({
      to: to,
      subject: subject,
      htmlBody: body
    }); 
  
  return 'Feedback Sent!';
}

I'm looking for a formula to view the edited fields name, email, instead of the text "Feedback Sent!"

Thanks in advance for the help!

Solution 1:

HTML Email Form

html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      function submitForm(form) {
        google.script.run
        .withSuccessHandler(function(value){
          document.getElementById('message').innerHTML = value;
          document.getElementById('name').value = '';
          document.getElementById('email').value = '';
          document.getElementById('comment').value = '';
        }) 
        .submitData(form);
      }
    </script>
  </head>
  <body>
    <h2>Feedback Form</h2>
    <div id="message" style="color:green"></div>
    <form>
    <br /><input id="name" type="text" name="name" placeholder="Your Name">
    <br /><input id="email" type="email" name="email" placeholder="Your Email">
    <br /><textarea id="comment" rows="10" cols="40" name="comment"></textarea>
    <br /><input type="button" value="Submit" onclick="submitForm(this.parentNode);" />  
  </form>  
  </body>
</html>

Google Script:

function submitData(form) {
  var subject='New Feedback';
  var body=Utilities.formatString('name: %s <br />Email: %s<br />Comment: %s', form.name,form.email,form.comment);
  var to = '[email protected]'; 
  MailApp.sendEmail({to: to,subject: subject,htmlBody: body}); 
  //Logger.log('name: %s <br />Email: %s<br />Comment: %s', form.name,form.email,form.comment);
  return Utilities.formatString('name: %s <br />Email: %s<br />Comment: %s', form.name,form.email,form.comment);
}
//It works as a dialog
function showTheDialog() {
  var userInterface=HtmlService.createHtmlOutputFromFile('aq7');
  SpreadsheetApp.getUi().showModelessDialog(userInterface, "Emails")
}

enter image description here

I didn't actually test it with the mailapp line. I just used the Logger and saw that it returned the feedback message.

Google Apps Script HTML Form

Solution 1:

Related

Recent Posts