Apps Script新手求助：提交表单后新增分区或打开新表单

嘿，作为经常和Google表单+Apps Script打交道的开发者，我太懂你这种想要实现“提交一段内容后显示下一段”的需求了——毕竟1-12人的预订表单，分步骤收集信息比堆在一起友好太多！

首先得给你掰明白一个核心限制：Google表单本身的提交机制是“一次性提交整个表单”，用户点击提交后，当前表单会话就结束了，没法在原表单页面动态添加或切换分区。你猜的“提交后无法通过Apps Script添加内容展示”完全没错，这是原生表单的硬限制，咱得换思路绕开它。

下面给你三个实用方案，按需选择：

方案1：用原生表单逻辑分支（零代码，适合简单场景） #

如果你的需求只是“根据用户选择的人数，分步显示对应字段”，不需要中途保存数据，那直接用Google表单的分段+逻辑跳转功能就行：

• 把表单拆成多个分段：比如第一段选人数（1-12），第二段填单人信息，第三段填多人信息（如果人数>1）
• 给第一段的“人数”选项设置逻辑跳转：比如选1人，直接跳转到单人信息段；选2-12人，跳转到多人信息段
• 所有字段填完后，用户统一提交整个表单

这个方案完全不用写代码，适合快速实现基础的分步体验。

方案2：多表单联动（提交后打开新表单，适合需要中途保存数据） #

如果必须要先提交一部分信息（比如先确认人数并保存，再收集详细信息），那就做两个独立表单，用Apps Script实现联动：

1. 先创建第一个表单：只收集人数、联系方式等基础信息
2. 创建第二个表单：收集详细的预订信息（比如每个人的姓名、证件号等）
3. 给第一个表单添加提交触发器，触发后自动生成第二个表单的预填链接（甚至把用户已经填的信息预填进去），然后通过邮件发送给用户

代码示例（提交触发器函数） #

function onFirstFormSubmit(e) {
  // 获取用户提交的人数（假设人数是表单的第二个字段，索引从0开始）
  const numberOfPeople = e.values[1];
  // 你的第二个表单ID（在表单URL里找）
  const secondFormId = "YOUR_SECOND_FORM_ID";
  const secondForm = FormApp.openById(secondFormId);
  
  // 生成预填链接，把人数自动填到第二个表单的对应字段
  const numberItem = secondForm.getItemById("YOUR_NUMBER_ITEM_ID"); // 第二个表单中人数字段的ID
  const prefilledResponse = secondForm.createResponse()
    .withItemResponse(numberItem.createResponse(numberOfPeople));
  const prefilledUrl = prefilledResponse.toPrefilledUrl();
  
  // 给用户发邮件，包含继续填写的链接
  const respondentEmail = e.response.getRespondentEmail();
  if (respondentEmail) {
    MailApp.sendEmail({
      to: respondentEmail,
      subject: "继续完成你的预订",
      body: `你好，请点击以下链接继续填写预订详细信息：\n${prefilledUrl}`
    });
  }
}

设置触发器的方法：打开第一个表单的脚本编辑器，点击左侧“触发器”图标，添加一个“表单提交”类型的触发器，选择上面的函数即可。

方案3：用Web App实现完全自定义的分步表单（体验最佳，适合需要高度定制） #

如果想要“提交第一段后立刻在当前页面显示第二段”的无缝体验，那用Google Apps Script做Web App是最优解——Web App完全由你控制前端页面，想怎么分步就怎么分步。

简单示例代码 #

前端HTML（index.html）

<!DOCTYPE html>
<html>
  <body style="max-width: 600px; margin: 2rem auto; font-family: Arial;">
    <!-- 第一步：选择人数 -->
    <div id="step1">
      <h2>预订第一步：选择人数</h2>
      <form id="step1Form">
        <label for="personCount">人数（1-12人）：</label>
        <input type="number" id="personCount" min="1" max="12" required>
        <button type="submit" style="margin-left: 1rem; padding: 0.5rem 1rem;">提交并进入下一步</button>
      </form>
    </div>

    <!-- 第二步：填写详细信息 -->
    <div id="step2" style="display: none;">
      <h2>预订第二步：填写详细信息</h2>
      <form id="step2Form">
        <label for="contactName">联系人姓名：</label>
        <input type="text" id="contactName" required><br><br>
        <label for="contactPhone">联系电话：</label>
        <input type="tel" id="contactPhone" required><br><br>
        <!-- 可以根据人数动态生成更多字段，比如循环添加姓名输入框 -->
        <button type="submit" style="padding: 0.5rem 1rem;">完成预订</button>
      </form>
    </div>

    <script>
      // 第一步提交处理
      document.getElementById("step1Form").addEventListener("submit", (e) => {
        e.preventDefault();
        const personCount = document.getElementById("personCount").value;
        
        // 把第一步数据提交到后端保存
        google.script.run.withSuccessHandler(() => {
          // 切换到第二步
          document.getElementById("step1").style.display = "none";
          document.getElementById("step2").style.display = "block";
        }).saveStep1Data(personCount);
      });

      // 第二步提交处理
      document.getElementById("step2Form").addEventListener("submit", (e) => {
        e.preventDefault();
        const contactName = document.getElementById("contactName").value;
        const contactPhone = document.getElementById("contactPhone").value;
        
        google.script.run.withSuccessHandler(() => {
          alert("预订提交成功！我们会尽快联系你~");
          window.location.reload(); // 重置表单
        }).saveStep2Data(contactName, contactPhone);
      });
    </script>
  </body>
</html>

后端脚本（Code.gs）

// 加载Web App页面
function doGet() {
  return HtmlService.createHtmlOutputFromFile('index')
    .setTitle('团队预订表单');
}

// 保存第一步数据到Google Sheet
function saveStep1Data(personCount) {
  const sheet = SpreadsheetApp.openById("YOUR_SHEET_ID").getSheetByName("Step1");
  sheet.appendRow([new Date(), personCount]);
}

// 保存第二步数据到Google Sheet
function saveStep2Data(contactName, contactPhone) {
  const sheet = SpreadsheetApp.openById("YOUR_SHEET_ID").getSheetByName("Step2");
  sheet.appendRow([new Date(), contactName, contactPhone]);
}

部署Web App的方法：点击脚本编辑器的“部署”→“新建部署”，选择“Web应用”，设置权限为“任何人，甚至匿名”（根据你的需求调整），部署后就能得到一个可以直接访问的链接。

这个方案的好处是完全自定义，用户体验流畅，还能根据人数动态生成更多输入字段，适合复杂的预订场景。

内容的提问来源于stack exchange，提问作者Claire Bannatyne