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;" 



沒有留言:

張貼留言

注意:只有此網誌的成員可以留言。

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

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