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

• (Dev Lead/PM) Create a 311 bot account
• (Dev Lead/PM) From the bot account, create a personal access token with the repo scope.
• Create a Google Form with 311's Google account
  • 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
  • On the Google Form, click on the three-dots(more) on top right corner, go to Script editor from drop-down
  • In Apps Script project, store the github token as a variable in Script Properties, ie. GITHUB_TOKEN
  • 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)
  • Test the form submission to see if new issue is created on repo
• Install the Email Notification extension on the Google Form and configure confirmation email on form submit
• 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.

• (Dev Lead/PM) Create a EmailJS account using HackForLA, sign up here.
  • Create an email service.
  • Create an email template.
  • Gather the email service and email template ID (update -- see this comment for info)
• Update script in Apps Script to make request to EmailJS on form submit
  • 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();
}

[ryanfchase]

Approving as a repurpose of this ticket, replacing Google Apps Script instead of OctokitJS: #1682

[ryanfchase]

This ticket is ready to be picked up (aka resumed by @Skydodle)

[Skydodle]

ETA: Friday 6/28
Availability: M-F

[Skydodle]

The Google Form is embeded on the Contact Page. Both features of posting to Github issue and send email confirmation are completed. Just waiting on the bot account to be created and provide me with the access token. Thanks.

[ryanfchase]

@Skydodle we were able to move forward with creating the bot. It has read/write permissions for 311-Data and 311-Data-Write teams.

Bot Info

• name: Roan Box
• github-id: RoanBox
• Personal Access Token (classic)
  • repo (all sub-checkboxes checked)
  • workflow
  • notification

Accessing the Personal Access Token

• available in 1Password in the 311-Data Vault
  • do not use the account in 311-Data-Dev, this profile is outdated and does not have the profile info
• in the Github item...
  • Personal Access Token > Token (copy/reveal)
  • please be careful not to accidentally paste this in a public location (Slack/Github comment)