2025年11月30日 星期日

【Google 教學】Google 表單網址太長又難記？教你透過免費空間自訂專屬短網址 (NekoWeb/Neocities)

大家在用 Google 表單做活動報名、團購或是問卷調查時，是不是常遇到一個困擾：Google 表單產生的網址都是一長串的亂碼？

雖然我們可以使用 bit.ly 或 reurl 縮短網址，但縮短後的網址依然是一堆無意義的英數字，對於使用者來說既不好記，看起來也比較沒有辨識度。

今天這篇教學要分享如何透過 免費的靜態網頁空間 (NekoWeb 或 Neocities)，配合 Google 表單的「嵌入 HTML」功能，來製作一個自訂名稱、好記且畫面置中的專屬表單頁面。

為什麼要這樣做？

  1. 網址更好看：你可以自訂網址（例如：yourname.neocities.org/buy.html），比 forms.gle/xyz... 更有辨識度。

  2. 提升信任感：網頁標題可以自訂，不會只顯示 Google 表單的預設標題。

  3. 完全免費：利用免費的網頁託管服務即可達成。

準備工作

在開始之前，請先準備好：

  1. 你已經建立好的 Google 表單。

  2. 註冊一個免費的網頁空間帳號（本篇示範 NekoWeb 與 Neocities）。

步驟一：取得 Google 表單嵌入碼

  1. 開啟你的 Google 表單。

  2. 點擊右上角的 「傳送」 按鈕。

  3. 選擇 「< >」 (嵌入 HTML) 的圖示。

  4. 這裡可以設定寬度和高度（通常維持預設即可），點擊 「複製」。

![alt text](https://via.placeholder.com/600x400?text=Google+Form+Embed+Code)

(示意圖：在 Google 表單傳送頁面複製 iframe 程式碼)

步驟二：建立網頁檔案 (以 Neocities 為例)

Neocities 是一個非常知名的免費靜態網頁空間，它的優點是網址結尾可以省略 .html，看起來更簡潔。

  1. 登入 Neocities 後，點擊 「Edit Site」 進入管理介面。

  2. 點擊 「New File」 建立新檔案。

  3. 命名檔案：這將會是你網址的一部分。

    • 例如命名為 20251130.html 或 groupbuy.html。

    • 注意：副檔名一定要是 。

  4. 建立後，在檔案列表找到該檔案，點擊 「Edit」 進入編輯模式。

(註：NekoWeb 的操作邏輯大同小異，同樣是建立 HTML 檔案並貼上程式碼。)

步驟三：貼上程式碼與修改標題

進入編輯畫面後，你會看到預設的 HTML 結構。請依照以下步驟修改：

  1. 修改網頁標題 (：
    找到 <title>...</title> 標籤，將中間的文字改成你的活動名稱（例如：「具林香純滴雞精」）。這樣使用者在瀏覽器分頁上就會看到正確的名稱。

  2. 貼上表單嵌入碼：
    將步驟一複製的 <iframe>...</iframe> 程式碼，貼在 <body> 和 </body> 之間。

此時原本的程式碼大概會長這樣：

Html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>你的活動名稱</title> 
  </head>
  <body>
    <!-- 這裡是剛剛從 Google 表單複製過來的 iframe -->
    <iframe src="https://docs.google.com/forms/..." width="640" height="1504" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
  </body>
</html>

步驟四：讓表單「置中」顯示 (關鍵步驟！)

預設貼上的表單會靠左對齊，在電腦版網頁上看起來會怪怪的。我們需要透過 CSS 語法讓它置中。

請在 <iframe> 標籤內，加入這段語法：

CSS
style="display:block; margin:0 auto;"

修改後的完整 iframe 範例：

Html
<iframe 
  style="display:block; margin:0 auto;" 
  src="https://docs.google.com/forms/d/e/......" 
  width="640" 
  height="1504" 
  frameborder="0" 
  marginheight="0" 
  marginwidth="0">
  Loading…
</iframe>

完成後，點擊右上角的 「Save」 (儲存)。

步驟五：預覽與分享

  1. 儲存後，點擊 「View」 查看網頁。

  2. 你會發現表單已經完美置中，且網頁標題也是你自訂的名稱了！

關於網址的小撇步：

  • Neocities 範例：

    • 網頁檔案：group_buy.html

    • 完整網址：https://你的帳號.neocities.org/group_buy.html

    • 優點：Neocities 支援省略副檔名，使用者輸入 https://你的帳號.neocities.org/group_buy 也能連得上，網址更短更漂亮。

  • NekoWeb 範例：

    • NekoWeb 通常需要完整的 .html 結尾才能正確讀取，例如：https://你的帳號.nekoweb.org/group_buy.html。如果不打副檔名可能會出現 404 錯誤。

總結

透過這個方法，我們不需要購買網域，也能利用免費空間將又臭又長的 Google 表單網址，包裝成 https://你的帳號.neocities.org/活動名稱 的形式。

這不僅方便使用者記憶，在 LINE 或 Email 轉傳時也顯得更專業。如果表單內容有更動，只要不動檔名，原本分享出去的連結依然有效，非常實用！

重點複習 CSS 語法：

若要讓嵌入的內容置中，記得加上：style="display:block; margin:0 auto;" 



於 沒有留言:
標籤： ,

2025年11月29日 星期六

網頁工具教學] 如何將 Word 或 Excel 表格轉換成 HTML 語法？讓客戶直接在 Email 內預覽報價單 (免附件)

今天的網頁工具教學要來解決一個業務或行政人員常遇到的痛點：寄送報價單或表格給客戶時，一定要用附件嗎？

通常我們寄送 Excel 檔給客戶，客戶必須先下載、打開 Excel 軟體才能看到內容。這個過程增加了客戶的麻煩，有時候甚至會因軟體版本不同而跑版。如果能將表格轉成 HTML 語法，客戶打開 Email 就能直接看到精美的表格，不僅方便，看起來也更專業！

今天我們將透過一個好用的線上工具 Summernote，搭配 Excel 轉 HTML 的小技巧，教大家如何輕鬆完成這件事。

為什麼需要這樣做？

  1. 提升閱讀率：客戶不用下載檔案，直接在信件內文閱讀。

  2. 專業度加分：排版精美的 HTML 信件比純文字或附件更有質感。

  3. 防止跑版：網頁語法能確保格式在大多數信箱中顯示一致。

準備工具

  1. 你要寄送的 Excel 表格 或 Word 文件。

  2. 線上轉換工具：Summernote.org

  3. Excel 自動寄信程式（本站提供的進階版工具，需設定 SMTP）。

操作步驟教學

第一步：解決格式跑版問題 (關鍵技巧！)

很多人直接從 Excel 複製表格貼到網頁編輯器，會發現框線不見了或是格式跑掉。這裡有一個獨家小技巧：

  1. 先在 Excel 中選取你要的表格範圍，按 複製。

  2. 打開一個空白的 Word 文件，按 貼上。

    • 注意：貼到 Word 後格式如果稍微跑掉沒關係。

  3. 接著，再從 Word 裡面全選剛剛貼上的表格，按 複製。

  4. 最後，前往 Summernote.org 的編輯區，按 貼上。

神奇的事情發生了！ 透過 Word 當作中介，貼到網頁上的表格將會保留完整的框線與格式。

第二步：在 Summernote 編輯內容

在 Summernote 貼上表格後，你可以像在操作 Word 一樣進行編輯：

  • 加入問候語：在表格上方輸入「某某客戶您好，這是我們近期的報價...」。

  • 調整樣式：可以選取文字更改顏色（例如將重點文字改成藍色）、加粗體，或是調整背景色。

  • 確認排版都滿意後，準備轉換成語法。

第三步：取得 HTML 原始碼 (Code View)

  1. 在 Summernote 工具列中，找到一個標示為 </> 或 Code View 的按鈕，點擊它。

  2. 畫面會變成密密麻麻的程式碼，這就是網頁原始碼。

  3. 將這些原始碼 全選 (Ctrl+A) 並 複製 (Ctrl+C)。

第四步：貼上至 Excel 自動寄信工具

接著打開我們提供的「Excel 自動寄信 email (進階版)」工具：

  1. 設定參數：

    • SMTP 伺服器：填入你公司或信箱的 SMTP (例如 Gmail 是 smtp.gmail.com，Port 465 或 587)。

    • 格式：記得將發送格式從 TXT 改為 HTML (非常重要！)。

    • 編碼：依需求選擇 Big5 或 UTF-8。

    • 寄件者資訊：輸入你的 Email 帳號密碼。

  2. 貼上內容：

    • 切換到「內容」欄位。

    • 重要操作：請不要直接點儲存格貼上，請點選儲存格後，在上方的 「資料編輯列 (Formula Bar)」 進行貼上。這樣才能確保 HTML 語法被正確讀取，不會因為換行符號而錯誤。

  3. 測試寄送：

    • 輸入收件者的 Email 與主旨。

    • 按下「開始寄送 Email」按鈕。

成果展示

寄送成功後，你的客戶收到的信件，就會像下圖一樣：

  • 有完整的問候語。

  • 表格框線清晰。

  • 重點標示清楚。

不需要任何附件，客戶就能一目了然你的報價單內容！


常見問題與除錯

  • 寄送失敗？ 請檢查 SMTP 設定是否正確，以及 Google 帳戶是否開啟了「低安全性應用程式存取」或是使用了應用程式專用密碼。

  • 格式還是跑掉？ 請務必確認有執行「Excel -> Word -> Summernote」這個轉貼流程。

希望今天的教學對大家的業務推廣有幫助，如果有任何問題，歡迎在部落格留言詢問！

相關檔案下載：

 


於 沒有留言:
標籤：
訂閱： 意見 (Atom)

【Google 教學】Google 表單網址太長又難記？教你透過免費空間自訂專屬短網址 (NekoWeb/Neocities)

大家在用 Google 表單做活動報名、團購或是問卷調查時，是不是常遇到一個困擾： Google 表單產生的網址都是一長串的亂碼 ？ 雖然我們可以使用 bit.ly 或 reurl 縮短網址，但縮短後的網址依然是一堆無意義的英數字，對於使用者來說既不好記，看起來也比較沒有辨識度。...