2012年8月6日 星期一

利用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


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.");
  
}




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




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

(1) 請點選”Add a new trigger”連結
(2) 設定執行的函式sendMailsEvents 來源為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

申請免費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)


step1


圖1


 


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


step2 圖2


 


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


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


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


step3


                                                                圖3


step4


圖4


step5圖5


step6圖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的協議,請謹慎使用。


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


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」的方式來建立上傳表單即可。


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


JotForm 線上表單產生器,免費製作網站聯絡表單


在網站裡加入聯絡站長表單、問卷調查或是讓用戶可以快速提交建議嗎?如果只留個 E-mail,恐怕很多人會懶得打開程式來寫一封電子郵件,這時候我們就可以考慮設計一個表單來讓需要的使用者填寫,填後立即從瀏覽器上送出,不但更加方便,也省去了打開其他軟體的麻煩。先前我們已經介紹過幾款可以免費製作線上表單的服務,如果你正在尋找,除了本文的 JotForm 以外,還有幾個類似的網站可以供您參考:PandaFormContactifyEmailMe Form


在 Pseric 的記憶中,早期網頁還在 HTML 時代就已經有線上表單的設計,當時填完後按下送出,會開啟電子郵件客戶端並自動帶入你所填寫的內容,再藉由 Email 方式寄到對方的信箱裡;過了一段時間後,開始有 PHP 程式可以線上寄信,不過都必須要自行架設,還有繁瑣的設定檔要修改,搞定之後才能夠透過網頁來發送或儲存表單。


但現在網路科技日新月異,線上表單已經簡單到可以直接在瀏覽器內製作設計,JotForm 號稱最簡單的表單製作工具,只要以拖曳的方式就能調整每個欄位的位置、要顯示哪些字樣或說明等等,真的非常方便,完成後不但可以從瀏覽器直接開啟表單,也可以內嵌至網頁裡,當使用者填寫完成會自動儲存在 JotForm、也可以寄回信箱。


網站名稱:JotForm
網站鏈結:http://www.jotform.com/免費註冊


使用教學


JotForm 無須註冊就能使用,不過每月只能接收 20 筆表單,我會建議免費註冊帳戶,可以提升至每月 100 筆表單和 100 MB 空間、另外可以使用 10 筆 SSL 加密表單、10 次的接收付款,對於一般網站來說已經相當夠用。


JotForm 的使用方法很簡單,從左邊把需要使用的項目拖曳到右邊表單編輯器上,然後把欄位名稱跟說明稍微設定一下即可,大多數會用到的項目例如文字方塊、文字欄位、下拉式選單、單選方塊、檔案上傳等等都可以從 Form Tools 找到;此外還可以依照不同的項目來設定對齊方向、必填與否、大小、驗證方式或是預設值等等。



在點選表單內的項目後,可以設定的選項會出現在上方,例如下圖就是針對某個欄位新增一個子標籤,此外還能加入範例文字、說明等等。



 


JotForm 會定時自動儲存你所設定的表單,如果有不小心改錯的話,按下 UndoRedo 可以快速回到上一步、下一步,點擊 Preview 可以預覽表單所呈現出來的樣子。



在按鈕部分,JotForm 提供許多種樣式供使用者選擇。



選擇 Setup & Embed(設定和內嵌)功能,會有電子郵件通知、感謝頁面、內嵌表單、原始碼和進階設定等選項可以調整。



完成後點擊 Embed Form 來取得嵌入表單的原始碼,除了可以使用特定鏈結來進入線上表單外,還有 Embed、Source、iFrame、LightBox、Feedback、Pop-up 等方式可以存取你製作的表單,下方也有依照不同的平台來訂製的使用方式。



JotForm 亦可結合第三方服務,例如透過 Dropbox 來接收檔案、結合 Facebook 來取得聯絡資訊、或是透過 MailChimp 來發送電子報。



JotForm 真的是一款蠻方便的線上工具,可能有些人已經知道 Google 文件亦可以製作線上表單,並將結果直接儲存至 Google 文件裡,但 JotForm 所提供的功能更多,例如 SSL 加密表單或是線上收款、結合第三方服務等等,更適合拿來作為網頁表單。如果你想增加網站訪客和你的互動、或是提供一個更為便捷的聯繫方式,那麼 JotForm 是不錯的選擇。


2012年8月5日 星期日

我是去從WordPress官網申請帳號,那要怎麼新增外掛?

我找了好久都沒有「外掛」這個選項


如果是WordPress.com的服務,不能加入任何外掛。


我在Wordpress.com的部落格已經停止更新了,因為不能自訂版面,不能插入html表單語法,不能加外排,不能javascript..一堆限制,不好玩


現在用Wordpress.com的人也很少,只要單純寫文章還不錯用


讓我有些失望.而不能作修改,這樣自由度很低...會讓我想以後再嘗試它付費的有何不同


如果要玩外掛....還是自架的比較好...
找一個免費空間來玩。


如何製作WordPress分頁選單

如果各位常常瀏覽網站應該知道某些網頁有下拉式選單,我們可以將屬性相近的分頁設定成一組下拉式選(下圖有示範),當滑鼠游標指到選單頁之後,下拉式選單就會出現選項讓網友點選,部份網頁設計軟體也有此功能,可見這算滿常見的功能,那我們該怎麼在Wordpress平台裡設定這功能呢?







設定分頁選單




分頁選單在2.X版的預設佈景不支援此選項,大半都要自己上網找支援的佈景,有的時候還要改變php檔案的語法或安裝套件來配合此功能,不過現在3.0版預設的佈景 Twenty Ten 支援選單功能,而且Wordpress 3.0 版已經針對這種選單做了一些設計,如果只是簡單的分頁選單我們只要做幾項設定就可以完成了


不過要提醒大家,這樣的設定會影響網頁的閱讀,建議將同一屬性的頁面放到同一選單,且建議別放太多層(子母選單關係最好三層以內),這樣才不會讓網友覺得選單很凌亂,或者各位可以看 花水木 的 下拉式選單的迷思 這篇文章,他會提到更多優缺點的比較,這裡就直接進入正題好了




1. 登入後台並選擇網誌分頁



進行這項設定,一定要登入後台(廢話!),因為我們這次只要設定網誌的分頁,因此不需要動到其他設定,點選網誌分頁就可以進入設定畫面了


2. 設定單一分頁的選項



點了網誌分頁之後,各位可以在右邊區塊看到網誌的選單,但因為我們這次只要設定屬性,不需要真正變更分頁的內容,所以各位可以選擇快速編輯,這樣就不用從傳統的編輯設定屬性了


3. 設定上層分頁



這裡的結構有點怪,我解釋一下,所謂的上層選項是指這個分頁在選單裡要排列的相對位置,這個分頁要排列到哪一頁的下方,但選單的先後順序得看設定上層目錄的先後順序而定,假設B跟C都同時設定A為上層目錄,但B分頁比C更早設定,設定完成之後,A就變成選單的最上層,可以顯示在主頁的分頁,當游標移動到A之後才會顯示B跟C這兩個目錄選項,但在這裡A、B、C都是可以讓網友自由點選的分頁,看網友點哪一個分頁都可以


4. 檢查設定選項



設定完成之後,你可以離開管理選單回到網誌首頁,用游標測試選單是否如你所願的正常運作,在剛才的設定中,站務管理雖然設定上層目錄在關於這個部落格的這個分頁類別下,但因為本站相關規定比站務管理更早設定,所以站務管理就列為選單的最後選項,萬一你把站務管理這個分頁的上頁選項設定在本站相關規定這分頁的話,這樣本站相關規定的子目錄就增加站務管理這個選項


不知道大家能不能了解這關係,所以我在上面的圖片畫了一個箭頭,希望大家看得懂這次的解說,我們下次再會


 


教學網址:http://www.toppy368.tw/archives/777