You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

借助外部函数在Google Forms中动态计算儿童夏令营报名费用

当然可以!用Google Apps Script结合一些小技巧,完全能实现这种动态计算费用的优雅方案——既可以让用户在填写过程中实时看到费用,也能在提交后自动完成费用核算和通知。下面是两种贴合需求的实现方式,你可以根据场景选择:

方案一:实时显示费用(自定义页面+Web App)

原生Google Forms没法直接在填写过程中实时更新内容,所以我们可以做一个轻量的自定义页面,让用户先选择影响费用的关键选项,实时算出费用后,再引导到预填好选项的Google Forms完成报名。

1. 编写费用计算的Web App

打开你的Google Forms,点击右上角「⋮」→「脚本编辑器」,创建一个新脚本项目,写入以下代码:

// 配置费用规则(后续修改直接改这里即可)
const FEE_RULES = {
  baseFee: 300,
  siblingDiscount: 50,
  teamUpgrades: {
    "基础队": 0,
    "进阶队": 150,
    "精英队": 250
  },
  dailyExtra: 50,
  minFee: 200
};

/**
 * 核心计算函数
 * @param {boolean} hasSibling 是否有兄弟姐妹同报
 * @param {string} teamType 队伍类型
 * @param {number} days 参加天数,默认5天
 * @returns {number} 最终费用
 */
function calculateCampFee(hasSibling, teamType, days = 5) {
  let total = FEE_RULES.baseFee;
  
  // 兄弟姐妹优惠
  if (hasSibling) total -= FEE_RULES.siblingDiscount;
  // 队伍类型加价
  total += FEE_RULES.teamUpgrades[teamType] || 0;
  // 额外天数收费
  total += Math.max(days - 5, 0) * FEE_RULES.dailyExtra;
  
  // 保底最低费用
  return Math.max(total, FEE_RULES.minFee);
}

// 让外部能调用这个计算函数的Web App入口
function doGet(e) {
  // 解析请求参数
  const hasSibling = e.parameter.hasSibling === "true";
  const teamType = e.parameter.teamType || "基础队";
  const days = parseInt(e.parameter.days) || 5;
  
  // 计算并返回结果
  const fee = calculateCampFee(hasSibling, teamType, days);
  return ContentService.createTextOutput(JSON.stringify({ fee }))
    .setMimeType(ContentService.MimeType.JSON);
}

部署这个Web App:

  • 点击脚本编辑器右上角「部署」→「新建部署」
  • 类型选「Web应用」,执行权限选「我」,访问权限选「任何人,甚至匿名」(按需调整)
  • 部署后复制生成的Web App URL,后面会用到。

2. 制作自定义报名页面

创建一个HTML页面(可以用Google Sites或者任意静态网页托管),嵌入你的Google Forms并添加实时计算逻辑:

<!DOCTYPE html>
<html>
<head>
  <title>儿童夏令营报名</title>
  <style>
    .container { max-width: 800px; margin: 2rem auto; padding: 0 1rem; }
    .fee-card { background: #f0f9ff; padding: 1.5rem; border-radius: 8px; margin: 1.5rem 0; }
    .fee-amount { font-size: 1.8rem; font-weight: bold; color: #166534; }
    .options-group { margin-bottom: 1rem; }
  </style>
</head>
<body>
  <div class="container">
    <h1>儿童夏令营报名</h1>
    
    <!-- 费用计算选项区 -->
    <div class="options-group">
      <label><input type="checkbox" id="hasSibling"> 有兄弟姐妹一同报名</label>
    </div>
    <div class="options-group">
      <label>选择队伍类型:</label>
      <select id="teamType">
        <option value="基础队">基础队</option>
        <option value="进阶队">进阶队</option>
        <option value="精英队">精英队</option>
      </select>
    </div>
    <div class="options-group">
      <label>参加天数:</label>
      <input type="number" id="days" min="1" value="5">
    </div>
    
    <!-- 实时费用显示 -->
    <div class="fee-card">
      当前预估费用:<span class="fee-amount" id="currentFee">300</span> 元
    </div>
    
    <!-- 预填好选项的Google Forms链接 -->
    <a id="formLink" href="你的Google Forms链接" target="_blank" style="display: block; text-align: center; padding: 1rem; background: #3b82f6; color: white; border-radius: 8px; text-decoration: none;">前往填写正式报名表单</a>
  </div>

  <script>
    // 替换成你的Web App URL
    const WEB_APP_URL = "你的Web App部署URL";
    // 替换成你的Google Forms字段ID(用于预填选项)
    const FORM_FIELD_IDS = {
      hasSibling: "entry.123456789",
      teamType: "entry.987654321",
      days: "entry.112233445"
    };

    // 实时更新费用和预填链接
    async function updateFee() {
      const hasSibling = document.getElementById("hasSibling").checked;
      const teamType = document.getElementById("teamType").value;
      const days = document.getElementById("days").value;

      // 调用Web App计算费用
      const res = await fetch(`${WEB_APP_URL}?hasSibling=${hasSibling}&teamType=${encodeURIComponent(teamType)}&days=${days}`);
      const data = await res.json();
      document.getElementById("currentFee").textContent = data.fee;

      // 生成预填表单链接
      const prefilledUrl = `你的Google Forms链接&${FORM_FIELD_IDS.hasSibling}=${hasSibling ? "是" : "否"}&${FORM_FIELD_IDS.teamType}=${encodeURIComponent(teamType)}&${FORM_FIELD_IDS.days}=${days}`;
      document.getElementById("formLink").href = prefilledUrl;
    }

    // 绑定选项变化监听
    document.getElementById("hasSibling").addEventListener("change", updateFee);
    document.getElementById("teamType").addEventListener("change", updateFee);
    document.getElementById("days").addEventListener("input", updateFee);

    // 初始化计算一次
    updateFee();
  </script>
</body>
</html>
方案二:提交后自动核算(表单触发器)

如果不需要实时显示,只需要用户提交后自动算出费用并通知,可以用Google Forms的提交触发器实现:

在脚本编辑器中添加以下代码:

// 复用之前的FEE_RULES和calculateCampFee函数

function onFormSubmit(e) {
  // 提取表单提交的响应数据
  const itemResponses = e.response.getItemResponses();
  let hasSibling = false, teamType = "基础队", days = 5;

  // 遍历获取对应选项的值(根据你的表单标题调整)
  itemResponses.forEach(itemResp => {
    switch(itemResp.getItem().getTitle()) {
      case "是否有兄弟姐妹一同报名":
        hasSibling = itemResp.getResponse() === "是";
        break;
      case "加入的队伍类型":
        teamType = itemResp.getResponse();
        break;
      case "参加天数":
        days = parseInt(itemResp.getResponse());
        break;
    }
  });

  // 计算费用
  const fee = calculateCampFee(hasSibling, teamType, days);

  // 1. 把费用写入关联的Google Sheets
  const sheet = SpreadsheetApp.openById("你的Sheets ID").getActiveSheet();
  const lastRow = sheet.getLastRow();
  sheet.getRange(lastRow, sheet.getLastColumn() + 1).setValue(fee);

  // 2. 发送费用确认邮件(如果表单收集了邮箱)
  const respondentEmail = e.response.getRespondentEmail();
  if (respondentEmail) {
    MailApp.sendEmail({
      to: respondentEmail,
      subject: "夏令营报名费用确认",
      body: `您好!您的报名费用已核算完成:${fee}元。请在3日内完成缴费,感谢您的参与!`
    });
  }
}

设置触发器:

  • 点击脚本编辑器「编辑」→「当前项目的触发器」
  • 添加触发器:函数选onFormSubmit,事件源选「表单」,事件类型选「当表单提交时」,保存即可。
优化小技巧
  • 把费用规则单独抽成配置对象,后续调整价格、优惠时不用改核心逻辑;
  • 在Web App中添加参数验证,避免非法输入导致计算错误;
  • 如果用自定义页面,可以添加表单验证,确保用户选完关键选项再跳转正式表单。

内容的提问来源于stack exchange,提问作者gioaudino

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.19 07:54:57