Geek asks and answers

Make Bootstrap Form in Google Script

We are trying to create a form using Bootstrap 3, and they should respond to the Google spreadsheet, we tried to do this, but we don’t work, our problems load with loading css on the google script html page and when we click the “Place field information” button in the Table Google

Thank.

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>
+3
source share
1 answer

First you need to import bootstrap CSS correctly. Secondly, you need to call the setData function on the server side with an uppercase D according to the expression on the server side.

<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>
+2
source

More articles:


All Articles