Google Script to Fill out HTML Form

Question

I have created a script in google scripts, to take a spreadsheet and fill out multiple google docs successfully. I am trying to apply this logic to filling out an HTML form, basically, we need user-generated info (in our google sheet) to fill out an HTML form on a web page.

How would I get the following function to not only open but write in the data?

This is where I am at (just using an example webpage):

function testNew(){
  var js = " \
    <script> \
      window.open('https://colorlib.com/etc/cf/ContactFrom_v1/index.html', '_blank', 'width=800, height=600'); \
      google.script.host.close(); \
    </script> \
  ";
  var html = HtmlService.createHtmlOutput(js)
    .setHeight(10)
    .setWidth(100);
  SpreadsheetApp.getUi().showModalDialog(html, 'Now loading.'); // If you use this on Spreadsheet
//  DocumentApp.getUi().showModalDialog(html, 'Now loading.'); //  If you use this on Document
//  SlidesApp.getUi().showModalDialog(html, 'Now loading.'); //  If you use this on Slides
} 

This is an example of what I did with the google docs, trying to replicate in forms:

function myFunction() {
      var data = Sheets.Spreadsheets.Values.get('google sheet ID HERE', 'A2:R300');
      // google doc template id, already got deal memo
      var templateId = 'google doc ID HERE';
      // loop through the values "i" is looping the rows, "#" is the column example: 0=a,1=b   
      for (var i = 0; i < data.values.length; i++) {
        var date = data.values[i][0];
        var email = data.values[i][1];
        // grab the google doc template, create a copy, and generate the new id
        var documentId = DriveApp.getFileById(templateId).makeCopy().getId();
        // change the name of the new file
        DriveApp.getFileById(documentId).setName(companyName+ '-' + projectName+ '-' + 'Insurance Report');
        // get the document body as a variable
        var body = DocumentApp.openById(documentId).getBody();
        // replace values with google sheet data
        body.replaceText('##Date##', date);
        body.replaceText('##Email##', email);

Answer 1

I have many functions that I have written that interact with a lot of third party forms and websites. Don't let it fool you that all that a form is, is a human-readable way to "POST" to a url. The easier way to do this is to use the UrlFetchApp.fetch(url, options) function in Google Apps script.

I use Chrome but other browsers have this functionality as well:

1. open Chrome, navigate to the form and then press F12 to open up the developers window.
2. Click on 'Network'
3. fill out the form manually and then review the traffic in the 'Network' window and find the POST that your browser sent to the site,
4. With that highlighted, you will see a couple other tabs for 'Headers','Preview','Response'
5. In the 'Headers' tab, scroll to the bottom and it will show you what the request looked like. Screen shot this and send these variables through the UrlFetchApp.fetch() to the website as the 'payload' and formatted like the function below.
6. Look at the 'Request URL' at the top of that same 'Headers' tab and you will use that as the URL below:

function senddatatoform() {

var url = 'http://theurlthattheformpoststohere.com'; // this is the 'request url' as shown in your browser (not always the url of the form).  

var payload = {
     datapoint1: datapoint1value,
     datapoint2: datapoint2value,
     ... //continue with all required post data   
     }

var options = {
    method: "POST",
    payload: payload
    }

var response = UrlFetchApp.fetch(url,options);
/*this is where what you need to do next might vary -- if you're looking for a 'success' page, you might write some code here to verify that the http response is correct based on your needs.
*/ 
}