美化 Google Docs 表單2

由於用Google文件產生的form有點陽春
很想改成自己想要的樣子，所以找了一下，發現這個方法
美化 Google Docs 表單

先到這個網頁: Google Docs Form Tool
在 URL to live form 填入form的網址，例如:
http://spreadsheets.google.com/embeddedform?formkey=dE9ZVUx1OGJiS1RnUjMzY3ludU9pZEE6MQ
然後在 Redirect to 填入form填好按確定後，要導向哪個網址
就隨便做一個寫著"報名成功"的網頁，例如 http://knuckles.twbbs.org/temp/thank.htm

按下Submit後就會產生一個html檔，複製下來後
就可以用Dreamweaver之類的網頁編輯器改成自己想要的樣子了

可以將原本裡面的css設定全砍掉，改成自己的css設定
改好後再自己找個空間上傳，結果像這樣: http://knuckles.twbbs.org/temp/test_register.htm
用這個送出的資料一樣會記錄在Google文件的Excel檔裡面

也可以利用iframe嵌入:

測試報名系統

利用Google文件來做一個報名系統

ID: DISP的帳號

姓名: *

備註

Powered by Google Docs Report Abuse - Terms of Service - Additional Terms

 

教學網址：http://disp.cc/b/Knuckles#!3-ayh

Read more...

美化 Google Docs 表單

自從在「香腸炒魷魚」那兒看見「如何用快速建立網站聯絡表單」這篇文章，無法顯示網頁馬上就想到有朝一日小米明信片完成〈心虛〉之後，使用這個功能就可以讓大家很快速地完成小米明信片的線上申請動作，你說 … 是不是光用想的就覺得很酷呢？

無法顯示網頁就是因為覺得很酷，所以當下就跑到 Google Docs 弄了一個表單並把表單給黏到文章中測試。誰曉得預覽文章的時候才驚覺，對吼 … 因為 Google 是採用是採用 框架讓使用者將表單崁入文章，所以使用者根本沒辦法使用自訂的 CSS 標籤來美化表單。

無法顯示網頁可是非常堅持「美觀」這兩個字，這該怎麼辦呢？呼 … 幸好這個世界上還有許多像我一樣有著這種堅持的龜毛人，如今無法顯示網頁才得以透過某些方式讓 Google Docs 也能夠使用自訂的 CSS 標籤來美化表單，實在是太開心了，喔耶！

想了解怎麼讓 Google Docs 也能夠使用自訂的 CSS 標籤來美化表單嗎？
首先，請把你的 Google Docs 表單崁入語法複製下來：

1	<iframe src="http://spreadsheets.google.com/embeddedform?key=xxxxxxx-xxxxxxx" width="310" height="501" frameborder="0" marginheight="0" marginwidth="0">Loading...</< font>iframe>

將 http://spreadsheets.google.com/embeddedform?key=xxxxxxx-xxxxxxx 這行另外複製並貼到 Google Docs Form Tool 的 URL to live form 欄位，接著在 Redirect to 欄位填上表單送出後欲自動導入的頁面名稱後，點選「Submit」按鈕。系統會根據你提交的表單自動產生一個標準的 html 頁面原始碼，將這些原始碼貼到你要用來顯示可自訂 CSS 標籤的表單文章中，如此即可隨心所欲地使用 CSS 標籤來美化 Google Docs 表單囉！

以下就是套用無法顯示網頁本身 CSS 標籤的 Google Docs 表單，看起來很不賴吧！當然，如果你想要比較一下 Google Docs 表單化妝前的鬼樣子請到「這裡」瞧瞧。
姓名

電子郵件

性別 男性 女性

Powered by Google Docs
Terms of Service | Additional Terms

-----------------------

Google 表單好像沒有上傳文件或圖片的功能

請問一下，使用之後提交的表單內容
中文字都會出現亂碼耶？？？
直接用google的表單是沒問題，但美化過後放進網頁中輸入的資料就會> <

我找到解決的方式，是編碼的問題，google的網站編碼是UTF-8，但我的編碼是Big5，把頁面編碼預設調為UTF-8就解決了。提供給有類似問題的人參考^^

 

教學網址：http://www.james-only.com/2008/10/30/474/

Read more...

AdMob 的廣告收入分析參考

http://ipdevelop.blogspot.tw/2010/10/admob.html

Read more...

利用Google文件做的報名系統 + FormEmailer 自動回信(手動安裝)

用Google文件的表單做的報名系統
如果想要讓報名的人填完報名表後，可以收到一封確認信的話
可以裝這個script外掛 ─ FormEmailer

可以先看一下網頁上的 Get Started 有影片教學
只要用「插入」/「指令碼」，尋找 form emailer 就可以直接安裝了

但實際測試卻發現找不到，原來影片旁邊有附註：
因為程式更新了，要等Google審核通過才會出現在他的指令碼庫
不想等的話可以手動安裝

先到 Updates 下載 FormEmailer3.62.js

在Google文件新增一個表單，裡面要有一個E-mail欄位

回到試算表，點「工具」/「指令碼編輯器」

先把自動加上去的 function myFunction(){ } 刪掉，然後貼上 FormEmailer3.4.js 的內容

按ctrl+s存檔，輸入專案名稱為「FormEmailer」

點「執行」/「onInstall」

會出現確認授權畫面，點「Authorize」

再點一次「執行」/「onInstall」

 

好了後可關閉指令碼編輯器

安裝好後回到試算表，上面的選單應該會出現一個「FormEmailer」，點一下裡面的「Install」

(如果點Install後說找不到的話，回到指令碼編輯器，點「執行」/「install」)

下面的頁籤會多一個「FormEmailer」，再點上面選單的「FormEmailer」/「Settings」

出現這畫面，可以編輯要寄出去的郵件內容

改成這樣，注意 To: 那欄要用表單中的E-mail欄位才會寄給填寫表單的人

可以使用右上角的 Answers placeholders 選擇表單的欄位後，再用 insert placeholder 插入內容

現在還不會自動寄信，可以用「FormEmailer」/「Process manually」輸入要寄給第幾列的使用者
或是輸入「2*」就會寄給第二列到最後一列的使用者

要讓他自動寄信的話，點「工具」/「指令碼編輯器」
然後點「觸發器」/「現有指令碼的觸發程序」

點「Add a new trigger」後，設為「timeDriven」-「Time-driven」-「Minutes timer」-「Every minute」

點儲存，關閉指令碼編輯器

稍等個一分鐘，直到看到 Running automatically 變成 Yes 就代表會自動寄信了

有寄信的該記錄前面會加上 Email sent

注意每個帳號每日可寄的上限為500封

如果想要使用者填完表單後，除了寄給填表的人外，再寄一封給自己的話
可以在「Settings」的「Advanced」頁

將Qtt Emails改成 2，關掉Settings再重新打開，就會出現兩個Email頁可以分別編輯兩封信了



FormEmailer沒提供自動回覆信可以附加檔案的功能，上傳到別的地方再貼連結比較好，

也沒有提供如果欄位不只一欄，是否可以挑出非空白或是只有數字的欄位 ，沒有提供這功能

FormEmailer 無法及時觸發，要每分鐘觸發一次

教學網址：http://wayne-fu.blogspot.com/2012/04/google-spreadsheet.html

Read more...

Google表單自動寄信給填表人

現在網路上教的Google Docs問卷，都只有填表格功能，難道沒有讓使用者填寫完資料後，寄一份資料到使用者信箱的功能嗎？因為我們有時候需要製作收據系統之類的…。

答案是有的！我們只要動幾根手指頭，依照下列步驟，就可以輕易開發出這個功能喔！請依照以下步驟一步一步跟著我做即可。

開發步驟
Step 1. 先開啟Google試算表。

Step 2. 假設我的表單只有兩個欄位：姓名與Mail。按上方工具列，選擇工具→表單→編輯表格，先建立表單內容，然後按下存檔。

Step 3. 回到Google表格編輯頁，這次請選擇工具→指令碼編輯器，出現程式碼視窗後，輸入下列程式碼，如圖 2 (標題與內容請自行修改)：

function sendMails(e) {
  // 獲取時間戳記
  var timestamp = e.values[0];
  // 得到第一個欄位的值，在這個範例中，我們可取得「姓名」。
 var name = e.values[1];
  // 得到第二個欄位的值，在這個範例中，我們可取得「EMail位址」。
 var mail = e.values[2];
 
  
  /*  設定寄件內容，Mail.App.sendEMail()這個函式，
      第一個參數為「EMail位址」，第二個參數為「標題」，第三個參數為「內容」。
      以這個範例而言，我設定標題為 "表單測試: 使用者名稱"，內容為"姓名:xxx submitted by Allen"
  */
 MailApp.sendEmail(mail, "表單測試："+name,
                   "姓名：" + name + " submitted by Allen.");
  
}

view raw Google表單自動寄信Script.js This Gist brought to you by GitHub.

Step 4. 接著在工具列上面，選擇”觸發器”→現有指令碼的觸發程序

Step 5. 由於現在都沒有加入任何觸發器，因此我們可加入一個新的。

(1) 請點選”Add a new trigger”連結

(2) 設定執行的函式為sendMails，Events 來源為From spreadsheet，動作為On form submit，然後儲存關閉。

這樣子就大功告成了！

實際測試

Step 1. 先進入即時表格，輸入內容，按下送出。

Step 2. 系統會提醒你回應訊息。
(回應訊息可在編輯表單時，右上方功能列的更多動作→編輯確認訊息 自訂)

Step 3. 請到您的信箱確認！沒錯，訊息已經收到囉。

註：沒想到這篇Post完沒多久，才發現已經有人寫好App可以安裝了。
         http://disp.cc/b/3-2oPJ
        沒關係！多學會一點，就多一項技能！

教學網址：http://allen501pc.blogspot.tw/2012/01/google.html

Read more...

申請免費wordpress.com作為免費MP3空間

最近發現wordpress.com被萬惡的牆解封了，可以通過http協議訪問（https協議仍被牆）。

wordpress.com是提供免費wordpress博客的一個網站，

該網站的域名a指向的ip地址有好多個，其性能不容小覷。

wordress.com貌似跟wordpress的開發者wordpress.org這個網站有直接關係，

但其實有沒有關係跟咱們這些P民沒有一毛錢關係的。

我總是在切入正文的時候喜歡扯些其他東西，不知道是不是思維比較渙散的原因呢？

首先，需要註冊wordpress.com。註冊地址：http://wordpress.com/，進入網站後點擊Get started here（如圖1）

圖1

 

接下來，就轉移到表單填寫頁面了（如圖2），注意密碼不能是純數字。

圖2

 

然後wordpress.com就會向你的電子郵箱發送激活郵件，點擊激活鏈接後，申請就完成了。

由於wordpress.com生在牆外，如何登錄它也是需要技術含量的，

合適的登錄方法是在http://en.wordpress.com/ 登錄，因為登錄的時候使用的是https協議，只有en.wordpress.com才沒有被牆。如圖3，圖4，圖5，圖6

                                                                圖3

圖4

圖5

圖6

進入媒體管理後，可以看到，wordpress.com提供了3GB免費的空間，只是這些空間只能存放jpg, jpeg, png, gif, pdf, doc, ppt, odt, pptx, docx, pps, ppsx, xls, xlsx等等擴展的文件。但是，我們仍然可以利用此空間上傳.mp3等媒體文件。方法就是修改媒體文件的擴展名，把擴展名改成.pdf。請選擇「瀏覽器上傳功能」，然後就可以正常上傳。

上傳後就可以得到文件的地址，地址的後綴是.pdf。該地址可直接利用本站的一個頁面生成可以用在QQ空間等等網站的音樂播放器。

如果想用到別的網站，試著在地址後面也就是.pdf添加上#.mp3用來逃避某些網站的URL檢查。

以上方法是個土辦法，而且有可能違反了wordpress.com的協議，請謹慎使用。

當然，最好不要讓太多人知道了，你懂的～

Read more...

JotForm – Dropbox Forms，讓別人直接上傳檔案到我們的Dropbox中

「JotForm – Dropbox Forms」是知名的線上表單服務JotForm所提供的Dropbox整合服務，可以讓其他人藉由JotForm所建立的表單來上傳檔案到你的Dropbox中，例如有些檔案太大了無法使用一般EMail來寄送(當然也有一些Mail服務是可以寄送大檔的)，此時便可以利用這個方式，來替Dropbox開個後門，讓朋友或第三者上傳檔案。

網址：JotForm – Dropbox Forms
● 申請Dropbox 2G免費空間

【使用教學】

請先點擊「Create a Dropbox Form」

接著點擊「Login to Dropbox」來登入Dropbox

此時會彈跳出登入的視窗，若沒有彈跳出來，那麼請注意一下是不是被瀏覽器給擋掉了

請點擊「Allow」來允許JotForm的存取權限

之後便會跳回JotForm的建立表單的步驟視窗中，點擊「Next」繼續

此時我們便會得到上傳表單的網址以及內嵌到網站中的表單語法，各位可以視自己的需求來取用，而中間處有一個「Previw Sample Form」的按鈕，點擊此按鈕可以預覽JotForm給幫我們建立的表單樣式，這樣式事後是可以調整的，但若覺得預設的表單已經符合需求了，那就不需要再更改，沒問題的話，Copy完網址或語法後按「Next」繼續

點擊了「Previw Sample Form」後所看到的預設表單如下，可以看到一次最多可上傳300MB，其實已經夠用了

最後的完成畫面會顯示一段影片，有興趣的人可以看看，不然的話就大功告成了，直接把剛剛取得的網址分享給別人，或者內嵌到網站上就行了，但若是想要進一步編輯表單的話，則可以利用「Launch Form Builder」來進行調整

再注意一下，當取得表單網址時，若進入後卻發生網址錯誤的情況，這只是網域出了問題，只要重新Copy畫面所提供的新網址即可

當有人透過此表單上傳檔案時，JotForm會把檔案傳一份到Dropbox的「JotForm」→「表單名稱為名的目錄(如下圖的Send a File)」→「上傳目錄」中，這裡面會有很多的「上傳目錄」，每一個目錄都代表某一次的上傳，若你在表單中有讓上傳者填寫姓名的話，那麼就會以姓名來當作目錄名稱，有填寫姓名的好處是即使是不同次的上傳，JotFrom也會把檔案都自動規到該姓名目錄下，看不懂沒關係，反正上傳後進入Dropbox中觀看自然就會知道。註：為什麼JotForm下要再建一個「表單名稱為名的目錄」的子目錄呢，因為若你是一個JotForm的註冊會員的話，是可以建立多個表單的，因此資料就會依據不同的表單目錄來區分。
註：當有人上傳檔案了之後，預設是會用Mail來通知你的，另外，上傳的檔名請避免用中文字，否則中文部分會被略過，但不影響上傳

● Form Builder

剛有提到可以利用「Launch Form Builder」重新編輯表單，畫面如下：JotForm提供所見即所得的編輯方式，所以要上手不會太困難，左邊主要是功能元件，點擊一下就會出現在右邊的編輯區中，而你在編輯區中可以自行刪除元件或者修改資料，例如我把一些英文字改成中文了

點擊元件可以設定是否該欄位屬於必填項目，上傳的功能也可以區分成單檔或多單上傳，這些就不多做說明，總之都可以在這個編輯區中找到，左上角有「Auto Saved」自動儲存的功能以及「Priview」預覽功能，這部分得要好好利用

【註冊成為JotForm會員】

若你註冊成為JotForm的會員的話，好處是可以擁有更多的控制權，例如可以再重新編輯表單、建立無限個表單、回覆上傳者、產生報表等等，但天下沒有白吃的午餐呀！若各位有回到上一層的「ACCOUNT STATUS」來觀看的話，會發現Submissions、Upload Space各只有100，這是什麼意思呢：

• Submissions：每當上傳一次，總數便會少1，也就是每月只能上傳100次！說實話，對於某些人來說真的是太少了，但若以上面的方式直接用Dropbox來建立表單的話，我自己的測試是沒有次數的限制的，但缺點就是無法再重新管理表單。
  
• Upload Sapce：當有人上傳檔案的時候，檔案還會存在JotFrom中，由於容量只有100MB，也就是說別人上傳最大的單檔也只能限制在100MB之內，這可是比剛剛Dropbox的300MB還少，這倒是很奇怪了，還好檔案是可以清除的。

若是會員，想要直接整合Dropbox的話，那麼可由編輯表單中的「Integrations」，來選擇Dropbox連接就行了，步驟是一樣的，可是Submissions仍然是100，並不會因此而增加

由上面的測試來看，假設測試無誤，如果你想要管理表單，而且上傳次數不頻繁的話，那麼建議可以註冊成為JotForm的會員，因為控制權會多很多；但若你的上傳的頻率相當大，那麼可以直接由「JotForm – Dropbox Forms」的方式來建立上傳表單即可。

再說個小缺點好了，網路上也有類似的服務，但可以設密碼喔，我在編輯表單中好像找不到可以設上傳密碼的地方，若的話也請知道的人告訴我！

Read more...