구글폼 테마 수정하기

1. 구글폼 링크 https://docs.google.com/forms/d/1efIOtSpCeU7Mzr85_Jg_-soAKh-zQXFFJBIWayC_DZ8/viewform

2. 구글폼 소스에서 <form> </form> 을 복사한다.

3. 완료 페이지 주소 수정하기.

<form action="YOUR-EMBEDDED-GOOGLE-SPREADSHEET-LINK" method="POST">

를

<script type="text/javascript">var submitted=false;</script>

<iframe name="hidden_iframe" id="hidden_iframe"
style="display:none;" onload="if(submitted)
{window.location='http://YOUR-THANK-YOU-PAGE-URL';}"></iframe>
<form action="YOUR-EMBEDDED-GOOGLE-SPREADSHEET-LINK" method="post" target="hidden_iframe" onsubmit="submitted=true;">

로 바꾸기. 구글폼의 기본 타켓을 숨겨진 iframe으로 보내고. 끝날때 보이고 싶은 링크는 http://YOUR-THANK-YOU-PAGE-URL로 정한다.

4. 예제 페이지

<script type="text/javascript">var submitted=false;</script>

<iframe name="hidden_iframe" id="hidden_iframe"
style="display:none;" onload="if(submitted)
{window.location='http://YOUR-THANK-YOU-PAGE-URL';}"></iframe>

<form action="https://docs.google.com/forms/d/1efIOtSpCeU7Mzr85_Jg_-soAKh-zQXFFJBIWayC_DZ8/formResponse" method="post" target="hidden_iframe" onsubmit="submitted=true;"><ol role="list" class="ss-question-list" style="padding-left: 0">
<div class="ss-form-question errorbox-good" role="listitem">
<div dir="ltr" class="ss-item ss-item-required ss-text"><div class="ss-form-entry">
<label class="ss-q-item-label" for="entry_1806683391"><div class="ss-q-title">성함
<label for="itemView.getDomIdToLabel()" aria-label="(필수 입력란)"></label>
<span class="ss-required-asterisk" aria-hidden="true">*</span></div>
<div class="ss-q-help ss-secondary-text" dir="ltr">성함을 적어주세요</div></label>
<input type="text" name="entry.1806683391" value="" class="ss-q-short" id="entry_1806683391" dir="auto" aria-label="성함 성함을 적어주세요 " aria-required="true" required="" title="">
<div class="error-message" id="1470846822_errorMessage"></div>
<div class="required-message">필수 질문입니다.</div>
</div></div></div> <div class="ss-form-question errorbox-good" role="listitem">
<div dir="ltr" class="ss-item ss-item-required ss-text"><div class="ss-form-entry">
<label class="ss-q-item-label" for="entry_2022845971"><div class="ss-q-title">연락처(휴대폰)
<label for="itemView.getDomIdToLabel()" aria-label="(필수 입력란)"></label>
<span class="ss-required-asterisk" aria-hidden="true">*</span></div>
<div class="ss-q-help ss-secondary-text" dir="ltr">연락받으실 연락처를 남겨주세요.</div></label>
<input type="text" name="entry.2022845971" value="" class="ss-q-short" id="entry_2022845971" dir="auto" aria-label="연락처(휴대폰) 연락받으실 연락처를 남겨주세요. " aria-required="true" required="" title="">
<div class="error-message" id="2048373558_errorMessage"></div>
<div class="required-message">필수 질문입니다.</div>
</div></div></div> <div class="ss-form-question errorbox-good" role="listitem">
<div dir="ltr" class="ss-item  ss-paragraph-text"><div class="ss-form-entry">
<label class="ss-q-item-label" for="entry_1510470659"><div class="ss-q-title">문의사항
</div>
<div class="ss-q-help ss-secondary-text" dir="ltr">궁금하신 내용을 적어주세요.</div></label>
<textarea name="entry.1510470659" rows="8" cols="0" class="ss-q-long" id="entry_1510470659" dir="auto" aria-label="문의사항 궁금하신 내용을 적어주세요. "></textarea>
<div class="error-message" id="2124243384_errorMessage"></div>
<div class="required-message">필수 질문입니다.</div>
</div></div></div>
<input type="hidden" name="draftResponse" value="[,,&quot;-1868923425708929140&quot;]
">
<input type="hidden" name="pageHistory" value="0">


<input type="hidden" name="fbzx" value="-1868923425708929140">

<div class="ss-item ss-navigate"><table id="navigation-table"><tbody><tr><td class="ss-form-entry goog-inline-block" id="navigation-buttons" dir="ltr">
<input type="submit" name="submit" value="&#48372;&#45236;&#44592;" id="ss-submit" class="jfk-button jfk-button-action ">
<div class="ss-password-warning ss-secondary-text">Google 설문지를 통해 비밀번호를 제출하지 마세요.</div></td>
</tr></tbody></table></div></ol></form>

<html> <script type=“text/javascript”>var submitted=false;</script>

<form action=“https://docs.google.com/forms/d/1efIOtSpCeU7Mzr85_Jg_-soAKh-zQXFFJBIWayC_DZ8/formResponse” method=“post” target=“hidden_iframe” onsubmit=“submitted=true;”><ol role=“list” class=“ss-question-list” style=“padding-left: 0”> <div class=“ss-form-question errorbox-good” role=“listitem”> <div dir=“ltr” class=“ss-item ss-item-required ss-text”><div class=“ss-form-entry”> <label class=“ss-q-item-label” for=“entry_1806683391”><div class=“ss-q-title”>성함 <label for=“itemView.getDomIdToLabel()” aria-label=“(필수 입력란)”></label> <span class=“ss-required-asterisk” aria-hidden=“true”>*</span></div> <div class=“ss-q-help ss-secondary-text” dir=“ltr”>성함을 적어주세요</div></label> <input type=“text” name=“entry.1806683391” value=“” class=“ss-q-short” id=“entry_1806683391” dir=“auto” aria-label=“성함 성함을 적어주세요 ” aria-required=“true” required=“” title=“”> <div class=“error-message” id=“1470846822_errorMessage”></div> <div class=“required-message”>필수 질문입니다.</div> </div></div></div> <div class=“ss-form-question errorbox-good” role=“listitem”> <div dir=“ltr” class=“ss-item ss-item-required ss-text”><div class=“ss-form-entry”> <label class=“ss-q-item-label” for=“entry_2022845971”><div class=“ss-q-title”>연락처(휴대폰) <label for=“itemView.getDomIdToLabel()” aria-label=“(필수 입력란)”></label> <span class=“ss-required-asterisk” aria-hidden=“true”>*</span></div> <div class=“ss-q-help ss-secondary-text” dir=“ltr”>연락받으실 연락처를 남겨주세요.</div></label> <input type=“text” name=“entry.2022845971” value=“” class=“ss-q-short” id=“entry_2022845971” dir=“auto” aria-label=“연락처(휴대폰) 연락받으실 연락처를 남겨주세요. ” aria-required=“true” required=“” title=“”> <div class=“error-message” id=“2048373558_errorMessage”></div> <div class=“required-message”>필수 질문입니다.</div> </div></div></div> <div class=“ss-form-question errorbox-good” role=“listitem”> <div dir=“ltr” class=“ss-item ss-paragraph-text”><div class=“ss-form-entry”> <label class=“ss-q-item-label” for=“entry_1510470659”><div class=“ss-q-title”>문의사항 </div> <div class=“ss-q-help ss-secondary-text” dir=“ltr”>궁금하신 내용을 적어주세요.</div></label> <textarea name=“entry.1510470659” rows=“8” cols=“0” class=“ss-q-long” id=“entry_1510470659” dir=“auto” aria-label=“문의사항 궁금하신 내용을 적어주세요. ”></textarea> <div class=“error-message” id=“2124243384_errorMessage”></div> <div class=“required-message”>필수 질문입니다.</div> </div></div></div> <input type=“hidden” name=“draftResponse” value=“[,,"-1868923425708929140"] ”> <input type=“hidden” name=“pageHistory” value=“0”>

<div class=“ss-item ss-navigate”><table id=“navigation-table”><tbody><tr><td class=“ss-form-entry goog-inline-block” id=“navigation-buttons” dir=“ltr”> <input type=“submit” name=“submit” value=“보내기” id=“ss-submit” class=“jfk-button jfk-button-action ”> <div class=“ss-password-warning ss-secondary-text”>Google 설문지를 통해 비밀번호를 제출하지 마세요.</div></td> </tr></tbody></table></div></ol></form> </html>

5. jquery validate

form을 그냥 복사하면 필수 항목의 처리가 안된다. 그래서 jquery.validate.js를 이용하여 필수 항목을 처리를 하자.

http://morning.am/tutorials/google-forms-and-jquery-validation/

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
	$("#commentForm").validate({meta: "validate"});
});
</script>

6. form에 commentForm id를 추가. 왜?

<form action="http://spreadsheets.google.com/viewform?formkey=cHFiaFR6N1BJSHVuNHQzRVZBbDd0Wmc6MA.."
method="post" target="hidden_iframe" id="commentForm" onsubmit="submitted=true;">

7. input 필드에 required class를 추가

<input type="text" name="entry.1.single" value="" class="required" id="entry_1">

8. required input 필드에 title로 validate 에러 메시지 적기

<input type="text" name="entry.1.single" value="" class="required" title="Please tell me how how blue the sky is dammit!"  id="entry_1">

9. error 메시지 css 추가

label.error {
display: list-item;
color: #ff0600;
font-size: 12px;
list-style-position: inside;
padding: 5px 0 0;}

10. Email validate 체크

<input type="text" name="entry.3.single" value="" id="required" class="{validate:{required:true, email:true, messages:{required:'Please enter your email address', email:'Please enter a valid email address'}}}"/>