AngularJS Contact Form Send Email with Attachment using PHP

AngularJS Contact Form Send Email with Attachment using PHP

In this Post We Will Explain About is AngularJS Contact Form Send Email with Attachment using PHP With Example and Demo.Welcome on infinityknow.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to AngularJS Contact Form with Bootstrap and PHPMailerExample

In this post we will show you Best way to implement Angular Contact Form Example Send SMTP Mailer using PHP, hear for AngularJS PHP Contact Form Script – Messages Modulewith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

index.html

    <title>AngularJS Contact Form with Bootstrap and PHPMailer</title>
    
    
    
    <a href="http://jquery.min.js">http://jquery.min.js</a>
    <a href="http://bootstrap.min.js">http://bootstrap.min.js</a>
    <a href="http://angular.js">http://angular.js</a>
    <a href="http://app.js">http://app.js</a>
    <a href="http://controllers.js">http://controllers.js</a>


    <div class="vertical-middle">
        <div class="container">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2 class="panel-title">Live Contact Form Example</h2>
                </div>
                <div class="panel-body">
                    <form name="live_contact" method="post" action="" class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="first_input_name" class="col-md-2 control-label">Name</label>
                            <div class="col-md-10">
                                
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="live_input_email" class="col-md-2 control-label">Email</label>
                            <div class="col-md-10">
                                
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="live_subject" class="col-md-2 control-label">Enter Subject</label>
                            <div class="col-md-10">
                                
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="live_comments" class="col-md-2 control-label">Enter Comments</label>
                            <div class="col-md-10">
                                <textarea class="form-control" rows="4" id="live_comments" name="live_comments"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-offset-2 col-md-10">
                                <button type="submit" class="btn btn-default">
                                    Submit
                                </button>
                            </div>
                        </div>
                    </form>
                    <p style="padding: 16px;margin: 0">{{ comment_msg }}</p>
                </div>
            </div>
        </div>
    </div>

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

controllers.js

liveApp.controller('liveconCtrl', function ($scope, $http) {
    $scope.data_res = 'hidden'
    $scope.comment_msg;
    $scope.live_formDta; 
    $scope.contact_form_submit = false;
    $scope.form_submitted = false; 
    $scope.submit = function(live_contact) {
        $scope.form_submitted = true;
        $scope.contact_form_submit = true;
        if (live_contact.$valid) {
            $http({
                method  : 'POST',
                url     : 'live-contact-form.php',
                data    : $.param($scope.live_formDta),  
                headers : { 'Content-Type': 'application/x-www-form-urlencoded' } 

            }).success(function(data){
                console.log(data);
                if (data.success) { 
                    $scope.contact_form_submit = true;
                    $scope.comment_msg = data.message;
                    $scope.data_res='bg-success';
                } else {
                    $scope.contact_form_submit = false;
                    $scope.comment_msg = data.message;
                    $scope.data_res='bg-danger';
                }
            });
        } else {
            $scope.contact_form_submit = false;
            $scope.comment_msg = 'Error Failed <img src="https://www.infinityknow.com/blog/wp-includes/images/smilies/icon_sad.gif" alt=":(" class="wp-smiley">  Please Contact form fill out all the fields.';
            $scope.data_res='bg-danger';
        }
    }
});

live-contact-form.php

 false, 'message' => 'Please contact form fill out the all the fields form completely.');
        echo json_encode($res_dta);
        exit;
    }

    $email = new PHPMailer();

    $email->From = $_POST['live_input_email'];
    $email->FromName = $_POST['first_input_name'];
    $email->AddAddress('[email protected]'); //recipient 
    $email->Subject = $_POST['live_subject'];
    $email->Body = "Name: " . $_POST['first_input_name'] . "\r\n\r\nMessage: " . stripslashes($_POST['live_comments']);

    if (isset($_POST['live_refernce'])) {
        $email->Body .= "\r\n\r\nRef: " . $_POST['live_refernce'];
    }

    if(!$email->send()) {
        $res_dta = array('success' => false, 'message' => 'Your Message can not be sent. some error Mailer Error: ' . $email->ErrorInfo);
        echo json_encode($res_dta);
        exit;
    }

    $res_dta = array('success' => true, 'message' => 'Thanks! success .!! We have some received your message.');
    echo json_encode($res_dta);

} else {

    $res_dta = array('success' => false, 'message' => 'Please all the fill out the contact form completely.');
    echo json_encode($res_dta);

}

Example

I hope you have Got What is How to Create Contact Form with PHPMailer to send mails using Angular And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.