title: AngularJS Contact Form
body: <p>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.</p>
  
  <p><strong>HTML Snippet</strong></p>
  
  <pre><code>   &lt;form name="contactForm" ng-submit="submitForm(contactForm.$valid)" novalidate&gt; &lt;!-- novalidate prevents HTML5 validation since we will be validating ourselves --&gt;
  
          &lt;!-- NAME --&gt;
          &lt;div class="form-group" ng-class="{ 'has-error' : contactForm.name.$invalid &amp;&amp; !contactForm.name.$pristine }"&gt;
              &lt;input type="text" name="name" class="form-control" ng-model="formData.name" placeholder="Volledige naam" ng-minlength="3" required&gt;
              &lt;p ng-show="contactForm.name.$error.minlength" class="help-block"&gt;Je naam lijkt iets te kort, vul ook je achternaam in!&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;!-- EMAIL --&gt;
          &lt;div class="form-group" ng-class="{ 'has-error' : contactForm.email.$invalid &amp;&amp; !contactForm.email.$pristine }"&gt;
              &lt;input type="email" name="email" class="form-control" ng-model="formData.email" placeholder="Email adres" required&gt;
              &lt;p ng-show="contactForm.email.$invalid &amp;&amp; !contactForm.email.$pristine" class="help-block"&gt;Voer een geldig email adres in&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;!-- TEL --&gt;
          &lt;div class="form-group" ng-class="{ 'has-error' : contactForm.tel.$invalid &amp;&amp; !contactForm.tel.$pristine }"&gt;
              &lt;input type="tel" name="tel" class="form-control" ng-model="formData.tel" placeholder="Telefoonnummer" min-length="10" required&gt;
              &lt;p ng-show="contactForm.tel.$error.minlength" class="help-block"&gt;Je telefoonnummer lijkt iets te kort, misschien mis je iets als "+31" of "043"&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;!-- TEXT --&gt;
          &lt;div class="form-group" ng-class="{ 'has-error' : contactForm.text.$invalid &amp;&amp; !contactForm.text.$pristine }"&gt;
              &lt;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&gt;&lt;/textarea&gt;
              &lt;p ng-show="contactForm.text.$error.minlength" class="help-block"&gt;Vertel ons iets meer...&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;!-- SUBMIT BUTTON --&gt;
          &lt;input type="submit" ng-submit="processForm()" ng-disabled="contactForm.$invalid" value="Maak afspraak"&gt;
  
  &lt;!--         &lt;pre&gt;
          {{formData}}
          &lt;/pre&gt; --&gt;
  
      &lt;/form&gt;
  </code></pre>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>.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' }
            });
          };
        }
      };
  })
  </code></pre>
  
  <p>The process.php file is still empty since I'm not quite sure what to put here.</p>