如何通过代码为Google Forms API添加自定义CSS？如何隐藏表单第二部分的谷歌标识与返回按钮？

阿华AIGC实验室

2026-5-25

1. 如何通过代码为Google Forms API添加自定义CSS？

先给你说明白：Google Forms API本身不支持直接注入自定义CSS——这个API的定位是管理表单结构（比如添加问题、修改选项、收集响应），完全碰不到前端样式层面的功能。不过别慌，咱们有两种实用的曲线救国方案，分场景来看：

场景一：你自己用这个表单（比如内部办公）

用Tampermonkey这类用户脚本工具，直接在浏览器里给表单页面加样式，步骤超简单：

安装Tampermonkey插件（Chrome/Firefox应用商店都能找到）
新建一个脚本，粘贴下面的代码，替换成你需要的自定义样式：

// ==UserScript==
// @name         自定义Google表单样式
// @match        https://docs.google.com/forms/d/e/*/viewform*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    // 延迟执行，确保页面元素加载完成
    setTimeout(() => {
        // 示例：修改表单背景色
        document.body.style.backgroundColor = "#f0f8ff";
        // 示例：隐藏谷歌底部标识
        document.querySelector(".freebirdFormviewerViewFooterImageContainer").style.display = "none";
    }, 1500);
})();

场景二：要让所有访问者看到自定义样式（对外发布）

把Google表单嵌入到用Google Apps Script搭建的Web App里，这样就能完全控制样式了：

打开Google Apps Script新建项目
新建HTML文件（命名为Index.html），内容如下：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <!-- 这里写你的自定义CSS -->
    <style>
      .freebirdFormviewerViewFooterImageContainer {
        display: none !important;
      }
      .quantumWizButtonPaperbuttonEl.freebirdFormviewerViewNavigationBackButton {
        display: none !important;
      }
      /* 示例：调整表单宽度 */
      .freebirdFormviewerViewFormCard {
        max-width: 800px !important;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <!-- 替换成你的Google表单嵌入链接 -->
    <iframe src="https://docs.google.com/forms/d/e/你的表单ID/viewform?embedded=true" width="100%" height="1000px" frameborder="0"></iframe>
  </body>
</html>

打开Code.gs文件，替换成下面的代码：

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index')
      .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

点击「部署」→「新部署」，选择「Web App」，设置权限为「任何人，甚至匿名」（可按需调整），部署后拿到的URL就是带自定义样式的表单入口。

2. 隐藏Google表单第二部分的谷歌标识和返回按钮

你之前写的myFunctioncss和onOpen函数没用，核心原因是：这些代码是在Google Forms的编辑器后台运行的，根本不会作用在用户填写表单的前端页面上——相当于你在后台改设置，完全影响不到访客看到的界面。

下面给你两种可行的解决方案：

方案一：自己用表单（用户脚本）

用Tampermonkey脚本直接在浏览器里隐藏元素：

// ==UserScript==
// @name         隐藏Google表单标识和返回按钮
// @match        https://docs.google.com/forms/d/e/*/viewform*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 延迟执行，确保页面元素加载完成
    setTimeout(() => {
        // 隐藏谷歌底部标识
        const googleLogo = document.querySelector(".freebirdFormviewerViewFooterImageContainer.freebirdFormviewerViewFooterPageBreak");
        if (googleLogo) googleLogo.style.display = "none";

        // 隐藏返回按钮
        const backButton = document.querySelector(".quantumWizButtonPaperbuttonEl.quantumWizButtonPaperbuttonFlat.quantumWizButtonPaperbutton2El2.freebirdFormviewerViewNavigationBackButton");
        if (backButton) backButton.style.display = "none";
    }, 2000);
})();

方案二：对外发布表单（Web App嵌入）

用上面第一个问题里的Google Apps Script Web App方案，在HTML的<style>标签里添加这两行CSS即可：

/* 隐藏谷歌底部标识 */
.freebirdFormviewerViewFooterImageContainer.freebirdFormviewerViewFooterPageBreak {
    display: none !important;
}

/* 隐藏返回按钮 */
.quantumWizButtonPaperbuttonEl.quantumWizButtonPaperbuttonFlat.quantumWizButtonPaperbutton2El2.freebirdFormviewerViewNavigationBackButton {
    display: none !important;
}

这样不管是你自己使用，还是访客访问你的Web App链接，都看不到这些元素了。

内容的提问来源于stack exchange，提问作者Laurence Vallette JLV CONCEPT