Post Form Data to Google Spreadsheet

index.html

<div class="container" ng-app="postApp" ng-controller="postController">
<div class="col-sm-8">
    <div class="page-header"><h2>UEM Mega Job Mela 2017 Registration Page</h2></div>
    <!-- FORM -->
 <div ng-show="success" ng-class="{'alert': success , 'alert-success': success}">
  {{message}}
</div>
 <div ng-show="error" ng-class="{'alert': error , 'alert-error': error}">
  {{message}}
</div>

    <form name="userForm" ng-submit="submitForm()">
    <div class="form-group">
        <label>Name</label>
        <input type="text" name="name" class="form-control" ng-model="user.name" required>
    </div>
      <div class="form-group">
        <label>Email</label>
        <input type="email" name="email" class="form-control" ng-model="user.email" required>
    </div>
    <div class="form-group">
        <label>Address</label>
        <input type="text" name="address" class="form-control" ng-model="user.address" required>
    </div>
      <div class="form-group">
        <label>Phone Number</label>
        <input type="text" name="phone-number" class="form-control" ng-model="user.phoneNumber" required>
    </div>
      <div class="form-group">
        <label>Father's Name</label>
        <input type="text" name="fathers-name" class="form-control" ng-model="user.fathersName" required>
    </div>
    <div class="form-group">
        <label>Educational Background</label>
        <input type="text" name="educational-background" class="form-control" ng-model="user.educationalBackground" required>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>
</div>

post-form-data-to-google-spreadsheet.markdown

Post Form Data to Google Spreadsheet

A Pen by Soham Banerjee on CodePen.

License.

script.js

// Defining angularjs application.
var postApp = angular.module('postApp', []);
// Controller function and passing $http service and $scope var.
postApp.controller('postController', function($scope, $http, $log, $httpParamSerializerJQLike) {
  $scope.message = "";
  // create a blank object to handle form data.
  $scope.user = {};
  // calling our submit function.
  $scope.submitForm = function() {
    // Posting data to php file
    //$log.log($scope.user);
    $http({
      method  : 'POST',
      url     : 'https://script.google.com/macros/s/AKfycbyGy4ACw_R9lqYFC4u0v0_O98bp1s6Gk3ws0PO_twjHU13YOKPd/exec',
      data    : $httpParamSerializerJQLike($scope.user), //forms user object
      headers : {'Content-Type': 'application/x-www-form-urlencoded'}
    })
      .then(function(data) {
      $log.log(data.data.result);
      if (data.data.result="success") {
        $scope.message = "Registration Successful";
        $scope.success = true;
        $scope.user = {};
      }   
        else {
        $scope.message = "Registration is not successful, please try again!";
        $scope.error = true;
      }    
    });
  };
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>

styles

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />

.success is deprecated in 1.6 angular, .then is used for handling error functions