11/08/2020 javascript - how to send an email with Vuejs?

- Stack Overflow

how to send an email with Vuejs?

Asked 2 years, 5 months ago Active 28 days ago Viewed 21k times

How can I do to send an email with Vuejs2. I manage to get the input data and turned them
into json but I can not send them to a mailbox.
6 I look for the side of PHPMailer but facing PHP and Vue do not mix.

How can I send the form content?

Template :
2

<div class="JC-contact__form">
<b-form @submit="onSubmit" v-if="show">

<b-form-group class="JC-contact__form--lastName">
<b-form-input type="text" v-model="form.lastName"> </b-form-input>
</b-form-group>

<b-form-group class="JC-contact__form--firstName">
<b-form-input type="text" v-model="form.firstName"> </b-form-input>
</b-form-group>

<b-form-group>
<b-form-input type="text" v-model="form.topic"> </b-form-input>
</b-form-group>
<b-form-group>
<b-form-input type="email" v-model="form.email"></b-form-input>
</b-form-group>

<b-form-textarea v-model="form.text"></b-form-textarea>

<b-button type="submit">Envoyer</b-button>
</b-form>

</div>

Script :

export default {
name: 'Contact',
data () {
return {
form: {
lastName: '',
firstName: '',
topic: '',
email: '',
text: ''
},
file: null,
show: true
}
},
methods: {
onSubmit (evt) {
evt.preventDefault();
alert(JSON.stringify(this.form));
}, acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and
By using our site, you
onReset (evt) {
our Terms of Serviceevt.preventDefault();
.

https://stackoverflow.com/questions/49149550/how-to-send-an-email-with-vuejs 1/6
11/08/2020 javascript - how to send an email with Vuejs? - Stack Overflow
/* Reset our form values */
this.form.lastName = '';
this.form.firstName = '';
this.form.topic = '';
this.form.email = '';
this.form.text = '';
/* Trick to reset/clear native browser form validation state */
this.show = false;
this.$nextTick(() => {
this.show = true
});
}
}
}

javascript forms email vue.js

edited Mar 7 '18 at 10:55 asked Mar 7 '18 at 10:26

DenisMasot
493 2 8 16

Browser doesn't send mails. Servers do. You need to call some api to send mail. – Erndob Mar 7 '18 at
11:01

1 You may want to take a look at EmailJS, which allows sending email using pre-built templates directly
from Javascript [disclosure - I'm one of the creators] – Sasha Mar 7 '18 at 13:11

3 Answers Active Oldest Votes

Sending mail from Vue directly is not possible as you need some sort of server to handle the
mail protocol. This can never be done directly from the browser. I am not familiar with PHP, so
6 I can't help you with that. In node you need the nodemailer package and some smtp server to
handle the email like Amazon Simple Email Server (or you could use your gmail account).
What you could also do is use axios to send a post request to SendGrid or Mandrill or some
service like that. They will convert your request to an email and send it to an address specified
in you request body.

More info here:

https://sendgrid.com/docs/API_Reference/Web_API/mail.html

https://mandrillapp.com/api/docs/

answered Mar 7 '18 at 11:00

Imre_G
1,697 11 26

This is how I did:

1 Mailing from the server side

The PHP mail() function will just work fine. Nothing fancy here.
By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and
of Service. - This one must be located somewhere accessible on your server.
our Terms mail.php

https://stackoverflow.com/questions/49149550/how-to-send-an-email-with-vuejs 2/6
11/08/2020 javascript - how to send an email with Vuejs? - Stack Overflow

<?php

$name = "Undefined name";

if(isset($_POST['name'])){
$name = $_POST['name'];
}

$message = "<p>Hi!</p>";
$message .= "<p>Wazaaaaa $name</p>";

$to_email = 'dest@mail.com';
$subject = 'Mail subject';
$headers[] = 'MIME-Version: 1.0';
$headers[] = 'Content-type: text/html; charset=UTF-8';
$headers[] = 'From: Biloo <noreply@ydomain.com>';

mail($to_email, $subject, $message, implode("\r\n", $headers));

?>

Be aware that headers values must be trustworthy (no unverified user-submited values).

Sending data to the mailing script

Then VueJS is suppposed to send the appropriate data to the mailing script:

components/Mail.vue

<template>
<div>
<transition name="fade" mode="out-in">
<div v-if="sent">
<p>Thanks</p>
</div>
</transition>
</div>
<div v-if="!sent" class="formGroup">
<b-form @submit="onSubmit">
<b-form-input
id="input-name"
v-model="form.name"
type="text"
required
placeholder="Name"
/>
<b-button type="submit">
Contact
</b-button>
</b-form>
</div>
</div>
</template>

<script>
const querystring = require("querystring");

export default {
data() {
return {
sent: false,
form: {
By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and
name: ""
our Terms of Service. }

https://stackoverflow.com/questions/49149550/how-to-send-an-email-with-vuejs 3/6
11/08/2020 javascript - how to send an email with Vuejs? - Stack Overflow
};
},
methods: {
onSubmit(e) {
e.preventDefault();
this.$axios
.post(
"https://theServer.com/mail.php",
querystring.stringify(this.form)
)
.then(res => {
this.sent = true;
});
}
}
};
</script>

Here, it is important to note that the default behavior of Axios is to post a JSON object.
However, doing so, PHP will receive an empty $_POST value. Data must therefore be
formatted using the querystring dependency before being posted.

Querystring can be installed with npm:

npm i querystring

edited Jun 20 at 9:12 answered Sep 5 '19 at 10:45

Community ♦ Yako
1 1 2,981 7 33 61

<template>
<div class="request-a-callback-form">
0 <transition name="fade" mode="out-in">
<div v-if="sent">
<p>Thanks for contacting us, we will get back to you shortly...</p>
</div>
</transition>
<form v-on:submit="sendForm">
<input type="text" v-model="ContactForm.name" placeholder="Your Name">
<input type="text" v-model="ContactForm.email" placeholder="Email Address">
<input type="text" v-model="ContactForm.phone" placeholder="Phone Number">
<input type="text" v-model="ContactForm.subject" placeholder="Subject">
<textarea v-model="ContactForm.message" rows="8" cols="80" class="form-
control">
</textarea>
<br>
<button data-text="submit" type="submit" class="btn btn-
primary">Submit</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
sent: false,
ContactForm: {
name : '',
email: '',
phone: '',
subject: '',
By using our site, you acknowledge that you
message: '' have read and understand our Cookie Policy, Privacy Policy, and
our Terms of Service. }

https://stackoverflow.com/questions/49149550/how-to-send-an-email-with-vuejs 4/6
11/08/2020 javascript - how to send an email with Vuejs? - Stack Overflow
}
},
methods: {
sendForm(e) {
e.preventDefault()
console.log(this.ContactForm)
this.$axios.post('api/mailserver.php',
querystring.stringify(this.ContactForm)).then(res => {
this.sent = true
})
}
}
}
</script>

Your php Server

<?php
// Allow from any origin
if(isset($_SERVER["HTTP_ORIGIN"]))
{
// You can decide if the origin in $_SERVER['HTTP_ORIGIN'] is something
you want to
allow, or as we do here, just allow all
header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
}
else
{
//No HTTP_ORIGIN set, so we allow any. You can disallow if needed here
header("Access-Control-Allow-Origin: *");
}

header("Access-Control-Allow-Credentials: true");
header("Access-Control-Max-Age: 600"); // cache for 10 minutes

if($_SERVER["REQUEST_METHOD"] == "OPTIONS")
{
if (isset($_SERVER["HTTP_ACCESS_CONTROL_REQUEST_METHOD"]))
header("Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE,
PUT");
//Make
sure you remove those you do not want to support

if (isset($_SERVER["HTTP_ACCESS_CONTROL_REQUEST_HEADERS"]))
header("Access-Control-Allow-Headers:
{$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");

//Just exit with 200 OK with the above headers for OPTIONS method
exit(0);
}
//From here, handle the request as it is ok

if(!empty($_POST['name'])){
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$subject = $_POST['subject'];
$message = $_POST['message'];
}

$message = "$message";

$to_email = '<email to be sent to>';

$subject = "$subject";
$headers[] = 'MIME-Version: 1.0';
$headers[] = 'Content-type: text/html; charset=UTF-8';
By using our site,$headers[]
you acknowledge that you
= "From: have read and understand our Cookie Policy, Privacy Policy, and
<$email>";
our Terms of Service.

https://stackoverflow.com/questions/49149550/how-to-send-an-email-with-vuejs 5/6
11/08/2020 javascript - how to send an email with Vuejs? - Stack Overflow
mail($to_email, $subject, $message, implode("\r\n", $headers));

?>

answered Feb 10 at 15:14

Gbadamosi Moshood
1

By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and
our Terms of Service.

https://stackoverflow.com/questions/49149550/how-to-send-an-email-with-vuejs 6/6