Fetch API POST Google Forms의 답변

Google Forms를 자체 디자인으로 사용할 때의 TIPS입니다.
인터넷에서 흔히 볼 수 있는 방법은 다음과 같다. form 탭에 목적지를 지정하고, input 탭에name를 지정한다.

<form action="https://docs.google.com/.../formResponse">
  <input type="text" name="entry.xxxx">
  <input type="text" name="entry.yyyy">
  <textarea type="text" name="entry.zzzz"></textarea>
</form>

페이지 마이그레이션이 조금 안 좋아서 Fetch API로 보내는 방법을 고민했어요.
이 사이트 더 자세한 설명이 있으신 분들은 함께 참고하시기 바랍니다.
Google Forms의 제작 방법을 한 번 알고 있다는 전제로 대화를 나눕니다.
생성된 창 미리 보기 화면에 테스트 데이터를 보내고 브라우저 검증 도구를 사용하여 내용을 확인합니다.
다음 예에서 준비된 세 개의 텍스트 영역을 입력하고 발송 후 발송 페이지에서 검증 도구를 엽니다.
Network 탭에서 form Response 항목을 찾습니다.화면은 Google Chrome이지만 브라우저의 종류, 버전 등에 따라 찾기 방법이 다릅니다.

중요한 건 entry야.1000 - 항목에는 양식의 ID와 입력된 내용이 적혀 있습니다.실제 POST의 데이터는 URL로 인코딩되며view source를 누르면 확인할 수 있습니다.
https://docs.google.com/.../formResponse대신 Content-Type으로 응용 프로그램/x-www-form-urlencoded를 지정하고 URL 인코딩 문자열을 바디에서 POST를 진행하면 같은 내용을 Google Forms에 보낼 수 있습니다.이참에 엔트리 얘기 좀 하자.1000 - 다른 항목이 없어도 정상적으로 발송할 수 있습니다.
포스터가 만든 부분만 코드로 만들면 다음과 같은 느낌이 든다.

const form1 = encodeURIComponent('フォーム1の回答');
const form2 = encodeURIComponent('フォーム2の回答');
const form3 = encodeURIComponent('フォーム3の回答');

fetch('https://docs.google.com/.../formResponse', {
  method: 'POST',
  mode: 'no-cors',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: `entry.xxxx=${form1}&entry.yyyy=${form2}&entry.zzzz=${form3}`
});

no-cors를 지정하지 않으면 데이터가 전송되지 않습니다.
POST의 데이터와 Google Forms의 설정(required 등)이 일치하지 않으면 데이터가 정확하게 전달되지 않기 때문에 이 방면의 검증이 필요하다. 원래 자바스크립트가 이동하지 않으면 데이터가 전송되지 않기 때문에 각종 오류 처리가 필요하다.
그럼에도 불구하고 데이터베이스를 준비할 필요가 없고 무료로 사용할 수 있으며 Google Forms는 개인이 사용하기에 매우 적합합니다.