Post Form Data to Google Spreadsheet

index.html

<div class="container" ng-app="postApp" ng-controller="postController">
<div class="col-sm-8 col-sm-offset-2">
    <div class="page-header"><h1>Post data using angularJS</h1></div>
    <!-- FORM -->
    <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">
        <span ng-show="errorName">{{errorName}}</span>
    </div>
      <div class="form-group">
        <label>Email</label>
        <input type="email" name="email" class="form-control" ng-model="user.email">
        <span ng-show="errorEmail">{{errorEmail}}</span>
    </div>
    <div class="form-group">
        <label>Address</label>
        <input type="text" name="address" class="form-control" ng-model="user.address">
        <span ng-show="errorAddress">{{errorAddress}}</span>
    </div>
      <div class="form-group">
        <label>Phone Number</label>
        <input type="text" name="phone-number" class="form-control" ng-model="user.phoneNumber">
        <span ng-show="errorPhone">{{errorPhone}}</span>
    </div>
      <div class="form-group">
        <label>Father's Name</label>
        <input type="text" name="fathers-name" class="form-control" ng-model="user.fathersName">
        <span ng-show="errorFather">{{errorFather}}</span>
    </div>
    <div class="form-group">
        <label>Educational Background</label>
        <input type="text" name="educational-background" class="form-control" ng-model="user.educationalBackground">
        <span ng-show="errorEducation">{{errorEducation}}</span>
    </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) {
  // 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'}
    })
      .success(function(data) {
      if (data.errors) {
        // Showing errors.
        $scope.errorName = data.errors.name;
        $scope.errorEmail = data.errors.email;
        $scope.errorAddress = data.errors.address;
        $scope.errorPhone = data.errors.phoneNumber;
        $scope.errorFather = data.errors.fathersName;
        $scope.errorEducation = data.errors.educationalBackground;
      } else {
        $scope.message = data.message;
      }
    });
  };
});

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" />