如何在Google Form中添加实时显示的日期时间戳？

阿华AIGC实验室

2026-5-21

How to Add a Live Clock to Your Google Form Interface

Awesome question! Native Google Forms doesn’t let you slap a live clock directly onto the form interface by default—those built-in options only handle timestamping submissions, not displaying real-time time to users. But with a little Google Apps Script magic, you can totally build a wrapper that shows a live clock above your form. Here’s how to do it step by step:

Step 1: Grab Your Form’s Embed Code

Open your Google Form, hit the Send button in the top-right corner
Switch to the Embed tab, copy the full iframe code (it’ll start with <iframe src="https://docs.google.com/forms/d/e/..." and end with </iframe>)

Step 2: Set Up a New Apps Script Project

Head to Google Apps Script (you can get there via Google Drive > New > More > Google Apps Script, or just type script.google.com in your browser)
Delete the default code in Code.gs, then paste this:

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index')
    .setTitle('Form with Live Clock');
}

Step 3: Create the HTML Wrapper with Clock

Click the + icon next to "Files" on the left, choose HTML
Name the file Index (make sure the spelling matches exactly)
Paste the code below, replacing the sample iframe with the one you copied in Step 1:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      .live-clock {
        font-family: Arial, sans-serif;
        font-size: 24px;
        font-weight: bold;
        color: #202124;
        text-align: center;
        padding: 15px;
        background-color: #f8f9fa;
        border-radius: 8px;
        margin: 20px auto;
        max-width: 600px;
      }
      iframe {
        display: block;
        margin: 0 auto;
        border: none;
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="live-clock" id="clock"></div>
    <!-- Replace this iframe with your form's embed code -->
    <iframe src="https://docs.google.com/forms/d/e/YOUR_FORM_ID/viewform?embedded=true" width="640" height="800"></iframe>

    <script>
      function updateClock() {
        const now = new Date();
        // Customize the date/time format here if you want
        const formattedTime = now.toLocaleString('en-US', {
          year: 'numeric',
          month: 'long',
          day: 'numeric',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit',
          hour12: true
        });
        document.getElementById('clock').textContent = `Current Time: ${formattedTime}`;
      }

      // Start the clock and update every second
      updateClock();
      setInterval(updateClock, 1000);
    </script>
  </body>
</html>

Step 4: Deploy the Web App

Click Deploy in the top-right > New deployment
Under Type, pick Web app
Set Execute as to Your account
Set Who has access to Anyone, even anonymous (adjust this if you need to restrict access to specific people)
Hit Deploy, authorize the script when prompted, then copy the generated web app URL

Now when users open this web app URL, they’ll see a live-updating clock at the top, followed by your Google Form. All submissions still go to your original form’s response sheet, complete with the usual timestamp.

Quick Customization Tips:

Tweak the clock’s look by editing the CSS in the Index.html file (change font, colors, size, or move it to a different position)
If you update your form later, just replace the iframe code in Index.html and redeploy the web app
Note: The original Google Forms link won’t show the clock—users need to use the web app URL you created

内容的提问来源于stack exchange，提问作者lee huang