Google form script calling an HTML page when Submit button is clicked

Question

I have a Google Form which I have created for class registrations. I'm writing my first Google script (based on what I've learned from the Google tutorial material) to call an HTML page when the onSubmit event is triggered by the user clicking the Submit button.

The reason for calling the HTML page is to direct the user to select PayPal options contained within the page. I couldn't see a way to add them to the Settings page displayed after submission. or to the form itself, so I decided to create second page.

The code I've cobbled together (yes, I'm a noob) is

function goToPayment() {
//onSubmit, goes to the PayPal payment page so 
//that users pay for the    class


function doGet(request) {
    return HtmlService.createTemplateFromFile('PayPayPayment.html')
        .evaluate()
        .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

function include(filename) {
    return HtmlService.createHtmlOutputFromFile(filename)
        .getContent();
}
}

The page that this calls is:

<!DOCTYPE html>
<html>
    <head>
        <base target="_top">
    </head>
    <body>
        <h1>Payment</h1>
            <p>
                Complete registration for the Introduction to Arduino 
                class by paying for it with PayPal. All major credit 
                cards accepted. 
            </p>
           <form action="https://www.paypal.com/cgi-bin/webscr"  method="post" target="_top">
           <input type="hidden" name="cmd" value="_s-xclick">
           <input type="hidden" name="hosted_button_id" value="PutValueHere">
           <table>
               <tr><td><input type="hidden" name="on0" value="Early bird pricing!">Early bird pricing!</td></tr><tr><td><select name="os0">
               <option value="Member price (before May 11th) - kit, instruction, lunch">Member price (before May 11th) - kit, instruction, lunch $145.00 USD</option>
               <option value="Member price (before May 11th) - instruction, lunch">Member price (before May 11th) - instruction, lunch $50.00 USD</option>
               <option value="Non-member price (before May 11th) - kit, instruction, lunch">Non-member price (before May 11th) - kit, instruction, lunch $165.00 USD</option>
               <option value="Non-member price (before May 11th) - instruction, lunch">Non-member price (before May 11th) - instruction, lunch $60.00 USD</option>
               </select> </td></tr>
          </table>
          <input type="hidden" name="currency_code" value="USD">
          <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_paynow_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
          <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
     </form>
   </body>
 </html>

The script passes unit tests but is not being called when I test the form. Any ideas or suggestions as to how to complete this task? Open to suggestions as to work-arounds as well as to where I should fix my code.

It looks like the doGet() function is inside of the goToPayment( function block. It that intentional? Is the goToPayment( function, the function that is being triggered by the "On Form Submit" event? — Alan Wells
You can't open another web app with a Google Form. You already know how to create an Apps Script Web App, so you could use that instead of the Google Form. Google Forms is better at handling multiple form submissions in rapid succession, but if that is unlikely, you might not need to worry about it. — Alan Wells

Douglas Gaskell Douglas Gaskell · Accepted Answer · 2016-04-30T22:02:02

You cannot redirect users from a Google Form. If you want this functionality, you will need to create a GAS Web App. Included is example code to deploy a simple web app yourself.

Example Web App: Web App

Deploying:

Make a new Google Apps Script project, paste the code below into their respective files. (HTM & JavaScript goes into HTML files).

Click the cloud icon:

Edit options and click deploy:

GAS Code:

function doGet(){
  var template = HtmlService.createTemplateFromFile('Index'); 
  return template.evaluate()
      .setTitle('Example Form')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}


function formSubmit(formData){
  //Submission logic goes here
  return true;
}

JavaScript:

<script>
var inputs = [
  'nameInput',
  'cityInput',
  'stateInput',
  'zip-codeInput',
  'typeSelect'

]

$(function(){
  console.log('startup')
  $('#submitButton').on('click', function(){
    console.log(getFormData());

    google.script.run.withSuccessHandler(function(returnValue){
      goToPayment();
    }).formSubmit(getFormData());

  })
})

function goToPayment(){
    $('#mainForm').toggleClass('hidden');
    $('#paymentForm').toggleClass('hidden');
}

function getFormData(){
  var output = {};
  for(var i = 0; i < inputs.length; i++){
      output[inputs[i]] = $('#'+inputs[i]).val();
  }
  return output;
}
</script>

HTML:

<!DOCTYPE html>
<html>

    <head>
        <base target="_top">
        <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    </head>

    <body>
        <div id="mainForm">
             <h1>Example Form</h1>
            <form>
                <div>
                    <div class="inline form-group">
                        <label for="name">Name</label>
                        <input type="text" id="nameInput" style="width: 150px;">
                    </div>
                </div>

                <div>
                    <div class="inline form-group">
                        <label for="city">City</label>
                        <input type="text" id="cityInput" style="width: 150px;">
                    </div>
                    <div class="inline form-group">
                        <label for="state">State</label>
                        <input type="text" id="stateInput" style="width: 40px;">
                    </div>
                    <div class="inline form-group">
                        <label for="zip-code">Zip code</label>
                        <input type="text" id="zip-codeInput" style="width: 65px;">
                    </div>
                </div>

                <div class="block form-group">
                    <label for="typeSelect">Type</label>
                    <select id="typeSelect">
                        <option value=""></option>
                        <option value="Type 1 ">Type 1</option>
                        <option value="Type 2 ">Type 2</option>
                        <option value="Type 3 ">Type 3</option>
                        <option value="Type 4 ">Type 4</option>
                    </select>
                </div>
                <button class="action" type="button" id="submitButton">Submit</button>
            </form>
        </div>
        <div id="paymentForm" class="hidden ">
            <h1>Payment</h1>
            <p>
                Complete registration for the Introduction to Arduino 
                class by paying for it with PayPal. All major credit 
                cards accepted. 
            </p>
           <form action="https://www.paypal.com/cgi-bin/webscr"  method="post" target="_top">
             <input type="hidden" name="cmd" value="_s-xclick">
             <input type="hidden" name="hosted_button_id" value="PutValueHere">
             <table>
                 <tr><td><input type="hidden" name="on0" value="Early bird pricing!">Early bird pricing!</td></tr><tr><td><select name="os0">
                   <option value="Member price (before May 11th) - kit, instruction, lunch">Member price (before May 11th) - kit, instruction, lunch $145.00 USD</option>
                   <option value="Member price (before May 11th) - instruction, lunch">Member price (before May 11th) - instruction, lunch $50.00 USD</option>
                   <option value="Non-member price (before May 11th) - kit, instruction, lunch">Non-member price (before May 11th) - kit, instruction, lunch $165.00 USD</option>
                   <option value="Non-member price (before May 11th) - instruction, lunch">Non-member price (before May 11th) - instruction, lunch $60.00 USD</option>
                 </select> </td></tr>
            </table>
            <input type="hidden" name="currency_code" value="USD">
            <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_paynow_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
            <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
          </form>
        </div>
         <?!= HtmlService.createHtmlOutputFromFile( 'JavaScript').getContent(); ?>
    </body>

    <style>
        .hidden {
            display:none;
        }
        .form-group {
            margin: 2px 0px;
        }

        #submitButton {
            margin: 4px 0px;
        }

        body {
          margin-left: 50px;
        }
    </style>

</html>

Google form script calling an HTML page when Submit button is clicked

1 Answers