Question

我想在我的网站上有一个谷歌表格，并调整它的外观。我找到了这样做的说明here。相应的代码如下所示，也可以看到here（使用CSS和结果）。

我想拥有自己的确认页面（mywebsite.com/signup-confirmation）。 comment以下面的方式描述了它，但我不确定这些更改的确切位置。

防止表单重定向到新页面。我添加到表单中，   目标= “无目标”

然后我创建了一个iframe iframe src =“＃”id =“no-target”   name =“no-target”style =“visibility：hidden”＆gt;＆lt; / iframe中

现在表单没有重定向提交你可以更改位置   javascript window.location.assign的网址（   window.location.hostname;

^会将您重定向到主页

来自网站示例的代码：

<header>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css-signup.css">

  <div class="wrapper">
    <!-- TITLE YOUR FORM -->
    <h1>Health Survey</h1>
    <h2>Diagnostic for applicants to our fitness program.</h2>
  </div>
</header>

<section>
  <div class="wrapper">
    <!-- START CODING YOUR FORM -->
    <form action="https://docs.google.com/a/ladieslearningcode.com/forms/d/e/1FAIpQLSddBVO983YSbAXB7yWkg9Z69CyrY8AAQvUjlhJWtm-7LvdOpQ/formResponse">

    <!-- MUTLIPLE CHOICE -->
    <p>How often do you exercise?</p>
    <div class="input-wrap"><input type="radio" name="entry.1177013199" id="e1" value="1 day a week"/>
    <label for="e1">1 day a week</label></div>
    <div class="input-wrap"><input type="radio" name="entry.1177013199" id="e2" value="2-3 days a week"/>
    <label for="e2">2-3 days a week</label></div>
    <div class="input-wrap"><input type="radio" name="entry.1177013199" id="e3" value="4-5 days a week"/>
    <label for="e3">4-5 days a week</label></div>
    <div class="input-wrap"><input type="radio" name="entry.1177013199" id="e4" value="6+ days a week"/>
    <label for="e4">6+ days a week</label></div>

    <!-- CHECKBOXES -->
    <p>Do you have any food allergies?</p>
    <div class="input-wrap"><input type="checkbox" name="entry.359931602" id="a1" value="Milk"/>
    <label for="a1">Milk</label></div>
    <div class="input-wrap"><input type="checkbox" name="entry.359931602" id="a2" value="Eggs"/>
    <label for="a2">Eggs</label></div>
    <div class="input-wrap"><input type="checkbox" name="entry.359931602" id="a3" value="Peanuts">
    <label for="a3">Peanuts</label></div>
    <div class="input-wrap"><input type="checkbox" name="entry.359931602" id="a4" value="Wheat">
    <label for="a4">Wheat</label></div>
    <div class="input-wrap"><input type="checkbox" name="entry.359931602" id="a5" value="Soy">
    <label for="a5">Soy</label></div>

    <!-- DROPDOWN -->
    <p>What is your favourite food group?</p>
    <div class="input-wrap select-box">
      <select name="entry.1781742467">
        <option selected disabled>Choose</option>
        <option value="Fruit">Fruit</option>
        <option value="Vegetables">Vegetables</option>
        <option value="Grain">Grain</option>
        <option value="Meat">Meat</option>
        <option value="Dairy">Dairy</option>
      </select>
    </div>

    <!-- SINGLE LINE TEXT FIELD -->
    <label for="comfort">What is your go-to comfort food?</label>
    <input name="entry.1169089770" type="text" id="comfort"/>

    <!-- MULTI-LINE TEXT FIELD -->
    <label for="explain">Explain why you want to improve your physical health.</label>
    <textarea name="entry.1175247585" id="explain"/></textarea>

    <!-- LINEAR SCALE "SLIDER" -->
    <label for="explain">Rate your current physical health.</label>
    <input name="entry.1672382864" type="range" min="1" max="5" step="1">

    <!-- DATE INPUT -->
    <label for="explain">When are you available to start training?</label>
    <input name="entry.246017384" type="date">

    <!-- TIME INPUT -->
    <label for="explain">What time of day is best to connect?</label>
    <input name="entry.1990206646" type="time">

    <!-- SUBMIT BUTTON -->
    <input class="button" type="submit" value="Submit">
  </form>
</div>

Answer 1

您需要在表单标记前添加这段代码：

<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted)  {window.location='/thanks.html';}"></iframe>

这在您的表单标签中：

target="hidden_iframe" onsubmit="submitted=true;"

一起看起来像这样（例子）：

<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted)  {window.location='/thanks.html';}"></iframe>

<form class="form" action="LINK" method="POST" target="hidden_iframe" onsubmit="submitted=true;">
    <label>Insert label</label>
    <input name="entry.xxx" type="text" required />
    <input type="submit" value="Submit" />
</form>

带有HTML和个人确认页面的Google表单

1 个答案: