Angular js contact form example

 Angular js contact form example

Before copy this code download angular js file and mention the path within the script. with bootstrap css. (require basic knowledge of angular js and php to understand)

//Script

Insert script in the header section

<script>
  // define angular module/app
var formApp = angular.module('formApp', []);
// create angular controller and pass in $scope and $http
function formController($scope, $http) {
// create a blank object to hold our form information
// $scope will allow this to pass between controller and view
$scope.formData = {};
// process the form
$scope.processForm = function() {
$http({
       method  : 'POST',
           data    : $.param($scope.formData),  // pass in data as strings
       headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data (not request payload)
   })
       .success(function(data) {
           console.log(data);
           if (!data.success) {
            // if not successful, bind errors to error variables
               $scope.errorName = data.errors.name;
               $scope.errorEmail = data.errors.email;
               $scope.errorPhone = data.errors.phone;
               $scope.errorSubject = data.errors.sub;
               $scope.errorMessage = data.errors.msg;
           } else {
            // if successful, bind success message to message
               $scope.message = data.message;
           }
       });
};
}
</script>
           url     : 'process.php',  // process.php handles validation and send mail to  the user

//code segment

Insert this code after body section

 <h2>Contact Us</h2>

            <div id="messages" class="well" ng-show="message">{{ message }}</div>
            <form ng-submit="processForm()">
                <div class="input-prepend" ng-class="{ 'has-error' : errorName }">
                    <span class="add-on"><i class="icon-user"></i></span>
                    <input name="name" class="span4" id="name" size="16" type="text" placeholder="Name" ng-model="formData.name">            
                </div>
                  <span class="help-block" ng-show="errorName">{{ errorName }}</span>
                <div class="input-prepend" ng-class="{ 'has-error' : errorEmail }">
                    <span class="add-on"><i class="icon-envelope"></i></span>
                    <input name="email" class="span4" id="email" size="16" type="email" placeholder="Email Address" ng-model="formData.email">
                </div>
                     <span class="help-block" ng-show="errorEmail">{{ errorEmail }}</span>
               <div class="input-prepend" ng-class="{ 'has-error' : errorPhone }">
                    <span class="add-on"><i class="icon-envelope"></i></span>
                    <input name="phone" class="span4" id="phone" size="16" type="text" placeholder="Mobile Number" ng-model="formData.phone" onkeypress='validate(event)'>
                </div>
                     <span class="help-block" ng-show="errorPhone">{{ errorPhone }}</span>
                <div class="input-prepend" ng-class="{ 'has-error' : errorSubject }">
                    <span class="add-on"><i class="icon-globe"></i></span>
                    <input name="sub" class="span4" id="prependedInput" size="16" type="text" placeholder="Subject" ng-model="formData.sub">
                </div>
                     <span class="help-block" ng-show="errorSubject">{{ errorSubject }}</span>
                <textarea class="span6" name="message" id="message" ng-model="formData.msg"></textarea>
                <span class="help-block" ng-show="errorMessage">{{ errorMessage }}</span>
                <div class="row">
                    <div class="span2">
                        <input id="submit_btn" type="submit" class="btn btn-inverse" value="Send Message" >
                    </div>
                </div>
            </form>
        </div> <!--End page content column-->

//Process.php

<?php

$errors         = array();   // array to hold validation errors
$data    = array();   // array to pass back data
// validate the variables ====================================================== if (empty($_POST['name']))  $errors['name'] = 'Name is required.';
 if (empty($_POST['email']))  $errors['email'] = 'Email address is required.';
 if (empty($_POST['phone']))  $errors['phone'] = 'Phone is required.';
 if (empty($_POST['sub']))  $errors['sub'] = 'Subject is required.';
 if (empty($_POST['msg']))  $errors['msg'] = 'Message is required.';
// return a response ===========================================================
 // response if there are errors if ( ! empty($errors)) {
  // if there are items in our errors array, return those errors  $data['success'] = false;  $data['errors']  = $errors; } else {
  // if there are no errors, return a message  $data['success'] = true;
$to = "infophpuptodate@gmail.com";// use your email address which need to be receive
   $subject = htmlspecialchars(trim($_POST['sub']));   $message = '';   $message .= htmlspecialchars(trim($_POST['msg']));   $message .= "\r\n";   $message .= htmlspecialchars(trim($_POST['name']));   $message .= "\r\n";   $message .= htmlspecialchars(trim($_POST['phone']));   $message .= "\r\n";   $message .= htmlspecialchars($_POST['email']);   $header = "From:info@youremail.com \r\n";   $retval = mail ($to,$subject,$message,$header); if($retval){  $data['message'] = 'Your Mail has been sent successfully...We will contact you soon!';}else{  $data['message'] = 'Mail sent failed!';} }
 // return all our data to an AJAX call echo json_encode($data);
?>

SHARE

blogger

• 
• 
• 
• 
•