구글 폼 제출 자동화하기(Automate to Submit Google Form)

위와 같은 구글 폼 제출을 코드로 자동화해보겠습니다. 아래 링크는 제가 포스팅을 위해 만든 폼입니다.(forms.gle/jqS6 HzBgLVeZ1 nUc7)

설문지 자동화하기

저처럼 먼저 제출해야 하는 구글 폼과 비슷한 테스트용 폼을 따로 만들어 개발할 때 사용하시길 바랍니다. 자동화가 올바르게 동작하는지 확인하실 수 있습니다.

구글 폼 작동 확인하기

구글 폼은 form 태그를 통해서 데이터를 제출합니다. 하지만 input으로 보이는 부분은 실제로 div 태그로 구성되어 있고, 데이터는 따로 hidden 타입 input에 담겨있습니다.

폼 제출 요청을 하기 위해서는 두 가지 정보가 필요한데요.

1. 어디로 요청을 보낼 것인지

2. 어떤 데이터를 어떤 이름으로 보낼 것인지

를 알아야 합니다. 아래 절차를 따라 하셔서 해당 정보를 기억해두도록 하겠습니다.

 

1. 원하는 답안을 작성합니다.

2. 개발자 도구에서 <form까지를 검색합니다.

3. form 태그의 action 값을 따로 기록합니다.

4. form 태그 안의 div를 펼쳐서 hidden타입의 input 태그를 찾습니다.

5. name과 value를 짝지어 기록합니다.

서버에서 요청 보내기

이 요청은 CORS가 허용되지 않습니다(프론트에서 요청 보내면 결과 확인 불가). 저는 그래서 서버(node, firebase functions)에서 요청을 보냈습니다. 요청을 보낼 때는 axios를 사용했습니다만, 원하시면 다른 걸 쓰셔도 됩니다.

form 태그의 요청에 담기는 데이터 흉내내기

const formUrlEncoded = (x) =>
  Object.keys(x).reduce((p, c) => p + `&${c}=${encodeURIComponent(x[c])}`, '')

먼저 application/x-www-form-urlencoded 방식의 요청을 하고자 할 때 필요한 함수를 만들겠습니다. Object.keys, reduce, encodeURIComponent는 혹시 모르시겠으면 한 번 찾아보시면 되는데, 이 예제에서 굳이 이해하실 필요는 없습니다. 폼 태그를 통해 요청을 보내면 input 태그들의 name값과 value값이 위와 같은 규칙을 가진 문자열로 변환되어 전송되게 된다는 정도만 이해하면 됩니다.
간단히 요약하면 인풋은 객체이고, 아웃풋은 문자열인 어떤 함수를 정의하는데, 이 함수로 폼 요청을 흉내 낼 것이다. 정도입니다.

요청 보내기

const formData = {
  'entry.1682982420': '빙빙바',
  'entry.1736238762': '1층',
  'entry.1191662158': '37.5 미만',
  'entry.1175693492': '이상없음',
}

먼저 요청할 데이터를 위와 같이 객체로 준비합니다. entry 번호는 어떤 폼이냐에 따라 다르겠죠?

const url = 'https://docs.google.com/forms/u/0/d/e/...'  // 기록해 두었던 form태그의 action속성 URL
axios({
  url,
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  data: formUrlEncoded(formData),
}).then(()=>{
  console.log('success')
}).catch((err)=>{
  console.error(err)
})

요청을 보낼 때 data속성에 우리가 정의해 두었던 formUrlEncoded를 사용하고 있습니다. 올바르게 요청했다면 success가 출력될 것입니다. 만약 formData에서 필수 기재 요소가 누락되는 등 잘못된 점이 있다면 400번대 에러가 나면서 catch 콜백이 실행될 것입니다.

덧붙임

저는 저희 팀원들이 편리하게 쓸 수 있도록 별도의 PWA를 붙여 사용하였습니다. 해당 후기는 아래 링크에서 확인하실 수 있습니다.
velog.io/@sds564/코로나-건강-설문-앱을-만들면서feat.-google-forms-react-pwa-firebase-functions

코로나 건강 설문 앱을 만들면서(feat. google forms, react, pwa, firebase functions)