Make Contact Form at Static Page like GitHub Page using the Google Form

구글폼을 활용하여 ContactForm을 Static Page에서 사용하기

Contact Form은 개인 홈페이지, 혹은 소규모 기업 홈페이지에서 필수적이다. 하지만 종래의 Contact Form은 php 기반으로 짜여져 있기 때문에, Active page에서만 사용 가능하며, static page에서는 사용이 어렵다. 이를 위한 Formspree 등의 다양한 대안을 제안하는 서비스/솔루션들이 존재한다. 하지만 이들도 먹고 살아야 하는 만큼, 이러한 서비스는 월 회수 제한 등으로 무료이용에는 한계가 존재하며, 유료 서비스를 이용해야 제대로 사용할 수 있다. 하지만, Google Form을 잘 활용하면 Google Drive에 결과가 저장되도록 하여 Static Page에서도 활용 가능하다. 이 내용은 영어로 된 외국 블로그에는 꽤 존재하지만, 한글로 잘 정리된 글은 없다. 또한 JS(JavaScript) 및 Html에 대한 이해도가 약간 필요하지만, 나처럼 하나도 모르는 분들을 위해 관련 지식이 하나도 없는 분들도 그저 따라할 수 있도록, 이번에 이 기능을 구현하며 공부한 내용을 공유하고자 한다.

Static Page

정적 페이지(Static Page)는 동적 페이지(Dynamic Page)의 반대를 뜻한다. 미리 저장된 형태만을 출력 가능하며(단점), 대신 훨씬 빠르다는 장점이 있다. 대표적으로 GitHub Page가 무료로 호스팅 가능한 Static Page에 해당하며 Twitter, Netflix 등 유저의 데이터 기반으로 작업이 이루어지는 서비스들이 대부분 이러한 형태를 띄고 있다. 동적 페이지를 동작시키기 위해서는 자체적입 웹 어플리케이션 서버(WAS)가 필요하기 때문에, 대부분의 개인 홈페이지들은 정적 페이지로 구성되어 있다.

ConTactForm

Contact Form은 위에서 이미 말한대로 대가 홈페이지의 주인(기업/개인 등)과 소통하기 위한 가장 기본적인 창구이다. 단순히 내 메일을 남겨놓을 수도 있고, Google Form의 링크만 공유할 수도 있다. 하지만, 그 연락 방법이 두 세단계를 거치게 되면, 사용자는 귀찮아지게 되기 때문에 그 간결함 및 접근성이 핵심이다. 뿐만 아니라, 멋진 ContactForm은 그 자체로 멋스럽기 때문에 끌린다. 필자도 청첩장을 만드는 도중, RSVP 기능을 넣고싶어서 수소문 하던 도중 이 내용을 공부하게 되었다. 멋스러운 Contact Form 그 이름만 들어도 설레지 않는가!?

Google Form

구글 설문지(Google Form)은 구글에서 제공하는 설문 기능이다. 그 자체로도 충분히 유용하며, 짧은 링크로 공유 가능하며, 사진을 넣거나, 질문의 페이지를 나누고, 이미지를 삽입하는 등 다양한 customizing이 가능하며, 구글 드라이브의 xlsx, csv로 자료 수집이 가능하기 때문에, WAS가 없어도 동적 페이지의 Contact Form과 거의 동일한 기능을 사용할 수 있다. 또한 Google Form은 그 작동방식을 간단하게 url + 인자 형식으로 구글 서버에 전달하기 때문에 우리가 사용하고자 하는 Static Page에서 POST방식으로 url을 전달하기만 하면 사용할 수 있기 때문에 이를 활용하여 구현하는 방법을 공유하고자 한다.

Implementation

1. Make Google Form

먼저 구글 설문지를 만든다. 질문의 답변을 형태를 고를 때에는 단답형, 장문형, 객관식, 체크박스, 드롭다운의 다섯 가지를 테스트해봤고 전부 성공했다. url에 넘길 때에는 답안의 유형과 상관없이 객관식 등의 미리 정해진 답변을 고르는 경우 url에서 넘긴 답변이 답변항목에 존재하기만 하면 동작하고, 존재하지 않는 경우 '질문이 바뀌었으므로 답변을 수정해주세요'등 다시 답변을 할 수 있도록 re-direction하기 때문에, 그 값만 제대로 넘겨주면 작동하고, 체크박스처럼 여러 값을 넘겨줄 수 있는 경우 해당 질문에 답을 여러번 하면 되도록 구현되어있다. 따라서 내가 필요한 내용에 맞춰서 구글 설문지를 작성한 뒤 아래의 그림처럼 미리 채워진 링크(pre-filled ...)로 공유하기를 누른다.

다음으로 아래 그림처럼 예시 답안을 체크하고, 링크복사하기를 누르면 좌측 하단에 팝업 메시지가 나타나며 그 메시지 끝에 다시 링크 복사를 누르면 된다.

url 이해하기

복사한 url을 살펴보면 다음과 같이 <Form Address>와 <Answer Elements>로 이루어져있다. html에서 흔히 API에 인자를 전달하는 방식처럼 Answer Elements에도 여러 답변들이 ?로 순차적으로 이어져있으며, entry.<Que addr>=<Ans Value>의 형태로 질문의 주소와 답변으로 이루어져있다. 이를 쪼개서 우리가 원하는 형태로 html에 넣은 뒤, Submit을 누를 때 Post 방식으로 API에 전달하면 된다. 이 때, API에 전달할 때는 링크공유할 때 viewform과는 달리 formResponce로 바꿔서 전달하면 된다.

https://docs.google.com/forms/< Form Address >/viewform?< Answer Elements >

예시 url

https://docs.google.com/forms/d/e/1FAIpQLSdHu04vrd__--k9uCwtlJ81dUTdBnoDFqdDij_61Tt-LWQlfA/viewform?usp=pp_url&entry.1023798851=Test&entry.152813615=Test&entry.51146864=1&entry.1080994224=A&entry.1080994224=B&entry.1080994224=C&entry.49275512=b

HTML 만들기

HTML은 다양한 본인의 취향에 맞게 다양한 Template에 존재하는 형태로 가공하면 된다. 핵심이 되는 값을 넘겨주는 형식은 아래의 예시와 같이 만들면 된다. 특히, 객관식/체크박스는 <fieldset>...</fieldset>으로 묶어주면 된다. 드롭다운의 경우, <select><option>을 이용하면 된다. 더 자세한 사용법은 W3school을 참고하면 되며, 이 글의 뒤에 예시를 첨부하겠다.

<input
            type="text" # ex: email, radio, checkbox 가능
            name="entry.<Que addr>"
            id="form-Name"
            placeholder="<Ans Value>"
        />

POST 보내기

POST를 보내는 방법은 여러가지가 존재하지만, 가장 쉬운 방법은 아래의 예시와 같은 Script를 HTML 문서 뒤에 추가하는 것이다. 여기서, 첫 줄의 $("#formId").on("submit", function (e) {에서 #formId및 submit이 중요한데, #formId은 Form에 해당하는 CSS id에 해당하며, "submit"이 Submit을 보내는 버튼의 type에 해당한다. 따라서 그 부분만 다 맞춰서 수정하면 된다.

예시

<script type="text/javascript">
    var submitted = false;
</script>
<script type="text/javascript">
    // The "submit" means the type of button 'Send/Submit' from line ~ 196 in this example
    $("#formId").on("submit", function (e) {
        $("#formId *").fadeOut(2000);
        $("#formId").prepend(
            "Your submission has been processed! ;)<br><br> If the information is not correct,<br>Please re-submit."
            +"<br>If you want to check"
            +"If you want to check the result, <br>check <a href='https://docs.google.com/spreadsheets/d/1L8DeQHp6brvxFeb3Y28ydwPoowjH-hxsP1OKpcuWyXM/edit?usp=sharing'>Link</a>"
        );
    });
</script>

Exhibition re-direction

구글폼을 완료하면, 자동적으로 구글폼 완료 페이지로 re-direction 된다. 이를 막기 위해 간단한 트릭(?)을 통해 re-direction을 막고 간단한 안내문구를 작성하면 깔끔한 Contact Form을 완성할 수 있다. 하지만, 이 경우, 만약 내가 만든 페이지에 오류가 존재하는 경우 설문 답변이 제대로 전달이 되지 않을 수 있다. 따라서 유의해서 사용하도록 하자.

<iframe name="hidden_iframe" id="hidden_iframe" style="display: none" onload="if(submitted) {}"></iframe>

예제 실행해보기

개인 홈페이지에 예시를 만들어서 올려놓았다. 이 링크에 가서 테스트 해보자. 예시에 사용된 총 코드의 핵심 부분들은 아래에 따로 추가해 놓았다.

Total Code

더보기

<form
    id="formId"
    action="https://docs.google.com/forms/d/e/1FAIpQLSdHu04vrd__--k9uCwtlJ81dUTdBnoDFqdDij_61Tt-LWQlfA/formResponse"
    target="hidden_iframe"
    onsubmit="submitted=true;"
>
<!-- All Item  set equally the 'name' of input and'address' of question-->
    <div class="form-floating">
        <input
            type="text"
            name="entry.1023798851"
            id="form-Name"
            placeholder="Your Name*"
        />
        <label for="name">Name*</label>
    </div>

    <div class="form-floating">
        <input
            type="email"
            name="entry.152813615"
            id="form-mail"
            placeholder="E-mail*"
        />
        <label for="email">E-mail*</label>
    </div>

    <label>Q1</label>
    <div class="form-check-wrapper">
        <!-- Also, set equally the 'value' of input and'answer' of question-->
        <fieldset>
            <legend>Choose your Answer for Q1:</legend>
            <div>
                <input
                    type="radio"
                    id="form-Q1-1"
                    name="entry.51146864"
                    value="1"
                    checked
                />
                <label for="form-Q1-1">1</label>
            </div>
            <div>
                <input
                    type="radio"
                    id="form-Q1-2"
                    name="entry.51146864"
                    value="2"
                />
                <label for="form-Q1-2">2</label>
            </div>
            <div>
                <input
                    type="radio"
                    id="form-Q1-3"
                    name="entry.51146864"
                    value="3"
                />
                <label for="form-Q1-3">3</label>
            </div>
            <div>
                <input
                    type="radio"
                    id="form-Q1-4"
                    name="entry.51146864"
                    value="4"
                />
                <label for="form-Q1-4">4</label>
            </div>
        </fieldset>
    </div>

    <label>Q2</label>
    <div class="form-check-wrapper">
        <fieldset>
            <legend>Choose (multiple) your Answer for Q2:</legend>

            <div>
                <input
                    type="checkbox"
                    id="form-Q2-A"
                    name="entry.1080994224"
                    value="A"
                    checked
                />
                <label for="form-Q2-A">A</label>
            </div>

            <div>
                <input
                    type="checkbox"
                    id="form-Q2-B"
                    name="entry.1080994224"
                    value="B"
                />
                <label for="form-Q2-B">B</label>
            </div>
            <div>
                <input
                    type="checkbox"
                    id="form-Q2-C"
                    name="entry.1080994224"
                    value="C"
                />
                <label for="form-Q2-C">C</label>
            </div>
        </fieldset>
    </div>

    <label>Q3</label>
    <div class="form-floating">
        <legend>Choose your Answer for Q3:</legend>
        <select name="entry.49275512" id="form-Q3">
            <option value="a">a</option>
            <option value="b">b</option>
            <option value="c">c</option>
        </select>
    </div>

    <!-- <label>Q4</label>
<div>
<textarea
id="entry.1209414153"
name="entry.1209414153"
placeholder="Message"
rows="2"
>
</textarea>
<label for="message">Send any other Options</label>
</div> -->
    <button type="submit" value="Submit">Submit</button>
</form>
<!-- This iframe need to restricted pop-up google-form-->
<iframe name="hidden_iframe" id="hidden_iframe" style="display: none" onload="if(submitted) {}"></iframe>




<script type="text/javascript">
    var submitted = false;
</script>
<script type="text/javascript">
    // The "submit" means the type of button 'Send/Submit' from line ~ 196 in this example
    $("#formId").on("submit", function (e) {
        $("#formId *").fadeOut(2000);
        $("#formId").prepend(
            "Your submission has been processed! ;)<br><br> If the information is not correct,<br>Please re-submit."
            +"<br>If you want to check"
            +"If you want to check the result, <br>check <a href='https://docs.google.com/spreadsheets/d/1L8DeQHp6brvxFeb3Y28ydwPoowjH-hxsP1OKpcuWyXM/edit?usp=sharing'>Link</a>"
        );
    });
</script>