Skip to content

Instantly share code, notes, and snippets.

@miguelmota
Last active May 24, 2016 13:27
Show Gist options
  • Save miguelmota/9895759 to your computer and use it in GitHub Desktop.
Save miguelmota/9895759 to your computer and use it in GitHub Desktop.
Simple Angular.js contact form example.
<div class="col-lg-12 col-md-12 col-sm-12" ng-controller="ContactController">
<div class="alert alert-danger" ng-show="error">
<button class="close" data-dismiss="alert">x</button>
<strong>Error!</strong> An error occured while trying to send message.
</div>
<div class="alert alert-success" ng-show="success">
<button class="close" data-dismiss="alert">x</button>
<strong>Success! </strong> Your message was successfully sent.
</div>
<form role="form" name="contactForm">
<div class="form-group" ng-class="{error: contactForm.name.$invalid}">
<label>Full Name</label>
<input class="form-control" type="text" name="name" ng-model="user.name" required="required" placeholder="Your name">
<span class="help-block" ng-show="contactForm.name.$error.required">Required</span>
</div>
<div class="form-group" ng-class="{error: contactForm.email.$invalid}">
<label>Email</label>
<input class="form-control" type="email" name="email" ng-model="user.email" required="required" placeholder="Your email address">
<span class="help-block" ng-show="contactForm.email.$error.required">Required</span>
<span class="help-block" ng-show="contactForm.email.$error.email">Invalid email address</span>
</div>
<div class="form-group" ng-class="{error: contactForm.message.$invalid}">
<label>Message</label>
<textarea class="form-control" rows="5" name="message" ng-model="user.body" required="required" placeholder="Your messsage"></textarea>
<span class="help-inline" ng-show="contactForm.message.$error.required">Required</span>
</div>
<button class="btn btn-primary btn-lg btn-block" ng-click="send()" ng-disabled="contactForm.$invalid">Send</button>
</form>
</div>
function ContactController($scope, $http) {
$scope.success = false;
$scope.error = false;
$scope.send = function () {
var htmlBody = '<div>Name: ' + $scope.user.name + '</div>' +
'<div>Email: ' + $scope.user.email + '</div>' +
'<div>Message: ' + $scope.user.body + '</div>' +
'<div>Date: ' + (new Date()).toString() + '</div>';
$http({
url: 'https://api.postmarkapp.com/email',
method: 'POST',
data: {
'From': 'foo@foo.com',
'To': 'bar@bar.com',
'HtmlBody': htmlBody,
'Subject': 'New Contact Form Submission'
},
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'X-Postmark-Server-Token': '8569dcd45-6a1a-4e7b-ae75-ea37629de4'
}
}).
success(function (data) {
$scope.success = true;
$scope.user = {};
}).
error(function (data) {
$scope.error = true;
});
}
}
@a-dubiel
Copy link

Looks like Postmark doesnt support CORS?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment