form to not connect to google sheet

Asked

Viewed 39 times

0

Hello I need some help I’m making a form following these steps Link and it’s not working I created by following the steps that are on this site . But I think the problem is in my code and why it’s not working

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <title>pag3</title>
    <link rel="stylesheet" href="css/style.css">
        <script>
    var $form = $('form#test-form'),
    url = 'https://script.google.com/macros/s/AKfycbyXod9jBus3hVXRKQTA0XgsFBRlYyUSqAgtKqqqHpoKhS-EHPX3/exec'

$('#submit-form').on('click', function(e) {
  e.preventDefault();
  var jqxhr = $.ajax({
    url: url,
    method: "GET",
    dataType: "json",
    data: $form.serializeObject()
  }).success(
    // do something
  );
})
    </script>
</head>

<body>
     <form id="test-form">
  <h1>Como classifica a RAPIDEZ do atendimento? </h1>
  <div>
    <label>Fraco</label>
    <a href="index5.html">
            <input type="image" name="RAPIDEZ_atendimento" id="submit-form" alt="Fraco" placeholder="Field 3"
       src="img/sad.png">    
            </a>
  </div>

  <div>
    <label>Normal</label>
    <a href="index5.html">
            <input type="image" name="RAPIDEZ_atendimento" id="submit-form" alt="Normal" placeholder="Field 3"
       src="img/confused.png">    
            </a>
  </div>
  
  <div>
   <label>Bom</label>
    <a href="index5.html">
            <input type="image" name="RAPIDEZ_atendimento" id="submit-form" alt="Bom" placeholder="Field 3"
       src="img/smiling.png">    
            </a>
  </div>
  
  <div>
   <label>Muito Bom</label>
    <a href="index5.html">
            <input type="image" name="RAPIDEZ_atendimento" id="submit-form" alt="Muito Bom" placeholder="Field 3"
       src="img/happy.png">    
            </a>
  </div>

</form>

</body>

</html>
<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <title>pag2</title>
    <link rel="stylesheet" href="css/style.css">
        <script>
    var $form = $('form#test-form'),
    url = 'https://script.google.com/macros/s/AKfycbyXod9jBus3hVXRKQTA0XgsFBRlYyUSqAgtKqqqHpoKhS-EHPX3/exec'

$('#submit-form').on('click', function(e) {
  e.preventDefault();
  var jqxhr = $.ajax({
    url: url,
    method: "GET",
    dataType: "json",
    data: $form.serializeObject()
  }).success(
    // do something
  );
})
    </script>
</head>

<body>
     <form id="test-form">
  <h1>Como classifica a VARIEDADE dos nossos produtos?</h1>
  <div>
    <label>Fraco</label>
    <a href="index4.html">
            <input type="image" name="VARIEDADE_produtos" id="submit-form" alt="Fraco" placeholder="Field 2"
       src="img/sad.png">    
            </a>
  </div>

  <div>
    <label>Normal</label>
    <a href="index4.html">
            <input type="image" name="VARIEDADE_produtos" id="submit-form" alt="Normal" placeholder="Field 2"
       src="img/confused.png">    
            </a>
  </div>
  
  <div>
   <label>Bom</label>
    <a href="index4.html">
            <input type="image" name="VARIEDADE_produtos" id="submit-form" alt="Bom" placeholder="Field 2"
       src="img/smiling.png">    
            </a>
  </div>
  
  <div>
   <label>Muito Bom</label>
    <a href="index4.html">
            <input type="image" name="VARIEDADE_produtos" id="submit-form" alt="Muito Bom" placeholder="Field 2"
       src="img/happy.png">    
            </a>
  </div>

</form>

</body>

</html>
<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <title>pag1</title>
    <link rel="stylesheet" href="css/style.css">
    <script>
    var $form = $('form#test-form'),
    url = 'https://script.google.com/macros/s/AKfycbyXod9jBus3hVXRKQTA0XgsFBRlYyUSqAgtKqqqHpoKhS-EHPX3/exec'

$('#submit-form').on('click', function(e) {
  e.preventDefault();
  var jqxhr = $.ajax({
    url: url,
    method: "GET",
    dataType: "json",
    data: $form.serializeObject()
  }).success(
    // do something
  );
})
    </script>
</head>

<body>
    <form id="test-form">
  <h1>Como classifica a QUALIDADE dos nossos produtos?</h1>
  <div>
    <label>Fraco</label>
    <a href="index3.html">
            <input type="image" name="QUALIDADE_produtos" id="submit-form" alt="Fraco" placeholder="Field 1"
       src="img/sad.png">    
            </a>
  </div>

  <div>
    <label>Normal</label>
    <a href="index3.html">
            <input type="image" name="QUALIDADE_produtos" id="submit-form" alt="Normal" placeholder="Field 1"
       src="img/confused.png">    
            </a>
  </div>
  
  <div>
   <label>Bom</label>
    <a href="index3.html">
            <input type="image" name="QUALIDADE_produtos" id="submit-form" alt="Bom" placeholder="Field 1"
       src="img/smiling.png">    
            </a>
  </div>
  
  <div>
   <label>Muito Bom</label>
    <a href="index3.html">
            <input type="image" name="QUALIDADE_produtos" id="submit-form" alt="Muito Bom" placeholder="Field 1"
       src="img/happy.png">    
            </a>
  </div>

</form>

</body>

</html>

I can’t even go to the 2 page . this giving the results in the address bar, do I have to change the method to post? last part of the code .

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <title>pag6</title>
    <link rel="stylesheet" href="css/style.css">
        <script>
    var $form = $('form#test-form'),
    url = 'https://script.google.com/macros/s/AKfycbyXod9jBus3hVXRKQTA0XgsFBRlYyUSqAgtKqqqHpoKhS-EHPX3/exec'

$('#submit-form').on('click', function(e) {
  e.preventDefault();
  var jqxhr = $.ajax({
    url: url,
    method: "GET",
    dataType: "json",
    data: $form.serializeObject()
  }).success(
    // do something
  );
})
    </script>
</head>

<body>
     <form id="test-form">
  <h1>Para Acabar</h1>
<div>
    <label>Deixe um comentário</label>
    <input type="text" name="Deixe_comentario" placeholder="Field 6"/>
  </div>

  <div>
    <label>Contacto</label>
    <input type="text" name="Contacto_email" placeholder="Field 7"/>
    
</div>
  
  <div>
    <button type="submit" id="submit-form" onclick="location.href='index8.html';">Submit</button>
</div>

</form>

</body>

</html>
<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <title>pag5</title>
    <link rel="stylesheet" href="css/style.css">
        <script>
    var $form = $('form#test-form'),
    url = 'https://script.google.com/macros/s/AKfycbyXod9jBus3hVXRKQTA0XgsFBRlYyUSqAgtKqqqHpoKhS-EHPX3/exec'

$('#submit-form').on('click', function(e) {
  e.preventDefault();
  var jqxhr = $.ajax({
    url: url,
    method: "GET",
    dataType: "json",
    data: $form.serializeObject()
  }).success(
    // do something
  );
})
    </script>
</head>

<body>
     <form id="test-form">
  <h1>Como classifica o nosso espaço?</h1>
  <div>
    <label>Fraco</label>
    <a href="index7.html">
            <input type="image" name="nosso_espaço" id="submit-form" alt="Fraco" placeholder="Field 5"
       src="img/sad.png">    
            </a>
  </div>

  <div>
    <label>Normal</label>
    <a href="index7.html">
            <input type="image" name="nosso_espaço" id="submit-form" alt="Normal" placeholder="Field 5"
       src="img/confused.png">    
            </a>
  </div>
  
  <div>
   <label>Bom</label>
    <a href="index7.html">
            <input type="image" name="nosso_espaço" id="submit-form" alt="Bom" placeholder="Field 5"
       src="img/smiling.png">    
            </a>
  </div>
  
  <div>
   <label>Muito Bom</label>
    <a href="index7.html">
            <input type="image" name="nosso_espaço" id="submit-form" alt="Muito Bom" placeholder="Field 5"
       src="img/happy.png">    
            </a>
  </div>

</form>

</body>

</html>
<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <title>pag4</title>
    <link rel="stylesheet" href="css/style.css">
        <script>
    var $form = $('form#test-form'),
    url = 'https://script.google.com/macros/s/AKfycbyXod9jBus3hVXRKQTA0XgsFBRlYyUSqAgtKqqqHpoKhS-EHPX3/exec'

$('#submit-form').on('click', function(e) {
  e.preventDefault();
  var jqxhr = $.ajax({
    url: url,
    method: "GET",
    dataType: "json",
    data: $form.serializeObject()
  }).success(
    // do something
  );
})
    </script>
</head>

<body>
     <form id="test-form">
  <h1>E quanto à QUALIDADE do atendimento?</h1>
  <div>
    <label>Fraco</label>
    <a href="index6.html">
            <input type="image" name="QUALIDADE_atendimento" id="submit-form" alt="Fraco" placeholder="Field 4"
       src="img/sad.png">    
            </a>
  </div>

  <div>
    <label>Normal</label>
    <a href="index6.html">
            <input type="image" name="QUALIDADE_atendimentos" id="submit-form" alt="Normal" placeholder="Field 4"
       src="img/confused.png">    
            </a>
  </div>
  
  <div>
   <label>Bom</label>
    <a href="index6.html">
            <input type="image" name="QUALIDADE_atendimento" id="submit-form" alt="Bom" placeholder="Field 4"
       src="img/smiling.png">    
            </a>
  </div>
  
  <div>
   <label>Muito Bom</label>
    <a href="index6.html">
            <input type="image" name="QUALIDADE_atendimento" id="submit-form" alt="Muito Bom" placeholder="Field 4"
       src="img/happy.png">    
            </a>
  </div>

</form>

</body>

</html>

1 answer

0

I believe you have to put the jquery file in your project.

Can be downloaded or included by CDN:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  var $form = $('form#test-form'),
  url = 'https://script.google.com/macros/s/AKfycbyXod9jBus3hVXRKQTA0XgsFBRlYyUSqAgtKqqqHpoKhS-EHPX3/exec'

I hope it helped!

  • is still not working and goes to the second page is still blocked

Browser other questions tagged

You are not signed in. Login or sign up in order to post.