AngularJS Contact Form

Question

I'm pretty new to AngularJS and trying to build a contact form. I did some research to validate with angular, this works fine. However sending the input to my email account is still a mystery.

HTML Snippet

    

        
        
            
            Je naam lijkt iets te kort, vul ook je achternaam in!
        

        
        
            
            Voer een geldig email adres in
        

        
        
            
            Je telefoonnummer lijkt iets te kort, misschien mis je iets als "+31" of "043"
        

        
        
            
            Vertel ons iets meer...

Controller

.controller('MainCtrl', function($scope, $http) {
  this.features = keys;
    $scope.submitForm = function(isValid) {
      if (isValid) {
        $scope.formData = {};

        $scope.processForm = function() {
          $http({
            method  : 'POST',
            url     : 'process.php',
            data    : $.param($scope.formData),
            headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
          });
        };
      }
    };
})

The process.php file is still empty since I'm not quite sure what to put here.

spsteffl · Accepted Answer

Regarding your form submission setup, you cannot put the ng-submit on any input[type="submit"] elements, instead you put ng-click. Also, according to the angular docs, when you have a ng-submit on the form, and an ng-click on any input[type="submit"] elements, the ng-click handlers will get called first, THEN the ng-submit handler will get called (your controller is set up for the opposite order).

But in your case, two submit handlers is unneccessary, as you can do all your validation with angular directives, and just use an ng-click. Theres an example plunker here.

HTML:

    
      
        
        
          
          
            Name too short
            Required Name
          
        
        
        
          
          
            Invalid Email
            Required Email
          
        
        
        
          
          
            Valid form: XXX-XXX-XXXX
            Required Phone

JavaScript:

.controller('MainCtrl', function($scope, $http) {
  $scope.formData = {};
  $scope.processForm = function() {
    alert('valid form!')
    $http({
      method  : 'POST',
      url     : 'process.php',
      data    : $scope.formData,
      headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
    });
  };
});

Regarding the submission to your email, the $http service will post your data using the http protocol, so you cannot send it directly to you email, as email does not use the HTTP protocol for communication. You Could send the post data to your server, and have the server send the email (e.g. if you use Node you can use nodemailer package to send the email).

AngularJS Contact Form

Answers (2)

Related Questions