JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8" />
  <title>線上訂單 Demo（送入 Google Form）</title>

  <!-- Tailwind + DaisyUI CDN -->
  <link
    href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css"
    rel="stylesheet"
    type="text/css"
  />
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-base-200 p-6">

  <div class="max-w-xl mx-auto bg-base-100 shadow-xl p-8 rounded-box">
    <h1 class="text-3xl font-bold mb-6 text-center">線上訂單系統</h1>

    <form id="orderForm" class="space-y-4">

      <!-- 客戶名稱 -->
      <label class="form-control w-full">
        <div class="label"><span class="label-text">客戶姓名</span></div>
        <input id="name" type="text" class="input input-bordered w-full"
          placeholder="王小明" required />
      </label>

      <!-- 連絡電話 -->
      <label class="form-control w-full">
        <div class="label"><span class="label-text">連絡電話</span></div>
        <input id="phone" type="tel"
          placeholder="0912345678"
          class="input input-bordered w-full" required />
      </label>

      <!-- 商品名稱 -->
      <label class="form-control w-full">
        <div class="label"><span class="label-text">商品名稱</span></div>
        <input id="item" type="text"
          placeholder="飲料"
          class="input input-bordered w-full" required />
      </label>

      <!-- 數量 -->
      <label class="form-control w-full">
        <div class="label"><span class="label-text">訂購數量</span></div>
        <input id="qty" type="number" min="1"
          placeholder="1"
          class="input input-bordered w-full" required />
      </label>

      <button type="submit" class="btn btn-primary w-full">送出訂單</button>

    </form>

    <p id="msg" class="text-center text-lg mt-4 font-semibold"></p>
  </div>

  <script>
    // ★★★ Step 1：換成你的 Google Form 提交 URL ★★★
    const FORM_URL =
     ...