By: Prem Tiwari | Last Updated: | In: Angular JS
Hi, folks hope doing well, today I am going to explain a very useful tutorial with you. In today’s tutorial, we are going to create a simple contact form using angularJS and PHP.
The contact form is a standard web page which is available on every website. It allows site’s visitors to contact with site owners or service provider who is responsible for maintenance that website. so that I think why not create a simple contact form using angular js and PHP to receive a response from websites, readers/users.
We are using the angular js for front-end and PHP for the server side. We will write code in PHP which accepts data from an angular form and sends an email to the site administrator. Create a folder named “contact-form” in your web app directory and create a Sample HTML page – index.html. Now copy paste below code in the index.html file.
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 42 43 44 | < !DOCTYPE html> <html ng-app="formExample"> <head> <title>Live Demo - Simple contact form using angularJS and PHP</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" /> <script src="js/angular.js" ></script> <script src="js/formjs.js"></script> </head> <body> <div class="container"> <div ng-controller="formCtrl"> <h2 class="text-center text-primary">Contact form using angularjs and php</h2> <hr /> <form name="userForm" class="form-horizontal well form-search"> <div class="form-group"> <label for="name" class="col-sm-2 control-label">Your Name</label> <div class="col-sm-10"> <input type="name" ng-model="name" class="form-control" id="name" placeholder="Your Name" required/> </div> </div> <div class="form-group"> <label for="email" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" ng-model="email" class="form-control" id="email" placeholder="Your Email" required/> </div> </div> <div class="form-group"> <label for="Message" class="col-sm-2 control-label">Message</label> <div class="col-sm-10"> <textarea ng-model="message" id="Message" class="form-control" rows="3" placeholder="Your Message" required></textarea> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" ng-click="formsubmit(userForm.$valid)" ng-disabled="userForm.$invalid" class="btn btn-primary">Submit</button> </div> </div> </form> </div> </div> </body> </html> |
Create a contact.php page and copy paste below code. Below PHP code will retrieve data from the angular form and send an email to entered an email address.
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 | < ?php /** * Descript: Display the entered data as well send an email to entered email address. * @author Prem Tiwari * */ $post_data = file_get_contents("php://input"); $data = json_decode($post_data); //Just to display the form values echo "Name : " . $data->name; echo "Email : " . $data->email; echo "Message : " . $data->message; // sned an email $to = $data->email; $subject = 'Test email from freewebmentor.com to test angularjs contact form'; $message = $data->message; $headers = 'From: ' . $data->name . 'prem@freewebmentor.com' . "\r\n" . 'Reply-To: prem@freewebmentor.com' . "\r\n" . 'X-Mailer: PHP/' . phpversion(); //php mail function to send email on your email address mail($to, $subject, $message, $headers); ?> |
Do you like & share this article with your friends, and don’t forget to follow us on Facebook and Twitter to learn cool WordPress tutorials.
Prem Tiwari is the founder of FreeWebMentor.com and also a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby and also he has been a regular speaker of WordPress sessions in various IT Companies. View all posts by Prem Tiwari
angular contact form, angularjs and php, angularjs and php example, angularjs contact form, contact form in angularjs
