By Prem Tiwari in Angular JS. Updated on
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 | < !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 | < ?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; '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.
Sharing is caring!
Tags: angular contact form, angularjs and php, angularjs and php example, angularjs contact form, contact form in angularjs
