如何在没有 iframe 的情况下使用 Google 表单?
How to use Google Forms without iframe?
几年前,我在互联网上发现如何在联系页面中使用 Google 表单,仅使用属性提交按钮操作中的查询而不使用 iframe。现在,我再也找不到了。是否仍然可以在没有 iframe 的情况下使用 Google 表单?
我刚找到!
function postToGoogle() {
var field1 = $("input[type='radio'][name='qs1']:checked").val();
var field2 = $('#feed').val();
$.ajax({
url: "https://docs.google.com/forms/d/e/1FAIpQLSdjOTKRb7YiWi8OGPq6M6CRL0TpuAsUKacKp2XgruMbIp4wzg/formResponse",
data: {
"entry.924752166": field1,
"entry.997497831": field2
},
type: "POST",
dataType: "xml",
statusCode: {
0: function() {
//Success message
},
200: function() {
//Success Message
}
}
});
}
/*
$(document).ready(function() {
$('#form').submit(function() {
postToGoogle();
return false;
});
});
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<strong>Test Google Form</strong>
<form id="form" target="_self" onsubmit="" action="javascript: postToGoogle()">
<fieldset>
<label>Question 1</label>
<input id="qs1_op_1" type="radio" value="Yes" name="qs1" />
<input id="qs1_op_2" type="radio" value="No" name="qs1" />
</fieldset>
<fieldset>
<label>Text</label>
<textarea id="feed" name="feed"></textarea>
</fieldset>
<div style="width: 100%; display: block; float: right;">
<button id="send" type="submit">
Send
</button>
</div>
</form>
<br /><br />
The <a href="https://docs.google.com/spreadsheets/d/1bVeLfK2gm6emaGRKHnMllpeb_P4HwwZoIfZB5MCcyZg/pubhtml">Result</a> takes few minutes to be shown, but it is sent to the google sheet instantaneously.
<br /><br />
它在 CodePen 中工作。
<div class="container_form">
<form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSdQFctGBxto0NgsBi9R9dSXKT8Y0bUirmHjcisfnxnraMLeTw/formResponse">
<div class="field">
<label class="question" for="Nom">Nom</label>
<input class="choice" type="text" name="entry.1490810163" required placeholder="Votre nom">
</div>
<div class="field">
<label class="question" for="">Prénom</label>
<input class="choice" type="text" name="entry.1335381530" required placeholder="Votre nom">
</div>
<div class="field">
<label class="question" >Quelle est ta promotion ?</label>
<div class="choice">
<div class="radio_align">
<input type="radio" id="" name="entry.2014955126" value="Poincaré" required>
<label for="entry.2014955126">Poincaré</label>
</div>
<div class="radio_align">
<input type="radio" id="" name="entry.2014955126" value="Onsager" required>
<label for="entry.2014955126">Onsager</label>
</div>
<div class="radio_align">
<input type="radio" id="" name="entry.2014955126" value="Noether" required>
<label for="entry.2014955126">Noether</label>
</div>
<div class="radio_align">
<input type="radio" id="" name="entry.2014955126" value="Meitner" required>
<label for="entry.2014955126">Meitner</label>
</div>
<div class="radio_align">
<input type="radio" id="" name="entry.2014955126" value="Langevin" required>
<label for="entry.2014955126">Langevin</label>
</div>
<div class="radio_align">
<input type="radio" id="" name="entry.2014955126" value="Ancien(ne) étudiant(e) ESEO" required>
<label for="entry.2014955126">Ancien(ne) étudiant(e) ESEO</label>
</div>
<div class="radio_align">
<input type="radio" id="" name="entry.2014955126" value="__other_option__" required>
<label for="entry.2014955126">Ancien(ne) étudiant(e) ESEO</label>
<input class="lign" type="text" name="entry.2014955126.other_option_response">
</div>
</div>
</div>
<div class="field">
<label class="question" for="">Quel âge as-tu ? </label>
<input class="choice" type="text" name="entry.1170833208" required placeholder="Votre age">
</div>
<div class="field">
<label class="question" for="">As-tu déjà randonné en montagne ?</label>
<div class="choice">
<div class="radio_align">
<input type="radio" id="" name="entry.1404980088" value="Oui à balle je surkiffe" required>
<label for="entry.1404980088">Oui à balle je surkiffe</label>
</div>
<div class="radio_align">
<input type="radio" id="" name="entry.1404980088" value="Oui quelques fois" required>
<label for="entry.1404980088">Oui quelques fois</label>
</div>
<div class="radio_align">
<input type="radio" id="" name="entry.1404980088" value="Jamais ça sera une grande première" required>
<label for="entry.1404980088">Jamais ça sera une grande première</label>
</div>
</div>
</div>
<div class="field">
<label class="question" for="">Est-ce que tu follow Electrond'arbre sur les réseaux ?</label>
<div class="choice">
<div class="radio_align">
<input type="radio" id="" name="entry.284067721" value="Évidemment d'ailleurs le resp com gère trop de ouf (il est célibataire)" required>
<label for="entry.284067721">Évidemment d'ailleurs le resp com gère trop de ouf</label>
</div>
<div class="radio_align">
<input type="radio" id="" name="entry.284067721" value="Non (éliminatoire)" required>
<label for="entry.284067721">Non (éliminatoire)</label>
</div>
</div>
</div>
<div class="field">
<label class="question" for="entry.1600021664">En quelques mots, peux-tu nous décrire ta motivation pour réaliser ce trek avec nous ? </label>
<input class="choice" type="textarea" name="entry.1600021664" required placeholder="Votre réponse">
</input>
</div>
<input class="button_form" type="submit">
</form>
</div>
这个post是旧的,既然有人问过它是怎么做的,可能对某些人有用。
我不确定它是否仍然有效。 Google 更新他们的服务,
所以这是它的工作原理:
您可以使用此在线表单生成器,on W3chools,在新选项卡上打开它。
从 google 驱动器创建一个 google 表单,完成添加输入后,单击预览表单,单击加载表单页面的查看源页面,让它在新标签页上打开。
在 google 表单的源页面中搜索 entry. ,您应该会找到类似于 entry.1600284689 的内容,注意匹配输入名称条目之前的文本,例如名称、姓氏或电子邮件,复制数字。
从上面的 w3school 转到表单 link,然后搜索 entry.,您应该会在左侧面板中找到匹配的输入,将其粘贴到此处,对另一个输入名称执行相同操作。
在您的表单预览源代码中搜索:
现在测试表单,填写表单并单击提交,如果所有内容都正确插入,您应该在 google 表单中获得提交的信息。当测试正常时,从左侧面板复制整个 HTML 代码,将其保存在文本文件中,即可在您的页面或页面的侧边栏中使用。
Youtube 上有这方面的视频,搜索一下就会找到。
希望有用。
几年前,我在互联网上发现如何在联系页面中使用 Google 表单,仅使用属性提交按钮操作中的查询而不使用 iframe。现在,我再也找不到了。是否仍然可以在没有 iframe 的情况下使用 Google 表单?
我刚找到!
function postToGoogle() {
var field1 = $("input[type='radio'][name='qs1']:checked").val();
var field2 = $('#feed').val();
$.ajax({
url: "https://docs.google.com/forms/d/e/1FAIpQLSdjOTKRb7YiWi8OGPq6M6CRL0TpuAsUKacKp2XgruMbIp4wzg/formResponse",
data: {
"entry.924752166": field1,
"entry.997497831": field2
},
type: "POST",
dataType: "xml",
statusCode: {
0: function() {
//Success message
},
200: function() {
//Success Message
}
}
});
}
/*
$(document).ready(function() {
$('#form').submit(function() {
postToGoogle();
return false;
});
});
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<strong>Test Google Form</strong>
<form id="form" target="_self" onsubmit="" action="javascript: postToGoogle()">
<fieldset>
<label>Question 1</label>
<input id="qs1_op_1" type="radio" value="Yes" name="qs1" />
<input id="qs1_op_2" type="radio" value="No" name="qs1" />
</fieldset>
<fieldset>
<label>Text</label>
<textarea id="feed" name="feed"></textarea>
</fieldset>
<div style="width: 100%; display: block; float: right;">
<button id="send" type="submit">
Send
</button>
</div>
</form>
<br /><br />
The <a href="https://docs.google.com/spreadsheets/d/1bVeLfK2gm6emaGRKHnMllpeb_P4HwwZoIfZB5MCcyZg/pubhtml">Result</a> takes few minutes to be shown, but it is sent to the google sheet instantaneously.
<br /><br />
它在 CodePen 中工作。
<div class="container_form">
<form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSdQFctGBxto0NgsBi9R9dSXKT8Y0bUirmHjcisfnxnraMLeTw/formResponse">
<div class="field">
<label class="question" for="Nom">Nom</label>
<input class="choice" type="text" name="entry.1490810163" required placeholder="Votre nom">
</div>
<div class="field">
<label class="question" for="">Prénom</label>
<input class="choice" type="text" name="entry.1335381530" required placeholder="Votre nom">
</div>
<div class="field">
<label class="question" >Quelle est ta promotion ?</label>
<div class="choice">
<div class="radio_align">
<input type="radio" id="" name="entry.2014955126" value="Poincaré" required>
<label for="entry.2014955126">Poincaré</label>
</div>
<div class="radio_align">
<input type="radio" id="" name="entry.2014955126" value="Onsager" required>
<label for="entry.2014955126">Onsager</label>
</div>
<div class="radio_align">
<input type="radio" id="" name="entry.2014955126" value="Noether" required>
<label for="entry.2014955126">Noether</label>
</div>
<div class="radio_align">
<input type="radio" id="" name="entry.2014955126" value="Meitner" required>
<label for="entry.2014955126">Meitner</label>
</div>
<div class="radio_align">
<input type="radio" id="" name="entry.2014955126" value="Langevin" required>
<label for="entry.2014955126">Langevin</label>
</div>
<div class="radio_align">
<input type="radio" id="" name="entry.2014955126" value="Ancien(ne) étudiant(e) ESEO" required>
<label for="entry.2014955126">Ancien(ne) étudiant(e) ESEO</label>
</div>
<div class="radio_align">
<input type="radio" id="" name="entry.2014955126" value="__other_option__" required>
<label for="entry.2014955126">Ancien(ne) étudiant(e) ESEO</label>
<input class="lign" type="text" name="entry.2014955126.other_option_response">
</div>
</div>
</div>
<div class="field">
<label class="question" for="">Quel âge as-tu ? </label>
<input class="choice" type="text" name="entry.1170833208" required placeholder="Votre age">
</div>
<div class="field">
<label class="question" for="">As-tu déjà randonné en montagne ?</label>
<div class="choice">
<div class="radio_align">
<input type="radio" id="" name="entry.1404980088" value="Oui à balle je surkiffe" required>
<label for="entry.1404980088">Oui à balle je surkiffe</label>
</div>
<div class="radio_align">
<input type="radio" id="" name="entry.1404980088" value="Oui quelques fois" required>
<label for="entry.1404980088">Oui quelques fois</label>
</div>
<div class="radio_align">
<input type="radio" id="" name="entry.1404980088" value="Jamais ça sera une grande première" required>
<label for="entry.1404980088">Jamais ça sera une grande première</label>
</div>
</div>
</div>
<div class="field">
<label class="question" for="">Est-ce que tu follow Electrond'arbre sur les réseaux ?</label>
<div class="choice">
<div class="radio_align">
<input type="radio" id="" name="entry.284067721" value="Évidemment d'ailleurs le resp com gère trop de ouf (il est célibataire)" required>
<label for="entry.284067721">Évidemment d'ailleurs le resp com gère trop de ouf</label>
</div>
<div class="radio_align">
<input type="radio" id="" name="entry.284067721" value="Non (éliminatoire)" required>
<label for="entry.284067721">Non (éliminatoire)</label>
</div>
</div>
</div>
<div class="field">
<label class="question" for="entry.1600021664">En quelques mots, peux-tu nous décrire ta motivation pour réaliser ce trek avec nous ? </label>
<input class="choice" type="textarea" name="entry.1600021664" required placeholder="Votre réponse">
</input>
</div>
<input class="button_form" type="submit">
</form>
</div>
这个post是旧的,既然有人问过它是怎么做的,可能对某些人有用。 我不确定它是否仍然有效。 Google 更新他们的服务, 所以这是它的工作原理:
您可以使用此在线表单生成器,on W3chools,在新选项卡上打开它。
从 google 驱动器创建一个 google 表单,完成添加输入后,单击预览表单,单击加载表单页面的查看源页面,让它在新标签页上打开。
在 google 表单的源页面中搜索 entry. ,您应该会找到类似于 entry.1600284689 的内容,注意匹配输入名称条目之前的文本,例如名称、姓氏或电子邮件,复制数字。
从上面的 w3school 转到表单 link,然后搜索 entry.,您应该会在左侧面板中找到匹配的输入,将其粘贴到此处,对另一个输入名称执行相同操作。
在您的表单预览源代码中搜索:
现在测试表单,填写表单并单击提交,如果所有内容都正确插入,您应该在 google 表单中获得提交的信息。当测试正常时,从左侧面板复制整个 HTML 代码,将其保存在文本文件中,即可在您的页面或页面的侧边栏中使用。 Youtube 上有这方面的视频,搜索一下就会找到。
希望有用。