Differences

This shows you the differences between two versions of the page.

--- googleforms [2015/02/26 15:11] – donghee
+++ googleforms [2018/07/18 14:10] (current) – external edit 127.0.0.1
@@ Line 1: / Line 1: @@
-구글폼 테마 수정하기
+참고:
+  * How to style Google Forms http://morning.am/tutorials/how-to-style-google-forms/
+  * 구글폼 페이지 생성기: http://sneakysheep.com/google-docs-form-tool-version-2/
+====== 구글폼 테마 수정하기 ======
 . 구글폼 링크 https://docs.google.com/forms/d/1efIOtSpCeU7Mzr85_Jg_-soAKh-zQXFFJBIWayC_DZ8/viewform
 . 구글폼 소스에서 <form> </form> 을 복사한다.
 . 완료 페이지 주소 수정하기.
@@ Line 8: / Line 16: @@
 <form action="YOUR-EMBEDDED-GOOGLE-SPREADSHEET-LINK" method="POST">
 </code>
 를
 <code>
 <script type="text/javascript">var submitted=false;</script>
@@ Line 18: / Line 25: @@
 <form action="YOUR-EMBEDDED-GOOGLE-SPREADSHEET-LINK" method="post" target="hidden_iframe" onsubmit="submitted=true;">
 </code>
-로 바꾸기
+로 바꾸기. 구글폼의 기본 타켓을 숨겨진 iframe으로 보내고. 끝날때 보이고 싶은 링크는 http://YOUR-THANK-YOU-PAGE-URL로 정한다.
 . 예제 페이지
+<code>
+<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>
+</code>
+----
 <html>
 <script type="text/javascript">var submitted=false;</script>
@@ Line 68: / Line 126: @@
 </tr></tbody></table></div></ol></form>
 </html>
+----
+. jquery validate
+form을 그냥 복사하면 필수 항목의 처리가 안된다. 그래서 jquery.validate.js를 이용하여 필수 항목을 처리를 하자.
+http://morning.am/tutorials/google-forms-and-jquery-validation/
+<code>
+<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>
+</code>
+. form에 commentForm id를 추가. 왜?
+<code>
+<form action="http://spreadsheets.google.com/viewform?formkey=cHFiaFR6N1BJSHVuNHQzRVZBbDd0Wmc6MA.."
+method="post" target="hidden_iframe" id="commentForm" onsubmit="submitted=true;">
+</code>
+. input 필드에 required class를 추가
+<code>
+<input type="text" name="entry.1.single" value="" class="required" id="entry_1">
+</code>
+. required input 필드에 title로 validate 에러 메시지 적기
+<code>
+<input type="text" name="entry.1.single" value="" class="required" title="Please tell me how how blue the sky is dammit!"  id="entry_1">
+</code>
+. error 메시지 css 추가
+<code>
+label.error {
+display: list-item;
+color: #ff0600;
+font-size: 12px;
+list-style-position: inside;
+padding: 5px 0 0;}
+</code>
+. Email validate 체크
+<code>
+<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'}}}"/>
+</code>