用 Canva AI 製作簡易訂購頁面｜3 分鐘完成輕量設計

作者： -
水耕蔬菜輕食料理線上訂購頁面，包含顧客資訊與主餐選項
上次我們透過 Google 表單，做了試算表統計表單
如果你今天是經營幾個品項的營養午餐之類的，品項沒有很多，是否也想做自己的訂貨網頁？
以前你可能覺得沒必要，抄抄寫寫就好，那如果它很簡單又實用，可以用很久，你也不想試試嗎？

需求

  1. 提出品項需求
  2. 做一個簡單的訂購網頁
  3. 資料有人填，回寫回 Google 試算表
  4. 預代公式，相同品項一眼明瞭

作法

網頁前端可以使用 Canva AI、Gemini 或其他可以寫 Vibe Codeing 的都可以
使用 Canva AI 的程式碼工具建立水耕蔬菜輕食訂購頁面，顯示自動生成的訂單選項
  1. Canva AI 中選擇 </> 幫我撰寫程式碼
  2. 提供自己的內容
  3. 告知需求▶️ 做訂購表單，要能回寫至 Google 試算表
Canva AI 自動生成 Google 試算表欄位名稱與填寫範例，用於水耕蔬菜輕食訂購表單
  • Canva AI 會做第一步的程式編寫
  • 再依其回應內容，往下提出修改或其他追加內容
  • 甚至連試算表欄名也可以讓其提供，再複製至 ▶️ Google 試算表中
  • 它還會告知詳細的步驟，所以要注意看它如何回覆你的要求

🔧 設定步驟

  1. 建立新的Google試算表
  2. 在第一列輸入上述8個欄位名稱
  3. 複製試算表ID（URL中 /d/ 和 /edit 之間的字串）
  4. 將ID提供給我，我會幫您完成設定

輕食訂購頁面醬料選擇與數量備註輸入欄位，包含提交至 Google 試算表的按鈕

GAS 設定

完美！我已經幫您設定好試算表ID了。現在您需要：

下一步驟：

  1. 建立Google Apps Script
    • 前往 https://script.google.com
    • 點擊「新專案」
    • 貼入管理模式中的程式碼（試算表ID已經自動填入）
  2. 部署Web應用程式
    • 點擊「部署」→「新增部署作業」
    • 選擇「網頁應用程式」
    • 執行身分：選擇您的帳戶
    • 存取權限：選擇「任何人」
    • 複製部署後的URL

之後就是測試，若過程中有什麼問題，都可以向其提出，Canva AI 會告知如何修正
比較有可能的問題
  • 沒有寫進試算表中？
  • 提交後資料有寫進去，網頁下方應該提示提交成功？
  • 結尾備註版權宣告（告知要顯示哪些訊息）
水耕蔬菜輕食料理訂購成功畫面，顯示主餐、配餐與醬料資訊摘要

自動化 PART 2

水耕輕食訂單彙總試算表，顯示主餐、配餐與醬料的各項數量統計

訂購頁面展示

Canva 程式工具顯示 HTML 原始碼並提供複製功能，用於水耕輕食訂購頁設計

Canva AI

歷史資料區

目前 Canva AI Code for me 保留時間約一個月，所以若有重要提示詞，建議先留存下來
  1. 點選 Canva AI 
  2. 選擇  </> 幫我撰寫程式碼 （Code for me ）
  3. 就能找到歷史資料
Canva AI 聊天介面展示歷史紀錄與撰寫程式碼指令使用流程畫面

使用限制

目前 Canva AI 的使用次數已經取消次數說明，以下為官方說明：

官方說明

＂目前，Canva 已經簡化了 AI 功能的使用體驗，不再顯示每個 AI 工具的具體使用次數或剩餘額度。你現在會看到「存取等級」（例如：有限、高、較高），而不是精確的數字。這樣你可以更專注於創作，而不用擔心計算次數。
  • 每月 1 號會自動重設 AI 使用額度。
  • 很多 AI 功能（如 AI 語音、Magic Charts）對所有用戶都是無限且免費的。
  • 進階 AI 工具（如「用 Canva AI 產生設計」、「Dream Lab 文字轉圖像」、「Magic Write」等）會共用每月的高額度，依你的方案而定。
  • 進階 AI 影片生成功能（如 Veo 3）即使是付費方案也有使用次數限制。
Canva AI 工具功能比較表，顯示免費版、Pro 版與團隊版在 AI 存取與功能上的差異

之前的經驗

  • Canva AI 訊息數量：免費版 20次：PRO 版 60次
  • 使用 Canva AI 產生設計(包含 英文版中的 AI 影片)：免費版-總點數 50點；PRO 版-總點數 150點
  • 魔法公式工具／魔法洞察工具：免費版-總點數 10點；PRO 版-總點數 500點
  • 魔法媒體工具 - Text to Video：免費版-總點數 5點；PRO 版-總點數 50點
  • 魔法文案工具 (含批次處理功能)：免費版-總點數 50點；PRO-總點數 500點
Canva AI 對話若超過次數，隔天再問就好，它的時間計算應該是第一則問起後的 24小時內
其他有點數說明的，既然官方已取消了計算次數，我們當然也沒必要去記自己用了多少，就有效善用它或用其他 AI 做為輔助說明。

延伸閱讀

📌 想讓表單更吸睛？試試這篇 → Google｜表單封面及內圖尺寸
📌 自訂主題樣式不求人 → Google｜表單自訂主題選擇文字樣式
📌 表單資料不重複！→ Excel｜Google多表單資料取得不重複值
    更多及時的分享，可加入我們的私密社團：https://www.facebook.com/groups/canva17gungho

    更多 Canva 的應用請參考：Canva

    更多雲端資源請參考：行銷筆記

    更多 AI 應用請參考：AI 工具

    更多 Google 相關請參考：Google

    文章分類：

    留言

    張貼留言

    這個網誌中的熱門文章

    Google｜表單封面及內圖尺寸

    作者： -
    圖片
    圖一：在 Canva 定稿時 圖二：電腦上開啟表單 雖然 Google 表單封面尺寸在手機上看略小，感覺效益不大，但若客人在電腦上開啟，感覺效果也還不錯，既然都會 Canva 了，就會想要自己做一個適合該表單的封面。 內圖尺寸 內圖沒限制要什麼尺寸，長方形也可以，在電腦上 1280*720px，我覺得看圖最舒服，手機上看字體會略小。因為我是用 ig 的尺寸去改，手機看很舒適，且大部份的人都用手機開啟。所以還是選擇用正方形。 本來想直接用 ig 尺寸，但在電腦上開啟，圖會太大，不太合適，所以縮至 600*600px，雖然在電腦上看仍略大，但取其相對清楚，且手機上看效果很棒，就沒再縮尺寸。 600*600px 1280*720px 封面尺寸 1350*336px Google 表單 Banner 尺寸套用結果如首圖 一二你可以比對，誤差值很小。這尺寸是我自己試出來的，也套用過數份表單，因為表單封面其實尺寸不大，所以我沒要求畫質。 Google 表單因為製作簡單，填寫資料的人也很方便，且可以直接彙整至試算表，不用再整理訂單，所以真的要好好利用它。 Midjourney 生圖時，可以精準要求圖片比例，此封面尺寸就可以設為 --ar 225:56 關閉表單 若表單截止要關閉表單功能，只要把  接受回應 改成 不接受回應 即可。 其他要依時間或滿額關閉表單，因為要安裝外掛，都是簡體中文介紹，雖然有前輩介紹過，但我個人沒有需求，就自己時間到時，手動關閉表單就好。 Google｜Font字型-日文推薦 表單更新 6月起陸續更新表單的自訂主題，表單也可以...
    歡迎入阮厝內逛逛....>>

    KTJ大榮貨運託運單列印及軟體操作運費說明

    作者： -
    圖片
    嘉里大榮物流託運軟體介面 貨運業是一份很吃重的工作，不僅工作時間長，各種不同的產品有些很重，也很費體力，尤其是疫情這段時間，大家減少出門，相對的網購貨運次數就多，貨運司機就更辛苦了，所以我們可以做好的前置作業，就不讓貨運司機困擾，把收貨人／寄件人／物品件數／物品重量／到貨時間都標示清楚，不僅對收件人好查找，也有利物流後續的作業。 託運單格式 寄貨量少的通常是用手寫的三聯複印單，會有託運單流水號編號的查貨號碼在上頭，於寄貨站上手寫。再多量一點，可以取回空白的三聯托運單，再自己套表列印於大榮提供的制式托運單上（我自己有做，有需求的留言告訴我，日後再寫來分享），雖然客戶資料可以用 Excel 與 Word 套印格式來套表，但還是有點麻煩。 最方便的當然是請大榮來公司安裝託運軟體，再直接用託運貼紙貼上，大榮會提供點陣式印表機適用二側有洞的小貼紙，公司寄貨量大的，直接列印托運貼紙就很方便。 Kerry大榮貨運點陣式三聯複印託運單 是否有再更新樣式我不確定 Kerry大榮貨運點陣式託運貼紙 這是電腦上套印資料的樣子 Kerry大榮貨運點陣式印表機適用  託運貼紙空白聯 三張一折  貨物追蹤查詢 KERRY嘉里大榮物流的託運軟體是我目前操作過的唯一，所以我不知道其他的物流介面是否更好，用這麼久的大榮物流託運軟體，老實說也沒有啥大問題，很方便，很好操作，沒後續的平台問題，託運代號在他的 網路查貨平台 也很方便看到貨品的流向，簡單平順就很棒。 ...
    歡迎入阮厝內逛逛....>>

    【檔案下載】大榮貨運單列印託運單下載

    作者： -
    圖片
    如果不常寄貨，量少的通常是用手寫的三聯複寫單，會有託運單流水編號的查貨號碼在上頭，可於寄貨站上手寫。若偶爾寄但又不想手寫，也可以取回空白的三聯托運單，再自己套表列印，至少寄件人不用重覆寫，簡單用電腦打字總比寫字快，重覆的客戶資料還可以留底備用，當然電腦強的還是可以  EXCEL 建立資料再至 WORD 套印，選擇一個自己最熟悉的方式即可。二者方式都可以提供，有需要的再留言和我說（別直接留 Email 嘿，會被看光） 最方便的當然是請大榮貨運來公司安裝託運軟體，再直接用託運貼紙貼上，大榮會提供點陣式印表機適用二側有洞的小貼紙，公司寄貨量大的，直接列印托運貼紙是最方便的。 可參考：  KTJ大榮貨運託運單列印及軟體操作運費說明 Kerry大榮貨運點陣式三聯複印託運單 新版 Kerry大榮貨運點陣式三聯複印託運單 套印結果 Kerry大榮貨運 印表套印結果 Kerry大榮貨運 印表機設定-邊界 Kerry大榮貨運 印表機設定-紙張 Kerry大榮貨運 印表機設定-版面配置 印表機 因為是複印式三聯，所以要有點陣式印表機 我套的是 EPSON LQ-690C WORD 部份都已設定好，若印表機邊界差異，就微調就好 EXC...
    歡迎入阮厝內逛逛....>>

    Google｜表單自訂主題選擇文字樣式

    作者： -
    圖片
    自訂主題 原本 Google 表單的自訂主題，只能選擇圖片／背景顏色，文字樣式也只有幾種能選，且無法自己決定文字大小，最近更新的表單也能選擇文字樣式了，所以之前有介紹過的 Google 字型也適用於表單了哦～ Google｜Font字型-日文推薦 選擇自訂主題 ，就會提示你 Style your text，及更新的內容說明 可以選擇 頁首 字型／字型大小：18-24 pt 可以選擇 問題 字型／字型大小：12-18 pt 可以選擇 文字 字型／字型大小：9-12 pt Google｜Font字型-日文推薦 文字選擇基本上和 🔼 連結介紹的差不多，可惜的是少了一個 字母／所有字集  的選項，就無法直接選擇所有日文字型 但還好的是若你曾透過其他 Google 服務，包括：Google 文件／試算表／簡報／Sites／Blogger，之前你曾選取過的日文字型，不用再重找一次，就可以直接在 Google 表單中， 我的字型 裏選用 頁首 字型：表單標題 問題 字型：表單中的問題題目 文字 字型：各問題中的說明文字及答案選項 延伸閱讀： Google｜表單封面及內圖尺寸 Google｜Font字型-日文推薦 ChatGPT + Google Apps Script：快速自動化表單建立流程
    歡迎入阮厝內逛逛....>>

    【Excel表格】簡易式銷貨憑單檔案下載

    作者： -
    圖片
    Excel表格-簡易式銷貨憑單 之前分享的 EXCEL資料留言裏，偶有看到網友要索取空白的銷貨憑單，說實在的，我不太明白對方要的是什麼，通常公司會有套裝軟體，會有自己的銷貨單表格，或文具店買四聯空白收執聯。但我想想，或許也有較小的自營店，想要用電腦簡單記錄，我還真的有 form ，偶有 ERP 連線問題時，可以先出表格給客戶自取使用，所以簡單把公式代好，客戶資料／產品資料另做，若有需要的人，再留言和我說。 資料來源 檔案內含三個工作表 銷貨單： 主工作表格，大部份已代公式 客戶資料： 已格式化為表格，有新增資料直接插入一行或最末行 Enter，資料會代回銷貨單內         簡易式銷貨憑單-客戶資料              產品資料： 已格式化為表格，有新增資料直接插入一行或最末行 Enter，資料會代回銷貨單內   公式說明 A1 儲存格是代客戶簡稱（參考最上圖），已預做清單可以點選，清單來源為 客戶資料 的簡稱＝B欄，覺得自己打字比較快的，可以直接打在 A3 儲存格（但公式會被改掉就要再自己重設 A3＝A1）。 常態性客戶可以把資料留在客戶資料工作表中，點選簡稱則銷貨單據上的地址和聯絡電話會一併代出，若偶一為之的客戶，也可建一個其他客戶不代資料的，沒有聯絡資訊則會代空白。 出號單號有代公式：用前綴字元＋日期的格式＋單號...
    歡迎入阮厝內逛逛....>>

    Canva 字型分類整理｜字體風格與應用建議

    作者： -
    圖片
    Canva Font字型介面差異 Canva 字型，若你切換為英文版，會看到它的字型分類比繁體介面活潑，它會展示該字型分類的樣式，讓我們比較容易透過樣式，去理解那類字型給我們的感覺或 show 出來的樣貌，再從分類中挑出自己適用或喜歡的字型。 字型篩選 Canva 字型也有分付費版及免費版 可以挑選國家別使用的字型 可以依需要選擇付費字型或免費字型 Canva 無訂閱的朋友，是無法點選付費字型套用看看的，若你分享的範本，有可能給免費版的使用者， 建議選用免費字型 ，因為雖然該字型可以看，但若需要下載，對方是必須另外付費的。 Canva 字型分類 以下分類順序，依英文版介面排序 大概知道有哪些類型，也可以依其分類用 key in 方式蒐尋字型的類別 中文翻譯為中文版介面顯示的翻譯文字 Handwriting（手寫） 模擬手寫筆跡，具個人風格及手寫溫度 給人溫暖、親切與個性化的氛圍 適合卡片、邀請函、個人品牌貼文 Corporate（企業風格） 專業可靠、外觀穩重、線條整齊 強化專業與信任感 常見於企業簡報、商務文件、官方網站等 Display（展示字型） 視覺衝擊力強，設計感突出，通常字體較粗或有獨特造型 字型多樣，強調視覺張力 適合廣告標語、海報、活動主視覺、品牌Logo、需要快速抓住目光的場合 詳細說明可參考： justfont：Google fonts 的字體：展示字體 Display 篇 Headings（標題） 結構清晰、粗體、利於強調重點 文章標題、海報大字、社群媒體貼文標題、簡報開頭 Paragraph（段落） 閱讀性高，適合正文內文排版 部落格文章內文、電子郵件、書籍內頁、產品說明、任何需要閱讀舒適的文本 ...
    歡迎入阮厝內逛逛....>>