AngularJS Contact Form Example

app.js

function ContactCtrl($scope, $http) {
  $scope.success = false;
  $scope.httpError = false;
  
  $scope.send = function() {
    var job = { job: { klass: 'msg', args: [$scope.msg]}};
    $http.post('/contact',job).
      success(function(data){
        $scope.success = true;
        $scope.msg = {};
      }).
      error(function(data){
        $scope.httpError = true;
      });
  }
}

contact.coffee

  div '.span6.offset1', 'ng-controller': 'ContactCtrl', ->
    div '.alert.alert-error', 'ng-show': 'httpError', ->
      button '.close', 'data-dismiss': 'alert', 'x'
      strong 'Error! '
      text 'An Error occured trying to send message, please contact administrator at admin@charlestoncodes.com'
    div '.alert.alert-success', 'ng-show': 'success', ->
      button '.close', 'data-dismiss': 'alert', 'x'
      strong 'Success! '
      text 'Thank you for sending your message, we will contact you shortly!'
    form name: 'contactForm', ->
      div '.control-group', 'ng-class': "{error: contactForm.name.$invalid}", ->
        label 'Full Name'
        input '.span4', type: 'text', name: 'name', 'ng-model': 'msg.name', required: true, placeholder: 'Your Name'
        span '.help-inline', 'ng-show': 'contactForm.name.$error.required', 'Required'
      div '.control-group', 'ng-class': "{error: contactForm.email.$invalid}", ->
        label 'Email'
        input '.span4', type: 'email', name: 'email', 'ng-model': 'msg.email', required: true, placeholder: 'you@email.com'
        span '.help-inline', 'ng-show': 'contactForm.email.$error.required', 'Required'
        span '.help-inline', 'ng-show': 'contactForm.email.$error.email', 'Not a Email'
      div '.control-group', 'ng-class': '{error: contactForm.message.$invalid}', ->
        label 'Message'
        textarea '.span4', rows: 5, name: 'message', 'ng-model': 'msg.body', required: true
        span '.help-inline', 'ng-show': 'contactForm.message.$error.required', 'Required'
      button '.btn.btn-primary.btn-large', 'ng-click': "send()", 'ng-disabled': 'contactForm.$invalid', 'Send'

Hmm Why the mix of coffeescript and javascript?

I love javascript, but also love template languages like haml, etc. CoffeeKup is a template language in CoffeeScript, it works great for adding helpers and macros and it compiles to a javascript function. So instead of JavaScript and Jade, I really dig JavaScript and CoffeeKup!

brilliant! Thank you Sir

Just came across this while searching for an Angular contact form example...

Putting a click handler on the submit button is a bad idea. A form may be posted in different ways. Like hitting enter, or hitting "Go" or similar on an on-screen keyboard, or even just programmatically. There's no guarantee that a browser will simulate clicking the button.

Use a proper <form> tag and use the ng-submit directive instead.