kyle'sBlog: 使用自訂頁面整合Google表單

參考文件：
- https://blog.toomore.net/2008/07/google_15.html
- https://www.arno.tw/google-doc-advanced/
在Google文件建立表單 (表單範例)
- https://docs.google.com/forms/d/1sOkOsk6_mHcT_aT1CQ78We9KfK0iwE_a852pWyKfGCw/edit

設定好表單之後，檢視其原始碼，將其原始碼複製出來改寫。
改寫內容如下：


	<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>測試google表單</title>

	</head>

	<body>
	<form method='POST' action='https://docs.google.com/forms/d/1sOkOsk6_mHcT_aT1CQ78We9KfK0iwE_a852pWyKfGCw/formResponse'>
	<a href='https://docs.google.com/forms/d/1sOkOsk6_mHcT_aT1CQ78We9KfK0iwE_a852pWyKfGCw/formResponse'>重新填寫</a>
	<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_9265193">
	<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.9265193" value="" class="ss-q-short" id="entry_9265193" dir="auto" aria-label="姓名請輸入姓名 " aria-required="true" required="" title="" />
	<div class="error-message" id="746091792_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-radio">
	<div class="ss-form-entry">
	<label class="ss-q-item-label" for="entry_951819516">
	<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>

	<ul class="ss-choices" role="radiogroup" aria-label="性別 ">
	<li class="ss-choice-item">
	<label>
	<span class="ss-choice-item-control goog-inline-block"><input type="radio" name="entry.186054663" value="男" id="group_186054663_1" role="radio" class="ss-q-radio" aria-label="男" required="" aria-required="true" /></span>
	<span class="ss-choice-label">男</span>
	</label>
	</li>
	<li class="ss-choice-item">
	<label>
	<span class="ss-choice-item-control goog-inline-block"><input type="radio" name="entry.186054663" value="女" id="group_186054663_2" role="radio" class="ss-q-radio" aria-label="女" required="" aria-required="true" /></span>
	<span class="ss-choice-label">女</span>
	</label>
	</li>
	</ul>
	<div class="error-message" id="951819516_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_948976255">
	<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.948976255" value="" class="ss-q-short" id="entry_948976255" dir="auto" aria-label="電話請輸入連絡電話 " aria-required="true" required="" title="" />
	<div class="error-message" id="237314664_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_760882479">
	<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.760882479" value="" class="ss-q-short" id="entry_760882479" dir="auto" aria-label="信箱請輸入電子郵件 " aria-required="true" required="" title="" />
	<div class="error-message" id="1172677821_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_687106558">
	<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.687106558" value="" class="ss-q-short" id="entry_687106558" dir="auto" aria-label="信件主旨請輸入信件主旨 " aria-required="true" required="" title="" />
	<div class="error-message" id="1107808288_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-paragraph-text">
	<div class="ss-form-entry">
	<label class="ss-q-item-label" for="entry_902898693">
	<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>
	<textarea name="entry.902898693" rows="8" cols="0" class="ss-q-long" id="entry_902898693" dir="auto" aria-label="信件內容請輸入信件內容 " aria-required="true" required=""></textarea>
	<div class="error-message" id="1504906042_errorMessage"></div>
	<div class="required-message">這是必填問題</div>
	</div>
	</div>
	</div>
	<input type="submit" name="submit" value="提交" id="ss-submit" class="jfk-button jfk-button-action " />
	</form>
	</body>
	</html>

view raw googleForm hosted with ❤ by GitHub

填完發送之後，一樣可以成功收到內容。

使用者可以自訂通知規則，讓使用者填完表單之後，通知管理者。

所以我們就可以擺脫掉醜醜的google表單，自訂喜歡的樣式。

因為資料是POST給google表單，所以會導到已收到回覆表單的確認頁面。

所以容易讓使用者離開原來的網站，所以這邊可以做一些改寫。
透過jquery post後導頁到自訂確認畫面。


	<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>測試google表單</title>
	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
	<script type="text/javascript">

	$(function () {
	var $form = $('form');
	$form.submit(function () {
	//event.preventDefault();
	$.post($(this).attr('action'), $(this).serialize(), function (response) {
	alert('success');
	}, 'json').always(function () {
	location.href = 'thankyou.html';
	});

	return false;
	})
	});
	</script>
	</head>

	<body>
	<form method='POST' action='https://docs.google.com/forms/d/1sOkOsk6_mHcT_aT1CQ78We9KfK0iwE_a852pWyKfGCw/formResponse'>
	<a href='https://docs.google.com/forms/d/1sOkOsk6_mHcT_aT1CQ78We9KfK0iwE_a852pWyKfGCw/formResponse'>重新填寫</a>
	<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_9265193">
	<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.9265193" value="" class="ss-q-short" id="entry_9265193" dir="auto" aria-label="姓名請輸入姓名 " aria-required="true" required="" title="" />
	<div class="error-message" id="746091792_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-radio">
	<div class="ss-form-entry">
	<label class="ss-q-item-label" for="entry_951819516">
	<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>

	<ul class="ss-choices" role="radiogroup" aria-label="性別 ">
	<li class="ss-choice-item">
	<label>
	<span class="ss-choice-item-control goog-inline-block"><input type="radio" name="entry.186054663" value="男" id="group_186054663_1" role="radio" class="ss-q-radio" aria-label="男" required="" aria-required="true" /></span>
	<span class="ss-choice-label">男</span>
	</label>
	</li>
	<li class="ss-choice-item">
	<label>
	<span class="ss-choice-item-control goog-inline-block"><input type="radio" name="entry.186054663" value="女" id="group_186054663_2" role="radio" class="ss-q-radio" aria-label="女" required="" aria-required="true" /></span>
	<span class="ss-choice-label">女</span>
	</label>
	</li>
	</ul>
	<div class="error-message" id="951819516_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_948976255">
	<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.948976255" value="" class="ss-q-short" id="entry_948976255" dir="auto" aria-label="電話請輸入連絡電話 " aria-required="true" required="" title="" />
	<div class="error-message" id="237314664_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_760882479">
	<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.760882479" value="" class="ss-q-short" id="entry_760882479" dir="auto" aria-label="信箱請輸入電子郵件 " aria-required="true" required="" title="" />
	<div class="error-message" id="1172677821_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_687106558">
	<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.687106558" value="" class="ss-q-short" id="entry_687106558" dir="auto" aria-label="信件主旨請輸入信件主旨 " aria-required="true" required="" title="" />
	<div class="error-message" id="1107808288_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-paragraph-text">
	<div class="ss-form-entry">
	<label class="ss-q-item-label" for="entry_902898693">
	<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>
	<textarea name="entry.902898693" rows="8" cols="0" class="ss-q-long" id="entry_902898693" dir="auto" aria-label="信件內容請輸入信件內容 " aria-required="true" required=""></textarea>
	<div class="error-message" id="1504906042_errorMessage"></div>
	<div class="required-message">這是必填問題</div>
	</div>
	</div>
	</div>
	<input type="submit" name="submit" value="提交" id="ss-submit" class="jfk-button jfk-button-action " />
	</form>
	</body>
	</html>

view raw googleFormv2 hosted with ❤ by GitHub

延伸閱讀：
- Google表單自動回信使用FormEmailer

kyle'sBlog

2014年12月30日星期二

使用自訂頁面整合Google表單

沒有留言:

張貼留言

2014年12月30日 星期二

使用自訂頁面整合Google表單

沒有留言:

張貼留言

2014年12月30日星期二