Complete contact form functionality with Google Form

[Skydodle]

Overview

We need to complete the contact form functionality so that users may submit their feedbacks/ concerns as a Github issue on our repo using the form.

More Info

We will integrate Google Form on the Contact Page and replace the current form. Access token would be store in Apps Script project. Users would also receive a confirmation email after feedback submission.

Action Items

• [x] (Dev Lead/PM) Create a 311 bot account
• [x] (Dev Lead/PM) From the bot account, create a personal access token with the repo scope.
• [x] Create a Google Form with 311's Google account
  • [x] Edit the Google Form's script via Google Apps Script, so that on form submit it will post to 311's Github repo as an issue
  • [x] On the Google Form, click on the three-dots(more) on top right corner, go to Script editor from drop-down
  • [x] In Apps Script project, store the github token as a variable in Script Properties, ie. GITHUB_TOKEN
  • [x] In Apps Script project, create a script to extract form responses (docs: Apps Script API on FormResponse), and make a post request to Github using the token variable (docs: Github REST API)
  • [x] Test the form submission to see if new issue is created on repo
• [x] Install the Email Notification extension on the Google Form and configure confirmation email on form submit
• [x] Embed the Google Form on the Contact page in place of the current contact form

Update 06-27-24: Removing EmailJS from implementation due to EmailJS API restricts request from non-browser environment like Google Apps Script. We will be using an Google Form Extension to send confirmation email instead.

• [x] ~~(Dev Lead/PM) Create a EmailJS account using HackForLA, sign up here.~~
  • [x] ~~Create an email service.~~
  • [x] ~~Create an email template.~~
  • [x] ~~Gather the email service and email template ID (update -- see this comment for info)~~
• [x] ~~Update script in Apps Script to make request to EmailJS on form submit~~
  • [x] ~~Test on form submission to see if email is received~~

Resources/Instructions

Script to put in Apps Script

function onFormSubmit(e) {
  const formResponse = e.response; // Use the FormResponse object
  const itemResponses = formResponse.getItemResponses(); // Get all item responses

  // Extract responses using the correct indices
  const fullName = itemResponses[0].getResponse(); // Full Name
  const email = itemResponses[1].getResponse(); // Email
  const neighborhoodAssociation = itemResponses[2].getResponse() || 'Not provided'; // Neighborhood Association
  const message = itemResponses[3].getResponse(); // Message

  // Construct title and body for GitHub issue
  const title = `Feedback from ${fullName} (${email})`;
  const body = `**Full Name:** ${fullName}\n**Email:** ${email}\n**Neighborhood Association:** ${neighborhoodAssociation}\n**Message:**\n${message}`;

  // GitHub API configuration
  const GITHUB_ORG = 'hackforla'; // Replace with your organization name
  const GITHUB_REPO = '311-data'; // Replace with the repository name
  const GITHUB_TOKEN = PropertiesService.getScriptProperties().getProperty('GITHUB_TOKEN');

  const url = `https://api.github.com/repos/${GITHUB_ORG}/${GITHUB_REPO}/issues`;
  const payload = {
    'title': title,
    'body': body
  };

  const options = {
    'method': 'post',
    'contentType': 'application/json',
    'headers': {
      'Authorization': `token ${GITHUB_TOKEN}`
    },
    'payload': JSON.stringify(payload)
  };

  // Sending the request to create the GitHub issue
  const response = UrlFetchApp.fetch(url, options);
  Logger.log(response.getContentText());
}


function setUpTrigger() {
  const form = FormApp.getActiveForm();
  ScriptApp.newTrigger('onFormSubmit')
           .forForm(form)
           .onFormSubmit()
           .create();
}