Menu
We are trying to make a form using Bootstrap 3, and them the response should go to a Google Spreadsheet, we tried to do but is not working, our problems are load bootstrap css in google script html page and when the button is pressed put fields information in Google Spreadsheet.
Thank you.
Google Script
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('index');
}
function setData(data) {
var ss = SpreadsheetApp.openById("1uU2GtTjN8SYKQduar4y4n2u0EGeQFaznRddtrmNSYN8").getActiveSheet();
var lastRow = ss.getLastRow();
ss.getRange(lastRow+1, 1).setValue(data[0]);
Logger.log(data[0]);
return 0
}
Java script and Html
<script>
window.addEventListener('load', function() {
google.script.run.withSuccessHandler(getData).setData();
});
function getData(data) {
var data = [];
data[0] = document.getElementById("InputName").value;
data[1] = document.getElementById("InputEmail").value;
data[2] = document.getElementById("Inputtel").value;
data[3] = document.getElementById("InputCPFCNPJ").value;
data[4] = document.getElementById("InputEnterprise").value;
data[5] = document.getElementById("InputMessage").value;
google.script.run.setdata(data);
return 0;
}
</script>
<html lang="pt-br">
<body>
<form role="form">
<div class="form-group col-xs-12">
<label class="sr-only" for="InputName">Nome</label>
<input type="text" class="form-control" id="InputName" placeholder="Nome">
</div>
<div class="form-group col-xs-12">
<label class="sr-only" for="InputEmail">Email</label>
<input type="email" class="form-control" id="InputEmail" placeholder="e-mail">
</div>
<div class="form-group">
<div class="form-inline">
<div class="form-group col-xs-6">
<label class="sr-only" for="Inputtel">Telefone</label>
<input type="tel" class="form-control" id="Inputtel" placeholder="Telefone">
</div>
<div class="form-group col-xs-6">
<label class="sr-only" for="InputCPFCNPJ">CPF ou CNPJ</label>
<input type="number" class="form-control" id="InputCPFCNPJ" placeholder="CPF ou CNPJ">
</div>
</div>
</div>
<div class="form-group col-xs-12">
<label class="sr-only" for="InputEnterprise">Empresa</label>
<input type="text" class="form-control" id="InputEnterprise" placeholder="Empresa">
</div>
<div class="form-group col-xs-12">
<label class="sr-only" for="InputMessage">Mensagem</label>
<textarea class="form-control" rows="3" id="InputMessage" placeholder="Mensagem"></textarea>
</div>
<div class="form-group col-xs-2">
<button class="btn btn-default" type="submit" onclick="getData();">
Enviar
</button>
</div>
</form>
<!-- Bootstrap -->
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
876
First you need to import the bootstrap CSS properly. Second you need to call your server side function setData with an upper case D according to your server side declaration.
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script>
function getData(data) {
var data = [];
data[0] = document.getElementById("InputName").value;
data[1] = document.getElementById("InputEmail").value;
data[2] = document.getElementById("Inputtel").value;
data[3] = document.getElementById("InputCPFCNPJ").value;
data[4] = document.getElementById("InputEnterprise").value;
data[5] = document.getElementById("InputMessage").value;
google.script.run.setData(data);
}
</script>
<html lang="pt-br">
<body>
<form role="form">
<div class="form-group col-xs-12">
<label class="sr-only" for="InputName">Nome</label>
<input type="text" class="form-control" id="InputName" placeholder="Nome">
</div>
<div class="form-group col-xs-12">
<label class="sr-only" for="InputEmail">Email</label>
<input type="email" class="form-control" id="InputEmail" placeholder="e-mail">
</div>
<div class="form-group">
<div class="form-inline">
<div class="form-group col-xs-6">
<label class="sr-only" for="Inputtel">Telefone</label>
<input type="tel" class="form-control" id="Inputtel" placeholder="Telefone">
</div>
<div class="form-group col-xs-6">
<label class="sr-only" for="InputCPFCNPJ">CPF ou CNPJ</label>
<input type="number" class="form-control" id="InputCPFCNPJ" placeholder="CPF ou CNPJ">
</div>
</div>
</div>
<div class="form-group col-xs-12">
<label class="sr-only" for="InputEnterprise">Empresa</label>
<input type="text" class="form-control" id="InputEnterprise" placeholder="Empresa">
</div>
<div class="form-group col-xs-12">
<label class="sr-only" for="InputMessage">Mensagem</label>
<textarea class="form-control" rows="3" id="InputMessage" placeholder="Mensagem"></textarea>
</div>
<div class="form-group col-xs-2">
<button class="btn btn-default" type="submit" onclick="getData();">
Enviar
</button>
</div>
</form>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
