Hey Shopify family, I am trying to have users input information into a form and have that info emailed using nodemailer. I keep getting a 405 error when I attempt to submit form data which I am using axios. Here is some of my code:
React:
import React from “react”;
import { useState } from “react”;
import { render } from “react-dom”;
import axios from “axios”;
import {
Button,
Card,
Form,
FormLayout,
Layout,
Page,
Stack,
TextField,
} from ‘@shopify/polaris’;
class Index extends React.Component {
state = {
name: ‘’,
email:‘’,
url:‘’,
category:‘’,
network:‘’
};
render(){
const {name} = this.state;
const {email} = this.state;
const {url} = this.state;
const {category} = this.state;
const {network} = this.state;
return (
<TextField
onChange={this.handleChange(‘name’)}
label=“Store Name”
value={name}
type=“name”
/>
<TextField
onChange={this.handleChange(‘email’)}
label=“Email”
value={email}
type=“email”
/>
<TextField
onChange={this.handleChange(‘url’)}
label=“Store Url”
value={url}
type=“url”
/>
<TextField
onChange={this.handleChange(‘category’)}
label=“Store Category”
value={category}
type=“name”
/>
<TextField
onChange={this.handleChange(‘network’)}
label=“Affiliate Network”
value={network}
type=“name”
/>
Send Message
handleSubmit = (e) => {
e.preventDefault();
let data ={
name:this.state.name,
email:this.state.email,
url:this.state.url,
category:this.state.category,
network:this.state.network,
}
axios.post(“/form”,data)
.then(res=>{
this.setState({
sent:true
},this.resetForm())
})
.catch(()=>{
console.log(‘message not sent’);
})
};
handleChange = (field) => {
return (value)=>this.setState({[field]:value});
};
};
export default Index;
Server:
let express = require(‘express’);
let app = express();
const path = require(‘path’);
let nodemailer = require(‘nodemailer’);
// Static folder
app.use(‘/form’, express.text(path.join(__dirname, ‘index’)));
nodemailer.createTransport({
host: “mail.gmail.com”,
port: 587,
secure: false,
auth: {
user: process.env.EMAIL,
pass: process.env.PASSWORD
}
});
app.all(‘/form’, (req, res, next) => {
var name = req.body.name
var email = req.body.email
var url = req.body.url
var category = req.body.category
var network = req.body.network
var content = name: ${name} \n email: ${email} \n url: ${url} \n category: ${category} \n network: ${network}
var mail = {
from: ‘example@gmail.com’,
to: ‘example@gmail.com’,
message: subject,
text: content
}
transporter.sendMail(mail, (err, data) => {
if (err) {
res.send(error)
} else {
res.send(‘success’)
}
});
});
const PORT = process.env.PORT || 8080
app.listen(PORT, () => console.info(server has started on ${PORT}))
