Google Forms: envoyer des données à une feuille de calcul
Comment puis-je envoyer les données d'un formulaire Web à un tableur Google? J'ai créé un formulaire avec Google Drive, mais pour pouvoir utiliser un CSS personnalisé, je dois copier la balise de formulaire.
Dans mon cas, c’est ce que Google a généré pour le comportement du bouton d’envoi.
<form action="https://docs.google.com/forms/d/113H_71nd98TWE0bByjHYNpnC-
oVA6OBDWtppU30rBrU/formResponse" method="POST" id="ss-form" target="_self" onsubmit="">
Toutefois, je souhaite publier les données de mon formulaire conçu sur le tableur de réponse au formulaire Google ci-dessus. Voici mon code de formulaire (en utilisant Bootstrap 3):
<form class="form-horizontal" role="form" id="ftk-contact">
<h4>Get in touch with us now</h4>
<div class="form-group">
<label for="inputType" class="col-lg-2 control-label">Type of Inquiry</label>
<div class="col-lg-10">
<select class="form-control" id="inputType">
<option>Request a Quotation</option>
<option>Request a Bluebook</option>
<option>General Inquiry</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputName" class="col-lg-2 control-label">Name *</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputName" placeholder="Your Name">
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Email *</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="inputEmail" placeholder="Your Email">
</div>
</div>
<div class="form-group">
<label for="inputCompany" class="col-lg-2 control-label">Company</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputCompany" placeholder="Your Company Name">
</div>
</div>
<div class="form-group">
<label for="message" class="col-lg-2 control-label">Message *</label>
<div class="col-lg-10">
<textarea class="form-control" rows="5" placeholder="Your Message"></textarea>
</div>
</div>
<div class="form-group">
<label for="inputPhone" class="col-lg-2 control-label">Phone</label>
<div class="col-lg-10">
<input type="tel" class="form-control" id="inputPhone" placeholder="Your Phone Number">
</div>
</div>
<div class="form-group">
<label for="inputWeb" class="col-lg-2 control-label">URL</label>
<div class="col-lg-10">
<input type="url" class="form-control" id="inputWeb" placeholder="Your Website URL">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-primary btn-lg">Send your Inquiry now</button>
</div>
</div>
</form>
Lorsque vous utilisez l'action de formulaire Google ci-dessus = ..., je suis amené au formulaire Google d'origine lorsque je clique sur Envoyer, au lieu de copier les entrées de formulaire dans la feuille de calcul.
Si l'approche ci-dessus ne fonctionne pas, comment puis-je envoyer les données du formulaire par courrier électronique ou sur Google Drive?
Voici ce qui a fonctionné pour moi:
- Créez votre formulaire personnalisé
- Créez votre formulaire Google et affichez la source après avoir cliqué sur Afficher le formulaire en direct.
- Copiez le code HTML à partir de <form> jusqu'à </ form>
- Chacun des champs du formulaire Google comporte des attributs de nom et d’identifiant qui doivent être copiés dans votre formulaire personnel.
- Utilisez l'URL dans l'action de formulaire des formulaires Google dans votre formulaire.
- Assurez-vous que même le bouton d'envoi possède les attributs ID et nom correspondant à la source de formulaire Google.
- Si vous soumettez maintenant, cela vous mènera à la page de réponse au formulaire Google. Vous pouvez éviter cela en soumettant un formulaire ajax.
Si votre formulaire personnalisé ne valide pas un élément obligatoire du formulaire Google, vous serez à nouveau redirigé vers la page du formulaire Google.
J'ai créé un utilitaire appelé Magic Forms pour ajouter des fonctionnalités supplémentaires à celles proposées par les terminaux Google. Créez un projet de formulaire magique qui vous donnera un point de terminaison HTTP sur lequel vous pouvez POST former des formulaires (HTTP standard ou Ajax), définir des redirections personnalisées en cas de succès/d'erreur et créer également des colonnes en fonction des données envoyées. , ce qui permet des cas d'utilisation assez flexibles.
Il semble que Google ait récemment mis à jour sa méthode de création de formulaires. Les noms des champs apparaissent donc dans des entrées masquées situées en dessous des entrées normales ( https://github.com/heaversm/google-custom-form ).
J'ai également essayé l'approche @nelsonic, qui envoie correctement les réponses au format JSON, mais ne les charge pas dans le tableur Google, du moins pour moi. C'est pourquoi je souhaitais combiner deux méthodes pour toujours sauvegarder les données des utilisateurs au cas où d'autres modifications par obfuscation seraient prises ultérieurement par Google.
Je vous recommande donc d’avoir une page Web avec une iframe à l’intérieur. Cette iframe contiendrait votre propre formulaire personnalisé, issu d'une autre page Web ou - comme dans mon exemple par commodité - de lui-même à l'aide de l'attribut srcdoc.
Ensuite, vous copiez le names de ces entrées masquées ainsi que l'URL du formulaire action à partir de votre page de prévisualisation du formulaire Google et les collez dans le formulaire personnalisé.
Et enfin, avec Ajax, nous pouvons facilement envoyer une copie des données du formulaire à la feuille de calcul Google normale et l'autre à notre messagerie avec la solution de script @nelsonic.
Ainsi, avec iframe et Ajax, nous évitons la redirection de l'URL vers la page "Réponse enregistrée" lors de l'envoi du formulaire à Google, mais nous pouvons masquer l'iframe de la vue parent pour être sûr à 100%.
Je poste ici tout mon code pour que vous puissiez le tester:
Formulaire personnalisé:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Custom Form to Google SpreadSheets</title>
</head>
<body>
<script type="text/javascript">
function hideIframeAndShowThankYouMessage(){
document.getElementById('iframe').style.display = "none";
document.getElementById('thankyou').style.display = "block";
}
</script>
<iframe id="iframe" width="760" height="500" frameborder="0" marginheight="0" marginwidth="0" srcdoc="<html><head></head><body>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#form').submit(function(e) {
// You could also here, for example, valid an email address input
// It shouldn't appear, but just in case the iframe loads the Google Forms 'Answer registered' page, we hide the iframe from parent js:
window.top.hideIframeAndShowThankYouMessage();
// Now we send the same form to two different locations: the first is the ordinary Google Spreadsheet, the second is the Google Apps Script which allows us to receive an email with the form info in JSON format
var url_sheet = 'https://docs.google.com/forms/d/e/1FAIpQLSdxucfxPO2TgTh4DOKTty6VCykJ6v4RX0nbKjsz1Pc5fLR9gA/formResponse';
var url_script = 'https://script.google.com/macros/s/AKfycby2xOphkRsr8Uf3mD44-H68yC0U3bUqvKV0bxXrTISTQ7QKDxw/exec';
$.ajax({
type: 'POST',
url: url_sheet,
data: $('#form').serialize(),
success: function(data){}
});
$.ajax({
type: 'POST',
url: url_script,
data: $('#form').serialize(),
success: function(data){}
});
e.preventDefault();
});
});
</script>
<!--
*** TO-DO!! ***
1. Copy your form ACTION url from your Google Form Preview Page
2. Replace value of var url_sheet with that form ACTION url in line 31
3. Copy your Spreadsheet WEB APP url from Google Script Editor
4. Replace value of url_script with that WEB APP url in line 33
3. Look into the source of your Google Form Preview Page and search for the names of the HIDDEN fields which are each one close to the normal input type (... <input type='hidden' name='entry.314619096' jsname='L9xHkb'> ...). We don't need the jsname, only the name
4. Replace the NAMES fields of every field of the custom form below
-->
<form id='form' method='POST'>
<label for='name'>Name: </label>
<input type='text' name='entry.314619096' placeholder='This is easy!' />
<br/>
<label for='message'>Message:</label>
<input type='text' name='entry.2039301116' placeholder='Tell me something! ;)'/>
<br/>
<input type='submit' value='Submit'>
</form></body></html>">Loading...</iframe>
<h1 id="thankyou" style="display: none">Thank you!</h1>
</body>
</html>
J'espère que ça pourrait aider quelqu'un!
Vous pouvez copier le code HTML du formulaire généré par Google et l'inclure dans votre page HTML personnalisée. De cette façon, vous pouvez modifier l'apparence du formulaire Google à votre guise et, à l'aide de techniques jQuery ou similaires, vous pouvez ajouter votre propre logique au formulaire (si nécessaire).
Voici un exemple: http://www.immersionmedia.com/blog/customizing-and-styling-google-forms/
C'est très simple.
Obtenez votre identifiant de formulaire à partir de la propriété "action" du tag FORM, vous pouvez obtenir un tag de formulaire à la source de la page Web Google Form.
Obtenez vos identifiants de champ Ex. "entry.1472837636"
S'il vous plaît se référer ci-dessous exemple maintenant.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CUSTOM GOOGLE FORM</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<form id="input-form" action="" method="POST" target="no-target">
<table>
<tr>
<td>Rate this help note</td>
<td><input type="radio" value="1" name="rating" class="rating" checked="">1</td>
<td><input type="radio" value="2" name="rating" class="rating">2</td>
<td><input type="radio" value="3" name="rating" class="rating">3</td>
<td><input type="radio" value="4" name="rating" class="rating">4</td>
<td><input type="radio" value="5" name="rating" class="rating">5</td>
<td><input type="radio" value="6" name="rating" class="rating">6</td>
<td><input type="radio" value="7" name="rating" class="rating">7</td>
<td><input type="radio" value="8" name="rating" class="rating">8</td>
<td><input type="radio" value="9" name="rating" class="rating">9</td>
<td><input type="radio" value="10" name="rating" class="rating">10</td>
</tr>
<tr>
<td>Are you satisfied from this help module ?</td>
<td><input type="radio" value="Yes" name="sat" class="sat" checked="">Yes</td>
<td><input type="radio" value="No" name="sat" class="sat">No</td>
</tr>
<tr><td>comments</td><td><input id="comments" name="comments"><td></tr>
<tr><td><button id="form-submit" type="submit">SUBMIT</button></td></tr>
</table>
</form>
<p id="input-feedback"></p>
<iframe src="#" id="no-target" name="no-target" style="visibility:hidden"></iframe>
<script>
jQuery('#input-form').one('submit', function() {
var rating = encodeURIComponent(jQuery('input[name=rating]:checked').val());
var sat = encodeURIComponent(jQuery('input[name=sat]:checked').val());
var comments = encodeURIComponent(jQuery('#comments').val());
var q1ID = "your-field-id";
var q2ID = "your-field-id";
var q3ID = "your-field-id";
var baseURL = 'https://docs.google.com/forms/d/e/your-form-id/formResponse?';
var submitRef = '&submit=Submit';
var submitURL = (baseURL + q1ID + "=" + sat + "&" + q2ID + "=" + rating + "&" + q3ID + "=" + comments + submitRef);
console.log(submitURL);
jQuery(this)[0].action = submitURL;
jQuery('#input-feedback').text('Thank You!');
});
</script>
</body>
</html>
Je me débattais avec ça depuis quelques jours, rien ne fonctionnait. À la fin, j'ai trouvé une très bonne solution.
var sheetName = 'Sheet1'
var scriptProp = PropertiesService.getScriptProperties()
function intialSetup () {
var activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
scriptProp.setProperty('key', activeSpreadsheet.getId())
}
function doPost (e) {
var lock = LockService.getScriptLock()
lock.tryLock(10000)
try {
var doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
var sheet = doc.getSheetByName(sheetName)
var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
var nextRow = sheet.getLastRow() + 1
var newRow = headers.map(function(header) {
return header === 'timestamp' ? new Date() : e.parameter[header]
})
sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])
return ContentService
.createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))
.setMimeType(ContentService.MimeType.JSON)
}
catch (e) {
return ContentService
.createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
.setMimeType(ContentService.MimeType.JSON)
}
finally {
lock.releaseLock()
}
}