Emailing form data using Nodemailer

saldesir
New Member
1 0 0

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 (
    <Page>
        <Layout>
            <Card sectioned>
                <Form onSubmit={this.handleSubmit}>
                    <FormLayout>
                    
                    <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"
                    />
            <Button primary submit>Send Message</Button>
                    </FormLayout>
                </Form>
        </Card>
      </Layout>
    </Page>
  );
}

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', (reqresnext=> {

    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, (errdata=> {

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}`))

saldesir_0-1625624572081.png

 


  
 
0 Likes