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

   <form name="contactForm" ng-submit="submitForm(contactForm.$valid)" novalidate> <!-- novalidate prevents HTML5 validation since we will be validating ourselves -->

        <!-- NAME -->
        <div class="form-group" ng-class="{ 'has-error' : contactForm.name.$invalid && !contactForm.name.$pristine }">
            <input type="text" name="name" class="form-control" ng-model="formData.name" placeholder="Volledige naam" ng-minlength="3" required>
            <p ng-show="contactForm.name.$error.minlength" class="help-block">Je naam lijkt iets te kort, vul ook je achternaam in!</p>
        </div>

        <!-- EMAIL -->
        <div class="form-group" ng-class="{ 'has-error' : contactForm.email.$invalid && !contactForm.email.$pristine }">
            <input type="email" name="email" class="form-control" ng-model="formData.email" placeholder="Email adres" required>
            <p ng-show="contactForm.email.$invalid && !contactForm.email.$pristine" class="help-block">Voer een geldig email adres in</p>
        </div>

        <!-- TEL -->
        <div class="form-group" ng-class="{ 'has-error' : contactForm.tel.$invalid && !contactForm.tel.$pristine }">
            <input type="tel" name="tel" class="form-control" ng-model="formData.tel" placeholder="Telefoonnummer" min-length="10" required>
            <p ng-show="contactForm.tel.$error.minlength" class="help-block">Je telefoonnummer lijkt iets te kort, misschien mis je iets als "+31" of "043"</p>
        </div>

        <!-- TEXT -->
        <div class="form-group" ng-class="{ 'has-error' : contactForm.text.$invalid && !contactForm.text.$pristine }">
            <textarea name="text" class="form-control" ng-model="formData.text" placeholder="Formuleer uw situatie kort. Geef ook aan op welke dagen u beschikbaar bent of gebeld wenst te worden." ng-minlength="10" required></textarea>
            <p ng-show="contactForm.text.$error.minlength" class="help-block">Vertel ons iets meer...</p>
        </div>

        <!-- SUBMIT BUTTON -->
        <input type="submit" ng-submit="processForm()" ng-disabled="contactForm.$invalid" value="Maak afspraak">

<!--         <pre>
        {{formData}}
        </pre> -->

    </form>

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.

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

   <form name="contactForm" ng-submit="submitForm(contactForm.$valid)" novalidate> <!-- novalidate prevents HTML5 validation since we will be validating ourselves -->

        <!-- NAME -->
        <div class="form-group" ng-class="{ 'has-error' : contactForm.name.$invalid && !contactForm.name.$pristine }">
            <input type="text" name="name" class="form-control" ng-model="formData.name" placeholder="Volledige naam" ng-minlength="3" required>
            <p ng-show="contactForm.name.$error.minlength" class="help-block">Je naam lijkt iets te kort, vul ook je achternaam in!</p>
        </div>

        <!-- EMAIL -->
        <div class="form-group" ng-class="{ 'has-error' : contactForm.email.$invalid && !contactForm.email.$pristine }">
            <input type="email" name="email" class="form-control" ng-model="formData.email" placeholder="Email adres" required>
            <p ng-show="contactForm.email.$invalid && !contactForm.email.$pristine" class="help-block">Voer een geldig email adres in</p>
        </div>

        <!-- TEL -->
        <div class="form-group" ng-class="{ 'has-error' : contactForm.tel.$invalid && !contactForm.tel.$pristine }">
            <input type="tel" name="tel" class="form-control" ng-model="formData.tel" placeholder="Telefoonnummer" min-length="10" required>
            <p ng-show="contactForm.tel.$error.minlength" class="help-block">Je telefoonnummer lijkt iets te kort, misschien mis je iets als "+31" of "043"</p>
        </div>

        <!-- TEXT -->
        <div class="form-group" ng-class="{ 'has-error' : contactForm.text.$invalid && !contactForm.text.$pristine }">
            <textarea name="text" class="form-control" ng-model="formData.text" placeholder="Formuleer uw situatie kort. Geef ook aan op welke dagen u beschikbaar bent of gebeld wenst te worden." ng-minlength="10" required></textarea>
            <p ng-show="contactForm.text.$error.minlength" class="help-block">Vertel ons iets meer...</p>
        </div>

        <!-- SUBMIT BUTTON -->
        <input type="submit" ng-submit="processForm()" ng-disabled="contactForm.$invalid" value="Maak afspraak">

<!--         <pre>
        {{formData}}
        </pre> -->

    </form>

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.

• javascript
• php
• forms
• angularjs

• no need to use $.param . If you are learning angular take jQuery library right out of the page to start – charlietfl Commented Jul 18, 2014 at 15:01
• @charlietfl Alright, just drop the "$"? – Bob Wassermann Commented Jul 18, 2014 at 15:53
• no.. just pass the object and angular will take care of serializing appropriately – charlietfl Commented Jul 18, 2014 at 16:27

2 Answers 2

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:

    <div ng-controller="MainCtrl">
      <form name="contactForm" novalidate>
        <!-- NAME -->
        <div ng-class="{'form-error':contactForm.name.$dirty && contactForm.name.$invalid, 'form-group':true}">
          <input type="text" name="name" ng-model="formData.name" placeholder="Volledige naam" ng-minlength="3" required="" />
          <div ng-messages="contactForm.name.$error" ng-show="contactForm.name.$dirty" >
            <div ng-message="minlength">Name too short</div>
            <div ng-message="required">Required Name</div>
          </div>
        </div>
        <!-- EMAIL -->
        <div ng-class="{'form-error':contactForm.email.$dirty && contactForm.email.$invalid, 'form-group':true}">
          <input type="email" name="email" ng-model="formData.email" placeholder="Email adres" required />
          <div ng-messages="contactForm.email.$error" ng-show="contactForm.email.$dirty">
            <div ng-message="email">Invalid Email</div>
            <div ng-message="required">Required Email</div>
          </div>
        </div>
        <!-- TEL -->
        <div ng-class="{'form-error':contactForm.tel.$dirty && contactForm.tel.$invalid, 'form-group':true}">
          <input type="text" name="tel" ng-pattern=/\d{3}-\d{3}-\d{4}/ ng-model="formData.tel" placeholder="Telefoonnummer" required />
          <div ng-messages="contactForm.tel.$error" ng-show="contactForm.tel.$dirty">
            <div ng-message="pattern">Valid form: XXX-XXX-XXXX</div>
            <div ng-message="required">Required Phone</div>
          </div>
        </div>
        <!-- SUBMIT BUTTON -->
        <input type="submit" ng-click="processForm()" ng-disabled="contactForm.$invalid" value="Maak afspraak" />
      </form>
    </div>

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 munication. 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).

Just copy below code in your angularJs Project it will work fine

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.5/angular.min.js"></script>

<!-- Latest piled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <div class="row" style="margin-bottom:15px;">
    <div class="col-md-12">
      <div class="col-md-offset-1 col-md-6" id="box">
        <h2 class="colr">Contact Us!</h2>
        <hr>
        <form class="form-horizontal" name="contactForm" ng-submit="submitContactForm(ContactDetails)" novalidate>
          <fieldset>
            <!-- Form Name -->
            <!-- Text input-->
            <div class="form-group">
              <div class="col-md-12" ng-class="{ 'has-error' : contactForm.first_name.$invalid && !contactForm.first_name.$pristine }">
                <div class="input-group">
                  <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                  <input name="first_name" placeholder="Name" ng-model="ContactDetails.FirstName" class="form-control" type="text" required>
                </div>
                <span ng-show="contactForm.first_name.$invalid && !contactForm.first_name.$pristine" class="help-block">Username is required.</span>
              </div>
            </div>
            <!-- Text input-->
            <div class="form-group">
              <div class="col-md-12" ng-class="{ 'has-error' : contactForm.email.$invalid && !contactForm.email.$pristine }">
                <div class="input-group">
                  <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
                  <input name="email" placeholder="E-Mail Address" ng-model="ContactDetails.Email" class="form-control" type="text" ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/">
                </div>
                <span ng-show="contactForm.email.$invalid && !contactForm.email.$pristine" class="help-block"> Enter a valid email.</span>
              </div>
            </div>
            <!-- Text input-->
            <div class="form-group" ng-class="{ 'has-error' : contactForm.phone.$invalid && !contactForm.phone.$pristine }">
              <div class="col-md-12">
                <div class="input-group">
                  <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
                  <input type="text" class="form-control" ng-model="ContactDetails.PhoneNumber" name="phone" ng-maxlength="10" ng-minlength="10" placeholder="9845640899" required>
                </div>
                <span ng-show="contactForm.phone.$invalid && !contactForm.phone.$pristine">Phone Number is required.</span>
              </div>
            </div>
            <div class="form-group" ng-class="{ 'has-error' : contactForm.subject.$invalid && !contactForm.subject.$pristine }">
              <div class="col-md-12">
                <div class="input-group">
                  <span class="input-group-addon"><i class="glyphicon glyphicon-bookmark"></i></span>
                  <input name="subject" ng-model="ContactDetails.Subject" placeholder="Enter Subject" class="form-control" type="text" required>
                </div>
                <span ng-show="contactForm.subject.$invalid && !contactForm.subject.$pristine" class="help-block">Subject is required.</span>
              </div>
            </div>
            <!-- Text input-->
            <div class="form-group" ng-class="{ 'has-error' : contactForm.ment.$invalid && !contactForm.ment.$pristine }">
              <div class="col-md-12 inputGroupContainer">
                <div class="input-group">
                  <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
                  <textarea class="form-control" ng-model="ContactDetails.Comment" rows="6" name="ment" placeholder="Message" ng-maxlength="255" ng-minlength="10" required></textarea>
                </div>
                <span ng-show="contactForm.ment.$invalid && !contactForm.ment.$pristine" class="help-block"> Enter a Message.</span>
              </div>
            </div>
            <div class="form-group">
              <div class="col-md-12">
                <button type="submit" class="btn btn-warning pull-right" ng-disabled="contactForm.$invalid">Send<span class="glyphicon glyphicon-send"></span>
                </button>
              </div>
            </div>
          </fieldset>
        </form>
      </div>

    </div>
  </div>
</div>