- #1
Darkmisc
- 222
- 31
- TL;DR Summary
- When I click submit on my contact form, I get emails at the right address, but it's saying "Your message wasn't delivered to your-email@example.com because the domain example.com couldn't be found. Check for typos or unnecessary spaces and try again."
I have not specified your-email@example.com as my recipient address anywhere in my code.
Hi everyone
I'm making an email contact form that's supposed to send emails to my-email@gmail.com.
When I click submit, I'll get an email at my-email@gmail.com saying:
Your message wasn't delivered to your-email@example.com because the domain example.com couldn't be found. Check for typos or unnecessary spaces and try again.
That is, the email from the submission form is bouncing and it seems to think your-email@example.com was the intended address.
However, I can't find your-email@example.com anywhere in my code (I can't even find it where I originally got the code https://mailtrap.io/blog/react-contact-form/).
Does anyone know why it's doing this?
Thanks
[CODE lang="javascript" title="email.js"]import React from 'react';
import axios from 'axios';
class Email extends React.Component {
constructor(props) {
super(props);
this.state = {
name: '',
email: '',
telephone: '',
message: ''
};
}
handleSubmit(e) {
e.preventDefault();
axios({
method: "POST",
url: "http://localhost:3003/send",
data: {
name: this.state.name,
email: this.state.email,
telephone: this.state.telephone,
message: this.state.message
}
}).then((response) => {
if (response.data.status === 'success') {
alert("Message Sent.");
this.resetForm();
} else if (response.data.status === 'fail') {
alert("Message failed to send.");
}
});
}
resetForm() {
this.setState({ name: '', email: '', telephone: '', message: '' });
}
onNameChange(event) {
this.setState({ name: event.target.value });
}
onEmailChange(event) {
this.setState({ email: event.target.value });
}
onTelephoneChange(event) {
this.setState({ telephone: event.target.value });
}
onMessageChange(event) {
this.setState({ message: event.target.value });
}
render() {
return (
<div>
<form id="contact-form" onSubmit={this.handleSubmit.bind(this)} method="POST">
<div>
<label htmlFor="name">Name</label>
<input type="text" id="name" value={this.state.name} onChange={this.onNameChange.bind(this)} />
</div>
<div>
<label htmlFor="email">Email address</label>
<input type="email" id="email" value={this.state.email} onChange={this.onEmailChange.bind(this)} />
</div>
<div>
<label htmlFor="telephone">Telephone number</label>
<input type="tel" id="telephone" value={this.state.telephone} onChange={this.onTelephoneChange.bind(this)} />
</div>
<div>
<label htmlFor="message">Message</label>
<textarea rows="5" id="message" value={this.state.message} onChange={this.onMessageChange.bind(this)} />
</div>
<button type="submit">Submit</button>
</form>
</div>
);
}
}
export default Email;[/CODE]
[CODE lang="javascript" title="index.js" highlight="12, 43"]var express = require('express');
var router = express.Router();
var nodemailer = require('nodemailer');
var cors = require('cors');
const creds = require('./config');
var transport = {
host: 'smtp.gmail.com',
port: 465,
secure: true,
auth: {
user: 'my-email@gmail.com',
pass: 'aaaa bbbb cccc dddd'
}
};
var transporter = nodemailer.createTransport(transport);
transporter.verify((error, success) => {
if (error) {
console.log(error);
} else {
console.log('Server is ready to take messages');
}
});
const app = express();
// Enable CORS
app.use(cors());
app.use(express.json());
app.use('/', router);
router.post('/send', (req, res, next) => {
var name = req.body.name;
var email = req.body.email;
var telephone = req.body.telephone;
var message = req.body.message;
var content = `Name: ${name}\nEmail: ${email}\nTelephone: ${telephone}\nMessage: ${message}`; // Include telephone in the content
var mail = {
from: name,
to: 'my-email@gmail.com',
subject: 'New Message from Contact Form',
text: content
};
transporter.sendMail(mail, (err, data) => {
if (err) {
console.log(err);
res.json({
status: 'fail'
});
} else {
console.log('Email sent successfully');
res.json({
status: 'success'
});
}
});
});
app.listen(3003);
[/CODE]
[CODE lang="javascript" title="config.js" highlight="2"]module.exports = {
USER: 'my-email@gmail.com',
PASS: 'aaaa bbbb cccc dddd'
}[/CODE]
I'm making an email contact form that's supposed to send emails to my-email@gmail.com.
When I click submit, I'll get an email at my-email@gmail.com saying:
Your message wasn't delivered to your-email@example.com because the domain example.com couldn't be found. Check for typos or unnecessary spaces and try again.
That is, the email from the submission form is bouncing and it seems to think your-email@example.com was the intended address.
However, I can't find your-email@example.com anywhere in my code (I can't even find it where I originally got the code https://mailtrap.io/blog/react-contact-form/).
Does anyone know why it's doing this?
Thanks
[CODE lang="javascript" title="email.js"]import React from 'react';
import axios from 'axios';
class Email extends React.Component {
constructor(props) {
super(props);
this.state = {
name: '',
email: '',
telephone: '',
message: ''
};
}
handleSubmit(e) {
e.preventDefault();
axios({
method: "POST",
url: "http://localhost:3003/send",
data: {
name: this.state.name,
email: this.state.email,
telephone: this.state.telephone,
message: this.state.message
}
}).then((response) => {
if (response.data.status === 'success') {
alert("Message Sent.");
this.resetForm();
} else if (response.data.status === 'fail') {
alert("Message failed to send.");
}
});
}
resetForm() {
this.setState({ name: '', email: '', telephone: '', message: '' });
}
onNameChange(event) {
this.setState({ name: event.target.value });
}
onEmailChange(event) {
this.setState({ email: event.target.value });
}
onTelephoneChange(event) {
this.setState({ telephone: event.target.value });
}
onMessageChange(event) {
this.setState({ message: event.target.value });
}
render() {
return (
<div>
<form id="contact-form" onSubmit={this.handleSubmit.bind(this)} method="POST">
<div>
<label htmlFor="name">Name</label>
<input type="text" id="name" value={this.state.name} onChange={this.onNameChange.bind(this)} />
</div>
<div>
<label htmlFor="email">Email address</label>
<input type="email" id="email" value={this.state.email} onChange={this.onEmailChange.bind(this)} />
</div>
<div>
<label htmlFor="telephone">Telephone number</label>
<input type="tel" id="telephone" value={this.state.telephone} onChange={this.onTelephoneChange.bind(this)} />
</div>
<div>
<label htmlFor="message">Message</label>
<textarea rows="5" id="message" value={this.state.message} onChange={this.onMessageChange.bind(this)} />
</div>
<button type="submit">Submit</button>
</form>
</div>
);
}
}
export default Email;[/CODE]
[CODE lang="javascript" title="index.js" highlight="12, 43"]var express = require('express');
var router = express.Router();
var nodemailer = require('nodemailer');
var cors = require('cors');
const creds = require('./config');
var transport = {
host: 'smtp.gmail.com',
port: 465,
secure: true,
auth: {
user: 'my-email@gmail.com',
pass: 'aaaa bbbb cccc dddd'
}
};
var transporter = nodemailer.createTransport(transport);
transporter.verify((error, success) => {
if (error) {
console.log(error);
} else {
console.log('Server is ready to take messages');
}
});
const app = express();
// Enable CORS
app.use(cors());
app.use(express.json());
app.use('/', router);
router.post('/send', (req, res, next) => {
var name = req.body.name;
var email = req.body.email;
var telephone = req.body.telephone;
var message = req.body.message;
var content = `Name: ${name}\nEmail: ${email}\nTelephone: ${telephone}\nMessage: ${message}`; // Include telephone in the content
var mail = {
from: name,
to: 'my-email@gmail.com',
subject: 'New Message from Contact Form',
text: content
};
transporter.sendMail(mail, (err, data) => {
if (err) {
console.log(err);
res.json({
status: 'fail'
});
} else {
console.log('Email sent successfully');
res.json({
status: 'success'
});
}
});
});
app.listen(3003);
[/CODE]
[CODE lang="javascript" title="config.js" highlight="2"]module.exports = {
USER: 'my-email@gmail.com',
PASS: 'aaaa bbbb cccc dddd'
}[/CODE]
