AngularJS Contact Form With PHPMailer - PROGRAMMER

11/20/2016
AngularJSContactFormwithPHPMailerPROGRAMMER.LK
Laravel Easy
Installation (Larav
Home
Bootstrap Sinhala
Tutorial
Facebook Application
development
Web Applications
ANGULARJS CONTACT FORM WITH

PHPMAILER
Facebook Share
Unlock
LOGIN
Username
Password
Yasith Gamage 2016-01-08 Web Applications No

Comments
request PHP Contact
Remember Me
form tute . article

.
PHP Contact form script googalize
. HTML, PHP Contact form
Log In
Register | Forgot Password?
code .
AngularJS web Programming touch
. Google
publish free & open source JavaScript Library
FIND US ON FACEBOOK
Programmer.lk
809likes
, JavaScript Framework .
contact form 3 .
3 industry Libraries

LikePage
Bethefirstofyourfriendstolikethis
AngularJS JavaScript Framework

Bootstrap CSS Framework
PHPMailer (email sending library for php)
https://www.programmer.lk/angularjscontactformwithphpmailer/
POPULAR
RECENT
1/12
11/20/2016
Bootstrap Contact form style .
Facebook
Application
development
(ii)
form responsive. AngularJS User Front end

/ HTML Form Values server side PHPMailer
pass . form validation part
AngularJs . PHPMailer SMTP mail server
February 21, 2016
email send .
Facebook
Application
development
(i)
VIEW DEMO
December 28, 2015
index.html
Angular directivesadd . AngularJS
AngularJS
Contact Form
with PHPMailer
validation parts
January 8, 2016
Form design file . bootstrap
Html CSS form .

Waiting time
file download
script
external add css, js files download

local use . .
sites official cdn links.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
December 30,
2015
Facebook
Share to Unlock
February 5, 2016
<html>
Next
<head>
<title>AngularJS Contact Form with PHPMailer</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.cs
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.

<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"
<script src="app.js"></script>
2/12
11/20/2016
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<script src="controllers.js"></script>
</head>
<body ng-app="contactApp" >
<div class="vertical-middle">
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">Contact Form<
</div>
<div ng-controller="ContactController" class
<form ng-submit="submit(contactform)"
<div class="form-group" ng-class=
<label for="inputName" class=
<div class="col-lg-10">
<input ng-model="formData.inputName"
</div>
</div>
<label for="inputEmail" class
<input ng-model="formData.inputEmail"
3/12
11/20/2016
</div>
</div>
<label for="inputSubject" class
<input ng-model="formData.inputSubject"
</div>
</div>
<label for="inputMessage" class
<textarea ng-model="formData.inputMessage"
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10"
<button type="submit" class
Send Message
</button>
</div>
</div>
</form>
4/12
11/20/2016
<p ng-class="result" style="padding: 15px; margin: 0;"

</div>
</div>
</div>
</div>
</body>
</html>
app.js
Angular appmodule contactApp
variable assign .
1
var app = angular.module('contactApp', []);
controllers.js
index.html html form values, ajax
contact-form.php file . AngularJS
$http service . .
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
app.controller('ContactController', function ($scope, $http

$scope.result = 'hidden'
$scope.resultMessage;
$scope.formData; //formData is an object holding the name, email, subject, and message
$scope.submitButtonDisabled = false;
$scope.submitted = false; //used so that form errors are shown only after the form has been subm
$scope.submit = function(contactform) {
5/12
11/20/2016
24
25
26
27
28
29
30
31
32
33
34
$scope.submitted = true;
$scope.submitButtonDisabled = true;
if (contactform.$valid) {
$http({
method: 'POST',
url : 'contact-form.php',
data: $.param($scope.formData),//param method from jQuery
headers : { 'Content-Type': 'application/x-www-form-urlencoded'
}).success(function(data){
console.log(data);
if (data.success) { //success comes from the return json object
$scope.submitButtonDisabled = true;
$scope.resultMessage = data.message;
$scope.result='bg-success';
} else {
$scope.resultMessage = data.message;
$scope.result='bg-danger';
}
});
} else {
6/12
11/20/2016
$scope.resultMessage = 'Failed <img src="http://demo.programmer.lk/angularjs-contact-for

$scope.result='bg-danger';
}
}
});
contact-form.php
email generate .
PHPMailer library .
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<?php
/**********************************************************
/WWW.PROGRAMMER.LK /
/**********************************************************/
error_reporting(E_ALL);
ini_set('display_errors', '0');
require 'smtp/class.phpmailer.php'; //include phpmailer
if (isset($_POST['inputName']) && isset($_POST['inputEmail'
//check if any of the inputs are empty

if (empty($_POST['inputName']) || empty($_POST['inputEmail'
$data = array('success' => false, 'message' => 'Please fill out the form completely.'
echo json_encode($data);
7/12
11/20/2016
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
exit;
}
$usermail = $_POST['inputEmail']; //get sender mail address
$sender = $_POST['inputName']; // get sender Name
$from= "USERNAME@MY-DOMAIN.COM"; //SMTP mail address
$mail = new PHPMailer();

$mail->IsSMTP(true); // use SMTP ?
$mail->IsHTML(false); // use HTML emails ?
$mail->SMTPAuth = true; // enable SMTP authentication
$mail->SMTPSecure = 'ssl'; // secure transfer enabled
$mail->Host = "EMAIL SERVER HOST"; //mail server Host
$mail->Port =465;// set the SMTP port
$mail->Username = "USERNAME@MY-DOMAIN.COM";// SMTPusername
$mail->Password = "EMAIL_PASSWORD";// SMTP password
$mail->SetFrom($from, 'Contact Form'); //

$mail->AddReplyTo($usermail, $sender); // set reply to sender
PROGRAMMER.LK
$mail->AddAddress('RECIPIENT@DOMAIN.COM','YOUR-NAME'
GENERAL
PROGRAMMING / CODING
OTHER
Search
QUESTIONS
the Site...
$mail->Subject = $_POST['inputSubject'];
8/12
11/20/2016
$mail->Body = "Name: " . $_POST['inputName'] . "\r\n\r\n Email: "

$mail->WordWrap = 50;
if (isset($_POST['ref'])) {
$mail->Body .= "\r\n\r\nRef: " . $_POST['ref'];
}
if(!$mail->Send()) {
$data = array('success' => false, 'message' => 'Message could not be sent. Mailer Error: '
exit;
} else {
$data = array('success' => true, 'message' => 'Thanks! We have received your message.'
}
} else {
PROGRAMMER.LK
$data = array('success' => false, 'message' => 'Please
GENERAL
PROGRAMMING / CODING
OTHER
fill out the form completely.'
Search
QUESTIONS
the Site...
}
?>
9/12
11/20/2016
AngularJS touch
.
. library functions
. application develop function
.
contact form MVCarchitecture .
index.html page view , app.js model
controllers.js Controller .
Angular .
industry actively . Node.js
.
demo Source files .
DOWNLOAD SOURCE
Share
Share
Tweet
Share
Share
About The Author
Yasith Gamage
Hi, I'm Ysith, Currently I am working as
PROGRAMMER.LK
HOD in private software firm in Sri Lanka. I
love what i am doing. Thouch with me:
GENERAL
www.yasith.net
PROGRAMMING
/ CODING
OTHER
Search
QUESTIONS
the Site...
Related Posts
10/12

AngularJS Contact Form With PHPMailer - PROGRAMMER

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

AngularJS Contact Form With PHPMailer - PROGRAMMER

Загружено:

Авторское право:

Доступные форматы

11/20/2016

ANGULARJS CONTACT FORM WITH

Yasith Gamage 2016-01-08 Web Applications No

request PHP Contact

form tute . article

Register | Forgot Password?

AngularJS JavaScript Framework

Bootstrap Contact form style .

form responsive. AngularJS User Front end

February 21, 2016

December 28, 2015

Angular directivesadd . AngularJS

Form design file . bootstrap

Html CSS form .

external add css, js files download

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.cs

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.

<p ng-class="result" style="padding: 15px; margin: 0;"

var app = angular.module('contactApp', []);

app.controller('ContactController', function ($scope, $http

$scope.resultMessage = 'Failed <img src="http://demo.programmer.lk/angularjs-contact-for

if (isset($_POST['inputName']) && isset($_POST['inputEmail'

//check if any of the inputs are empty

$from= "USERNAME@MY-DOMAIN.COM"; //SMTP mail address

$mail = new PHPMailer();

$mail->SetFrom($from, 'Contact Form'); //

$mail->Body = "Name: " . $_POST['inputName'] . "\r\n\r\n Email: "

fill out the form completely.'

About The Author

Вам также может понравиться