Google 양식용 맞춤 프런트엔드

Google 양식은 데이터를 수집하는 가장 쉬운 방법 중 하나입니다. 수집된 데이터는 사전 정리되어 다양한 도구와 부가 기능을 사용하여 분석할 수 있습니다.

전제 조건

최소한 HTML forms은 알고 있어야 합니다. JavaScript 및 fetch API에 대한 지식이 있으면 좋습니다.

맞춤형 프런트엔드 필요

웹 사이트에 일관된 디자인이 필요한 경우가 있을 수 있습니다. 항상 서버와 데이터베이스로 양식을 만들 수 있지만 웹사이트에 Google 양식을 삽입하는 것이 훨씬 쉽고 경제적일 수 있습니다.

구현

첫 번째 요구 사항은 양식 설정에서 '로그인 필요' 하위 옵션을 해제하는 것입니다.


공유 가능한 링크를 사용하여 Google 양식을 열어 필요한 정보를 추출하세요. 때때로 까다로울 수 있습니다.

브라우저 DevTools 열기(F12 또는 Chrome의 경우 Ctrl+Shift+i)

양식 작업 URL 추출 중
검색 <form
양식의 action 속성을 가져옵니다. https://docs.google.com/forms/u/0/d/e/1FAIpQLSfAnJAbfTl23gNM6gAbU1gAXo03N9I6pf5LJbo3Ptmex5nqUg/formResponse

name 속성 추출 중
DevTools에서 <input를 검색하면 다음과 같은 입력 필드를 찾는 많은 입력 필드를 찾을 수 있습니다. entry.294341084
라디오 버튼 등과 같은 입력을 위한 입력 필드는 처음에 표시되지 않습니다. 그렇지 않으면 해당하는 숨겨진 입력 요소를 생성하는 옵션을 선택해야 합니다. 라디오 버튼을 확인하지 않고 \_sentinel 양식entry.100000084\_sentinel을 제거하기만 하면 됩니다.

사용자 지정 프런트 엔드는 다음 방법 중 하나로 만들 수 있습니다.

HTML 양식만: 쉬운 방법

Fetch API + HTML 양식: 더 나은 방법

HTML 양식만

HTML 양식을 만들고 action 속성을 이전에 추출한 action URL로 설정하고 method 속성은 POST 여야 합니다.name 특성을 해당 입력으로 설정합니다.

<form method="post" id="form" action="https://docs.google.com/forms/d/e/1FAIpQLSfAnJAbfTl23gNM6gAbU1gAXo03N9I6pf5LJbo3Ptmex5nqUg/formResponse">
    <label for="inp1">Write something</label>
    <input type="text" name="entry.294341084" id="inp1">
    <input type="submit" value="Submit">
</form>

그것은 아름답게 만들기 위해 CSS를 추가하는 것입니다.


이 접근 방식을 사용하면 제출 시 Google 양식 확인 페이지로 리디렉션됩니다. -_-별로 멋지지 않습니다. 가져오기 API를 사용하여 이를 방지할 수 있습니다.

Fetch API + HTML 양식

양식을 만들고 위와 동일하게 할 수 있습니다. javascript를 사용하여 가져오기 API를 사용하도록 양식의 기본 동작을 방지합니다. Method를 post로 설정해야 하며 헤더는 "Content-Type": "application/json" 여야 합니다. mode를 no-cors로 설정하거나 설정하지 않을 수 있습니다. 그러면 cors 모드에서 오류가 발생하지만 어쨌든 작동합니다.

let url = "https://docs.google.com/forms/d/e/1FAIpQLSfAnJAbfTl23gNM6gAbU1gAXo03N9I6pf5LJbo3Ptmex5nqUg/formResponse"; //action url
let form = document.querySelector("#form"); //form element

form.addEventListener("submit", (e)=>{
    e.preventDefault();//prevent default behaviour

    fetch(url,{
        method: "POST",
        mode: "no-cors",
        header:{
            'Content-Type': 'application/json'
            },
        body: getInputData()
    })
    .then(data=>{
        console.log(data);
        alert("Form Submitted");
    })
    .catch(err=>console.error(err)); //promise based
});

//populating input data
function getInputData(){
    let dataToPost = new FormData(); //formdata API

    //fill name attributes to corresponding values
    dataToPost.append("entry.294341084", document.querySelector("#inp1").value);

    return dataToPost;
}

가져오기post 요청의 응답이 만족스럽지는 않지만 작동하므로 문제가 되지 않습니다. ;피


HTML 양식에 비해 이 접근 방식을 사용하는 이점은 사용자가 Google 양식의 승인 페이지로 리디렉션되지 않는다는 점입니다.

여기에서 작업 예제를 확인하십시오.

고려 사항

Google 양식의 사용자 정의 프런트 엔드는 데이터 수집에만 사용할 수 있습니다.

Google 양식 설정에서 '로그인 필요'가 꺼져 있는 경우에만 작동합니다.

라디오 버튼, 확인란 등의 경우 정확한 값만 허용되며 철자가 약간만 틀리더라도 해당 특정 질문에 대한 답변이 삭제됩니다.

까다롭고 시간이 많이 걸리는 작업

제대로 처리되지 않은 경우 사용자가 부분적으로 응답하므로 프런트엔드 디자인도 사용자 응답을 검증해야 합니다.

Google 양식의 섹션은 단일post 요청으로 제출할 수 있습니다.

이 방법을 사용하여 이미지를 게시할 수도 있습니다.

Google 양식을 위한 맞춤 프런트엔드를 만드는 것은 시간이 많이 걸리는 작업일 수 있지만 결과는 그만한 가치가 있습니다.