I'm creating my portfolio and I have implemented a contact form.
I would to receive visitors messages in my gmail. I don't find on the web how to do it in Angular 2/4.
Should I add a Back end site to do that?
<div class="contactcard">
<md-card class="mdcardcontact">
<md-card-header style="background-color: black; width:100%"></md-card-header>
<div>
<md-card-content>
<form [formGroup]="form" class="form">
<div>
<md-input-container class="full-width">
<input mdInput type="text" formControlName="name" placeholder="Votre nom">
</md-input-container>
</div>
<div>
<md-input-container class="full-width">
<input mdInput type="text" formControlName="email" placeholder="Votre adressse mail">
<md-error *ngIf="form.get('email').hasError('pattern') ">
Votre mail n'est pas valid
</md-error>
</md-input-container>
</div>
<div>
<md-input-container class="full-width">
<input mdInput type="tel" formControlName="telephone" placeholder="Votre numéro de téléphone">
<md-error *ngIf="form.get('email').hasError('pattern') ">
Votre mail n'est pas valid
</md-error>
</md-input-container>
</div>
<div>
<md-input-container class="full-width">
<textarea mdInput type="text" formControlName="message" placeholder="Votre message" style="height:200px; "></textarea>
</md-input-container>
</div>
<button md-fab class="send-button">
<md-icon>send</md-icon>
</button>
</form>
</md-card-content>
</div>
</md-card>
</div>
If I understand correctly you're trying to send an email using Javascript on the front end, which is not possible (see also this question). You're going to have to set up a server or use a 3rd party client for this.
You will need a Server-side Language to do this (PHP, C#, Java, Python...). In sending mail to the client some SMTP protocols have to be executed and this in my opinion at the moment has to be done on the server.So collect user information in your contact form and pass it to the method on the server to transport it.
You need some sort of backend script to do that for you. Then you send required data to this script from your angular app.
nodemailer and sendgrid could be used if you can pass it back to the server side
Related
I have the following contact form:
<div class="container red_layer_footer">
<form action="/var/www/cgi-bin/FormMail.pl" method="POST">
<input type=hidden name="recipient" value="mymail#gmail.com">
<input type=hidden name="subject" value="Nuova mail">
<input type=hidden name="redirect" value="http://www.evogale.it/grazie.html">
<h2>CONTATTI</h2>
<div class="name">
<label for="name"></label>
<input type="text" placeholder="Nome" name="name" id="name_input" required>
</div>
<div class="email">
<label for="email"></label>
<input type="email" placeholder="Mail" name="email" id="email_input" required>
</div>
<div class="message">
<label for="message"></label>
<textarea name="message" placeholder="Messaggio" id="message_input" cols="30" rows="5" required></textarea>
</div>
<div class="submit">
<input type="submit" value="Invia Messaggio" id="form_button">
</div>
<input type=hidden name="required" value="email,name,message">
</form> <!-- // End form -->
</div> <!-- End #container -->
In an html file, and I want it to send email via an SMTP. How should i modify the code to make that happen? Looking around on the web I've seen that I might add some jQuery code?
To be able to send emails, you need to provide the correct SMTP server when you set up your email client. Most of the internet systems use SMTP as a method to transfer mail from one user to another. It is a push protocol. In order to use SMTP you need to configure your Gmail. You need to change two settings of your gmail account from which you are sending the mail i.e.
1. Revoke 2-step verification
2. Enabling less secure apps to access Gmail. You can easily do this by clicking on the link Enable
After this just create a html file and include SMTP in your tag :
<script src="https://smtpjs.com/v3/smtp.js"></script>
Below is the html code which you will need to run in order to send the mail.
<script src=
"https://smtpjs.com/v3/smtp.js">
</script>
<script type="text/javascript">
function sendEmail() {
Email.send({
Host: "smtp.gmail.com",
Username: "sender#email_address.com",
Password: "Enter your password",
To: 'receiver#email_address.com',
From: "sender#email_address.com",
Subject: "Sending Email using javascript",
Body: "Well that was easy!!",
})
.then(function (message) {
alert("mail sent successfully")
});
}
</script>
<body>
<form method="post">
<input type="button" value="Send Email"
onclick="sendEmail()" />
</form>
</body>
NOTE : Best and Secure way to use above method with SecureToken as above method is for understanding purpose, above approach is highly insecure as it exposes credentials to the users , for how to enable Security you can check this https://smtpjs.com/
I have a login page for my angularjs site and I'm using the angularjs material library's inputs.
On first page load LastPass detects the email and password inputs and auto fills them. The problem is if I leave the page and navigate back to the login page (without a full browser refresh), LastPass won't detect the inputs.
My mark up is as follows:
<form class="inputs-form" name="login" layout="column">
<div class="inputs-container">
<h2>Sign In</h2>
<div layout="column" layout-align="start center">
<div ng-if="errorMessage" class="error-text">{{errorMessage}}</div>
<div>
<md-input-container flex="100" class="signin-input-container">
<label>Email</label>
<input class="username" ng-model="email" type="text" />
</md-input-container>
</div>
<div>
<md-input-container flex="100" class="signin-input-container">
<label>Password</label>
<input class="password" ng-model="password" type="password" />
</md-input-container>
</div>
</div>
</div>
<div class="btn-container" flex="100" layout="row" layout-align="center center">
<div>
<button ng-click='login()' class='t3Btn_primary'>Sign In</button>
</div>
</div>
</form>
I've tried setting the id, name and class of the inputs to password and username like I've seen others suggest in other questions but that doesn't work in this case.
It would be great if someone knew how I could get LastPass to detect the inputs everytime the page is rendered and not just when a full browser refresh occurs.
Thanks.
I am now implementing a client side using Angular for a Django REST Framework backend.
In order to get the Alpha of the project up and running in the briefest time, we decided to use the server side validation directly.
Django rest returns a JSON string with one to one correspondence between the fields and the errors.
This feature of Django could allow me to implement such a feature in jQuery in several minutes.
The question is how do I do it with angular?
Code example:
form:
<label for="uname">Login:</label>
<div class="inputUnit" name="email">
<input tpye="email" class="text" name="email" ng-model="formData.email">
</div>
<label for="password">password:</label>
<div class="inputUnit">
<input type="password" class="text" name="password" ng-model="formData.password">
</div>
JSON response from the server in case both of the fields are empty:
{"password": ["This field is required."], "email": ["This field is required."]}
JSON response from the server in case the password is missing and email doesn't match regex:
{"password": ["This field is required."], "email": ["Enter a valid e-mail address."]}
What is the best practice to implement a generic component to display those error to the user?
The desired HTML after displaying the errors:
<label for="uname">Login:</label>
<div class="inputUnit" name="email">
<input tpye="email" class="text" name="email" ng-model="formData.email">
<label for="error">Email error here</lable>
</div>
<label for="password">password:</label>
<div class="inputUnit">
<input type="password" class="text" name="password" ng-model="formData.password">
<label for="error">Password error here</lable>
</div>
Here you could find my attempt to handle server side validation errors with the directive https://github.com/9ci/angle-grinder/blob/c0211c885c561f8ec820b38d506135f4fb8b6dfb/app/scripts/modules/forms.coffee#L321 I hope it would be useful for you.
I'm trying to develop a local registration procedure in my app, so the user will be able to register locally, and login with his personal user and password.
Can someone give me a simple example how can i accomplish this? Meaning how do i store the local username and password input in registration, and later login with this data?
For example this will be my Login and Registarion html pages:
<body onload="init()">
<div id="loginPage" data-role="page">
<div data-role="header">
<h1>Registration/Login Demo</h1>
</div>
<div data-role="content">
<form id="loginForm">
<div data-role="fieldcontain" class="ui-hide-label">
<label for="username">Username:</label>
<input type="text" name="username" id="username" value="" placeholder="Username" />
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<label for="password">Password:</label>
<input type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<label for="password">Re-enter Password:</label>
<input type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<input type="submit" value="Login" id="submitButton">
</form>
</div>
How do i construct my js file?
Thanks.
You can use Storage API of Cordova,which Provides access to the devices storage options as you like to keep process locally,
Two options you can use for achieving this goal; one is database and the other one is local storage. Look here for storage API docs
I have one HTML page with 4 text box, 1 dropdown and 1 button, doe anybody know how I could send these values to my email through javascript so that when you click on verstuur (send) you will get a javascript notification message with (message send or Please check all fields and try again.)
<form action="javascript:;" method="post" id="contact_form">
<div class="row">
<p>
<label>Volledige Naam</label>
<input type="text" name="name" class="text_field" />
</p>
<p>
<label>E-mailadres</label>
<input type="text" name="email" class="text_field" />
</p>
</div>
<div class="row">
<p>
<label>Telefoonnummer</label>
<input type="text" name="phone" class="text_field" />
</p>
<p>
<label>Onderwerp</label>
<select class="text_field" name="subject">
<option>Selecteer een onderwerp</option>
<option value="afspraak">Afspraak Maken</option>
<option value="informatie">Informatie Opvragen</option>
<option value="klacht">Klacht</option>
<option value="overig">Overig</option>
</select>
</p>
</div>
<p>
<label>Bericht</label>
<textarea class="text_field" rows="10" cols="10" name="message"></textarea>
</p>
<input type="submit" class="button" value="Verstuur" />
</form>
You cannot send an email directly from JavaScript. You'll need to use some kind of server side technology (like for ex: PHP) to do this. You can issue an AJAX request to that script via JS and get your mail sent.
You can however, dynamically create a mailto: link so that the browser can open up the user's default mail application form where he can send it.