Google Form Response not working from the website

Question

I'm using a Google Forms value to integrate with my website where I want to submit the form and store data in google sheet as form responses. I'm using AJAX to redirect to another page instead of Google Form submit page. But whenever I'm trying to submit, it's redirecting to my page accurately but data is not saved in Google Sheet.

Here is my code:

<strong>Full Name</strong>
<input type="text" name="Fullname" class="form-control" id="Fullname" />
<strong>Email Address</strong>
<input type="text" name="Email" class="form-control" id="Email" />
<strong>Subject</strong>
<input type="text" name="Subject" class="form-control" id="Subject" />
<strong>Details</strong>
<textarea name="Details" rows="8" cols="0" class="form-control" id="Details"></textarea><br />
<button type="button" id="btnSubmit" class="btn btn-info" onclick="postContactToGoogle()">Submit</button>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
    function postContactToGoogle() {
        var email = $('#Email').val();
        var fullname = $('#FullName').val();
        var subject = $('#Subject').val();
        var details = $('#Details').val();
        $.ajax({
            url: "https://docs.google.com/forms/d/abcdefgh1234567xyz/formResponse",
            data: {
                "entry_805356472": fullname,
                "entry_1998295708": email, "entry_785075795":
                subject, "entry_934055676": details
            },
            type: "POST",
            dataType: "xml",
            statusCode: {
                0: function () {
                    window.location.replace("Success.html");
                },
                200: function () {
                    window.location.replace("Success.html");
                }
            }
        });
    }
</script>

How can I save the data in Google Sheet? Am I missing something in my code?

Answer 1

You can directly copy the form from google view form page like shown in the demo, and then do the following changes in the AJAX call as shown below. And now once you submit data it is visible in google forms, view responses.

$(function(){
    $('input:submit').on('click', function(e){
      e.preventDefault();

        $.ajax({
            url: "https://docs.google.com/forms/d/18icZ41Cx3-n1iW7yTOZdiDx9a6mySWHOy9ryd1l59tM/formResponse",
            data:$('form').serialize(),
            type: "POST",
            dataType: "xml",
            crossDomain: true,
            success: function(data){
              //window.location.replace("youraddress");
              //console.log(data);
            },
            error: function(data){
              //console.log(data);
            }
        });
    });
  });

<div class="ss-form"><form action="https://docs.google.com/forms/d/18icZ41Cx3-n1iW7yTOZdiDx9a6mySWHOy9ryd1l59tM/formResponse" method="POST" id="ss-form" target="_self" onsubmit=""><ol role="list" class="ss-question-list" style="padding-left: 0">
<div class="ss-form-question errorbox-good" role="listitem">
<div dir="auto" class="ss-item  ss-text"><div class="ss-form-entry">
<label class="ss-q-item-label" for="entry_1635584241"><div class="ss-q-title">What's your name
</div>
<div class="ss-q-help ss-secondary-text" dir="auto"></div></label>
<input type="text" name="entry.1635584241" value="" class="ss-q-short" id="entry_1635584241" dir="auto" aria-label="What's your name  " title="">
<div class="error-message" id="1979924055_errorMessage"></div>
<div class="required-message">This is a required question</div>
</div></div></div>
<input type="hidden" name="draftResponse" value="[,,&quot;182895015706156721&quot;]
">
<input type="hidden" name="pageHistory" value="0">

<input type="hidden" name="fvv" value="0">


<input type="hidden" name="fbzx" value="182895015706156721">

<div class="ss-item ss-navigate"><table id="navigation-table"><tbody><tr><td class="ss-form-entry goog-inline-block" id="navigation-buttons" dir="ltr">
<input type="submit" name="submit" value="Submit" id="ss-submit" class="jfk-button jfk-button-action ">
</td>
</tr></tbody></table></div></ol></form></div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>