Email an angular Js form

Question

I wrote a form in HTML and have used angular js there.

Nothing fancy, a simple form with mail to:email address in action.

The link http://www.chami.com/tips/internet/010597I.html says it should work alone with mailTo added to action attribute.

But it does not work.What else I need to add?

<!DOCTYPE HTML>
<html lang="en-US" ng-app="myApp">

<head>
    <meta charset="UTF-8">
    <title>Form</title>

    <meta name="viewport">

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
    <link rel="stylesheet" href="css/styling.css" />

</head>

<body ng-app="myApp">
    <form name="userForm" action="mailto:simrankaur.adept@gmail.com" ng-controller="sample" method="POST" enctype="multipart/form-data" novalidate>
        <div class="row col-lg-offset-3">
            <div class="form-group col-lg-6" ng-class="{ 'has-error': userForm.name.$invalid && userForm.name.$dirty}">
                <label class="control-label">Name</label>
                <input type="text" class="form-control" name="name" ng-model="user.name" ng-required="true" ng-minlength="3" placeholder="Name" />
                <span class="error-message" ng-show="userForm.name.$dirty
            && userForm.name.$error.required">You are required to provide your name</span>

                <span class="error-message" ng-show="userForm.name.$dirty
            && userForm.name.$error.minlength">Your name should contain 3 or more characters</span>
            </div>
        </div>
        <div class="row col-lg-offset-3">
            <div class="form-group col-lg-6" ng-class="{ 'has-error': userForm.email.$invalid && userForm.email.$dirty }">
                <label class="control-label">Email</label>
                <input type="email" class="form-control" name="email" ng-model="user.email" ng-required="true" placeholder="Email" />
                <span class="error-message" ng-show="userForm.email.$dirty
            && userForm.name.$error.required">You are required to provide your Email Id</span>
            </div>
        </div>

        <div class="row col-lg-offset-3">
            <div class="form-group col-lg-6" ng-class="{ 'has-error': userForm.phonenumber.$invalid && userForm.phonenumber.$dirty}">
                <label class="control-label">Mobile Number</label>
                <input type="text" class="form-control" name="phonenumber" ng-model="user.phonenumber" ng-minlength="10" ng-maxlength="10" ng-required='true' placeholder="10 digit Mobile Number" />
            </div>
        </div>

        <div class="row col-lg-offset-3">
            <div class="form-group col-lg-6" ng-class="{ 'has-error': userForm.Age.$invalid && userForm.Age.$dirty}">
                <label class="control-label">Age</label>
                <input type="text" class="form-control" name="Age" ng-model="user.Age" placeholder="Age (Optional)" ng-model-options="{updateOn: 'blur'}" />
            </div>
        </div>

        <div class="row col-lg-offset-3">
            <div class="form-group col-lg-6" ng-class="{ 'has-error': userForm.Company.$invalid && userForm.Company.$dirty}">
                <label class="control-label">Company</label>
                <input type="text" class="form-control" name="Company" ng-model="user.Company" placeholder="Company Name (Optional)" ng-minlength="2" />
            </div>
        </div>

        <div class="row col-lg-offset-3">
            <!-- <button class="btn btn-primary"
          ng-disabled="userForm.$invalid"
          type="submit">Save</button>-->

            <input type="submit" value="Submit">
        </div>
    </form>
</body>

</html>

I don't think what you are trying to do is possible, you need a back end script to send the actual email. See here: http://stackoverflow.com/questions/12626940/mailto-on-submit-button — Erik Berkun-Drevnig, Jul 11 '15 at 08:46

score 0 · Answer 1 · answered Jul 11 '15 at 08:46

mailto: URIs in form actions require a browser and email client that will play very nicely together. These are rare enough to make using mailto: URIs there completely impractical.

You need to use an HTTP(S) URI and a server side form handler (third party hosted options are available).

Email an angular Js form

1 Answers1