自定义Google Forms多段提交异常：仅接收第一部分答案

问题背景 #

跟着视频制作了自定义Google Forms页面，将所有问题通过entry.xxxxxxx值绑定到单选按钮、复选框和文本域。提交后仅能收到第一部分答案，原表单第三题的选项决定是否进入包含附加问题的第二部分，但自定义页面中第二部分的答案始终无法提交——即便POST请求包含这些字段，只有官方表单能正常提交全部内容。

测试环境说明 #

• 测试表单：带分支逻辑的Google表单，第三题选择特定选项后显示附加问题
• 答案接收表格：用于查看提交结果的Google表格
• 自定义前端：复现问题的HTML页面

自定义页面代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Survey Form</title>
    <style>
        /* Hide the additional question in the beginning */
        #additional-question {
            display: none;
        }
    </style>
</head>
<body>
    <form action="https://docs.google.com/forms/d/e/1FAIpQLSd4yBJhJQSkAk_SqGsmZYFRqLFZbYksrfmSWJhZTb66Ipoi6w/formResponse" method="POST">

        <!-- Question 1 with checkboxes -->
        <h3>Question 1</h3>
        <input type="checkbox" name="entry.593249009" value="Answer 1"> Answer 1<br>
        <input type="checkbox" name="entry.593249009" value="Answer 2"> Answer 2<br>
        <input type="checkbox" name="entry.593249009" value="Answer 3"> Answer 3<br>

        <!-- Question 2: Open-ended -->
        <h3>Question 2</h3>
        <textarea name="entry.817437226" rows="4" cols="50" placeholder="Type your answer here..."></textarea><br>

        <!-- Question 3 with radio buttons. If "Answer 1" is picked, an additional question appears. This corresponds to Google Forms' second section with questions. If not, the form must be submitted only with section 1's answers.-->

        <h3>Question 3</h3>
        <input type="radio" name="entry.69082139" id="option1" value="Answer 1 (IF THIS ANSWER IS PICKED, THE SURVEY PROCEEDS TO THE NEXT SECTION WITH ADDITIONAL QUESTIONS. ELSE, THE SURVEY IS SUBMITTED)"> Answer 1<br>
        <input type="radio" name="entry.69082139" value="Answer 2"> Answer 2<br>
        <input type="radio" name="entry.69082139" value="Answer 3"> Answer 3<br>
        <input type="radio" name="entry.69082139" value="Answer 4"> Answer 4<br>
        <input type="radio" name="entry.69082139" value="Answer 5"> Answer 5<br>
        
        <div id="additional-question">
            <!-- Additional Question with checkboxes -->
            <h3>Additional Question</h3>
            <input type="checkbox" name="entry.1107634309" value="Additional Answer 1"> Additional Answer 1<br>
            <input type="checkbox" name="entry.1107634309" value="Additional Answer 2"> Additional Answer 2<br>
            <input type="checkbox" name="entry.1107634309" value="Additional Answer 3"> Additional Answer 3<br>
        </div>

        <!-- Submit Button -->
        <br><input type="submit" value="Submit">
    </form>

    <script>
        // Get the elements
        const option1 = document.getElementById('option1');
        const additionalQuestion = document.getElementById('additional-question');

        // Add an event listener for the radio button selection. Make the additional question appear if the first answer of the third question is picked.
        document.querySelectorAll('input[name="entry.69082139"]').forEach(radio => {
            radio.addEventListener('change', function() {
                if (option1.checked) {
                    additionalQuestion.style.display = 'block';
                } else {
                    additionalQuestion.style.display = 'none';
                }
            });
        });
    </script>
</body>
</html>

问题核心 #

所有字段的name和value均与官方表单对应，POST请求也包含附加问题的字段，但提交后附加问题的答案始终未出现在接收表格中。

原因分析 #

Google Forms的分支逻辑（页面跳转）会在官方表单中生成隐藏的导航字段，自定义表单缺少该字段时，Google后端会默认仅处理第一部分内容，忽略后续分支的字段。

具体来说，当在官方表单中进入第二部分时，页面会自动添加名为pageHistory的隐藏字段，值为0,1（代表从第0页跳转至第1页）。若无此字段，后端会判定仅提交了第一部分内容，直接丢弃第二部分的字段数据。

解决方案 #

在自定义表单中添加pageHistory隐藏字段，并根据用户选择动态修改其值：

1. 在<form>标签内插入隐藏字段：

<input type="hidden" name="pageHistory" id="pageHistory" value="0">

2. 修改JavaScript逻辑，当用户选择第三题的Answer 1时，设置pageHistory值为0,1；否则保持为0：

document.querySelectorAll('input[name="entry.69082139"]').forEach(radio => {
    radio.addEventListener('change', function() {
        const pageHistoryInput = document.getElementById('pageHistory');
        if (option1.checked) {
            additionalQuestion.style.display = 'block';
            pageHistoryInput.value = '0,1';
        } else {
            additionalQuestion.style.display = 'none';
            pageHistoryInput.value = '0';
        }
    });
});

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Survey Form</title>
    <style>
        #additional-question {
            display: none;
        }
    </style>
</head>
<body>
    <form action="https://docs.google.com/forms/d/e/1FAIpQLSd4yBJhJQSkAk_SqGsmZYFRqLFZbYksrfmSWJhZTb66Ipoi6w/formResponse" method="POST">
        <!-- 添加pageHistory隐藏字段 -->
        <input type="hidden" name="pageHistory" id="pageHistory" value="0">

        <h3>Question 1</h3>
        <input type="checkbox" name="entry.593249009" value="Answer 1"> Answer 1<br>
        <input type="checkbox" name="entry.593249009" value="Answer 2"> Answer 2<br>
        <input type="checkbox" name="entry.593249009" value="Answer 3"> Answer 3<br>

        <h3>Question 2</h3>
        <textarea name="entry.817437226" rows="4" cols="50" placeholder="Type your answer here..."></textarea><br>

        <h3>Question 3</h3>
        <input type="radio" name="entry.69082139" id="option1" value="Answer 1 (IF THIS ANSWER IS PICKED, THE SURVEY PROCEEDS TO THE NEXT SECTION WITH ADDITIONAL QUESTIONS. ELSE, THE SURVEY IS SUBMITTED)"> Answer 1<br>
        <input type="radio" name="entry.69082139" value="Answer 2"> Answer 2<br>
        <input type="radio" name="entry.69082139" value="Answer 3"> Answer 3<br>
        <input type="radio" name="entry.69082139" value="Answer 4"> Answer 4<br>
        <input type="radio" name="entry.69082139" value="Answer 5"> Answer 5<br>
        
        <div id="additional-question">
            <h3>Additional Question</h3>
            <input type="checkbox" name="entry.1107634309" value="Additional Answer 1"> Additional Answer 1<br>
            <input type="checkbox" name="entry.1107634309" value="Additional Answer 2"> Additional Answer 2<br>
            <input type="checkbox" name="entry.1107634309" value="Additional Answer 3"> Additional Answer 3<br>
        </div>

        <br><input type="submit" value="Submit">
    </form>

    <script>
        const option1 = document.getElementById('option1');
        const additionalQuestion = document.getElementById('additional-question');
        const pageHistoryInput = document.getElementById('pageHistory');

        document.querySelectorAll('input[name="entry.69082139"]').forEach(radio => {
            radio.addEventListener('change', function() {
                if (option1.checked) {
                    additionalQuestion.style.display = 'block';
                    pageHistoryInput.value = '0,1';
                } else {
                    additionalQuestion.style.display = 'none';
                    pageHistoryInput.value = '0';
                }
            });
        });
    </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Мартин Дойнов