Differences

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

--- googleforms [2015/02/26 15:14] – 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로 정한다.
 . 예제 페이지
@@ Line 119: / 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>