Go High Level多页表单数据汇总展示及编辑功能实现问询

需求概述 #

需要实现多页表单的提交数据汇总展示，支持用户按需编辑修改信息。表单基于Go High Level搭建，通过JS脚本跨页面收集数据；由于表单字段无ID，全部通过name属性获取字段值。

表单页面1（基础信息页） #

收集地址、房屋面积、宠物信息，点击按钮后将数据存入sessionStorage并跳转至页面2。

document.addEventListener("DOMContentLoaded", function() {
    const nextButton = document.querySelector('button[type="button"]');
    const firstForm = document.getElementById("form-RNThrQSFOF");

    nextButton.addEventListener("click", function() {
        const address = encodeURIComponent(document.querySelector('[name="address"]').value);
        const homeSize = encodeURIComponent(document.querySelector('[name="m4qPNC8AsUoECkoLubyx"]').value);
        const pets = encodeURIComponent(document.querySelector('[name="x99Laa44rseuNoF4kLjF"]').value);

        // 存储数据到sessionStorage
        sessionStorage.setItem("address", address);
        sessionStorage.setItem("m4qPNC8AsUoECkoLubyx", homeSize);
        sessionStorage.setItem("x99Laa44rseuNoF4kLjF", pets);

        // 跳转到第二个表单页面
        window.location.href = "https://app.gohighlevel.com/v2/preview/MNSlTy4KrAdcx9kcxYPk";
    });
});

表单页面2（服务信息页） #

预填充之前保存的数据（若有），收集服务类型、频率等信息，提交后存入sessionStorage并跳转至汇总页。

document.addEventListener("DOMContentLoaded", function() {
    const submitButton = document.querySelector('button[type="button"]');
    // 注意：getElementById无需加#，此处代码存在语法问题
    const secondForm = document.getElementById("#form-mBYK30hyM3");

    // 从sessionStorage预填充表单字段
    document.getElementById("serviceType").value = decodeURIComponent(sessionStorage.getItem("serviceType")) || "";
    document.getElementById("frequency").value = decodeURIComponent(sessionStorage.getItem("frequency")) || "";
    document.getElementById("lastDeepClean").value = decodeURIComponent(sessionStorage.getItem("lastDeepClean")) || "";
    document.getElementById("extras").value = decodeURIComponent(sessionStorage.getItem("extras")) || "";
    document.getElementById("needBy").value = decodeURIComponent(sessionStorage.getItem("needBy")) || "";

    submitButton.addEventListener("click", function() {
        // 收集表单字段数据
        const serviceType = encodeURIComponent(document.querySelector('[name="IzpbXJiSDYeispp4N21S"]').value);
        const frequency = encodeURIComponent(document.querySelector('[name="5Q7ElqqUIG1gH5mGTz5V"]').value);
        const lastDeepClean = encodeURIComponent(document.querySelector('[name="Lk7UNY3FrFQ0CjFAUdKL"]').value);
        const extras = encodeURIComponent(document.getElementById("Blinds_ZBpBtAIrq0dO1UEbmYGm_0_4g1fmuwqhwq").value);
        const needBy = encodeURIComponent(document.querySelector('[name="d8FrRRXd7e0mFIocnORo"]').value);

        // 存储数据到sessionStorage
        sessionStorage.setItem("IzpbXJiSDYeispp4N21S", serviceType);
        sessionStorage.setItem("5Q7ElqqUIG1gH5mGTz5V", frequency);
        sessionStorage.setItem("Lk7UNY3FrFQ0CjFAUdKL", lastDeepClean);
        sessionStorage.setItem("Blinds_ZBpBtAIrq0dO1UEbmYGm_0_4g1fmuwqhwq", extras);
        sessionStorage.setItem("d8FrRRXd7e0mFIocnORo", needBy);

        // 跳转到汇总页面
        window.location.href = "https://app.gohighlevel.com/v2/preview/AFrD1F0q5VGW6PmVDJVG";
    });
});  

表单页面3（视频提交页） #

该页面用于用户提交视频，目前暂无对应实现代码。

表单页面4（数据汇总页） #

展示所有收集到的表单数据及视频，从sessionStorage读取数据并渲染到页面中。

样式与HTML结构 #

<style>
    #summary-container{
        color: #000000;
        font-family: "Inter", Sans-serif;
        font-size: 16px;
        font-weight: 400;
        padding: 1% 1% 1% 1%;
        background-color: #EDEDED;
        border-radius: 10px;
        margin-left: 8%;
        margin-right: 8%;
        align-content: center;
    }
</style>
<div id="summary-container">
  <div>
    <li><strong>Address:</strong> <span name="address"></span></li>
    <li><strong>Home size:</strong> <span name="m4qPNC8AsUoECkoLubyx"></span></li>
    <li><strong>Pets:</strong> <span name="x99Laa44rseuNoF4kLjF"></span></li>
    <li><strong>Service Type:</strong> <span name="IzpbXJiSDYeispp4N21S"></span></li>
    <li><strong>Frequency:</strong> <span name="5Q7ElqqUIG1gH5mGTz5V"></span></li>
    <li><strong>Last Deep Clean:</strong> <span name="Lk7UNY3FrFQ0CjFAUdKL"></span></li>
    <li><strong>Extras:</strong> <span name="Blinds_ZBpBtAIrq0dO1UEbmYGm_0_4g1fmuwqhwq"></span></li>
    <li><strong>Need By:</strong> <span name="d8FrRRXd7e0mFIocnORo"></span></li>
    <video class="custom-file-upload" controls="">
      <source id="summaryVideoSource" type="video/mp4">
      Your browser does not support the video tag.
    </video>
  </div>
</div>

数据渲染脚本 #

document.addEventListener("DOMContentLoaded", function() {
  // 从sessionStorage读取数据
  const address = decodeURIComponent(sessionStorage.getItem("address"));
  const homeSize = decodeURIComponent(sessionStorage.getItem("m4qPNC8AsUoECkoLubyx"));
  const pets = decodeURIComponent(sessionStorage.getItem("x99Laa44rseuNoF4kLjF"));
  const serviceType = decodeURIComponent(sessionStorage.getItem("serviceType"));
  const frequency = decodeURIComponent(sessionStorage.getItem("5Q7ElqqUIG1gH5mGTz5V"));
  const lastDeepClean = decodeURIComponent(sessionStorage.getItem("lastDeepClean"));
  const extras = decodeURIComponent(sessionStorage.getItem("extras"));
  const needBy = decodeURIComponent(sessionStorage.getItem("d8FrRRXd7e0mFIocnORo"));
  const videoUrl = sessionStorage.getItem("videoUrl"); // 提交的视频URL

  // 将数据填充到对应元素
  document.querySelector('[name="address"]').textContent = address;
  document.querySelector('[name="m4qPNC8AsUoECkoLubyx"]').textContent = homeSize;
  document.querySelector('[name="x99Laa44rseuNoF4kLjF"]').textContent = pets;
  document.querySelector('[name="IzpbXJiSDYeispp4N21S"]').textContent = serviceType;
  document.querySelector('[name="5Q7ElqqUIG1gH5mGTz5V"]').textContent = frequency;
  document.querySelector('[name="Lk7UNY3FrFQ0CjFAUdKL"]').textContent = lastDeepClean;
  document.querySelector('[name="Blinds_ZBpBtAIrq0dO1UEbmYGm_0_4g1fmuwqhwq"]').textContent = extras;
  document.querySelector('[name="d8FrRRXd7e0mFIocnORo"]').textContent = needBy;

  const videoElement = document.querySelector('.custom-file-upload'); // 通过类名选择视频元素

  if (videoElement) {
    const videoSource = document.createElement('source');
    videoSource.src = videoUrl;
    videoSource.type = 'video/mp4';
    videoElement.appendChild(videoSource);
  }
});

关键优化提示 #

1. 页面2DOM选择错误：document.getElementById("#form-mBYK30hyM3")中getElementById无需加#，应改为document.getElementById("form-mBYK30hyM3")。
2. 预填充逻辑不匹配：页面2预填充时使用getElementById("serviceType")，但实际字段通过name属性获取，需统一用document.querySelector('[name="IzpbXJiSDYeispp4N21S"]')对应存储的key。
3. 视频提交页补充：需为页面3添加视频上传监听逻辑，将视频URL存入sessionStorage.setItem("videoUrl", 视频地址)，才能在汇总页正常展示。
4. 编辑功能实现：若要支持编辑，可将汇总页的span替换为input、select等表单控件，填充现有数据后添加保存按钮，点击时更新sessionStorage并可跳转回对应表单页。

内容的提问来源于stack exchange，提问作者Laura Sofía Luna