Create React form and send to custom e-mail

Hi there,

Well, it's not so simple - the most straightforward way would be to use ‘mailto:’ as an action attribute of a form. It opens the default mail client to send the data by email - but I've noticed that it doesn't work consistently in every browser - for me, it only works in Firefox. You can check by yourself:

import React, { Component } from 'react';
import { MDBContainer, MDBRow, MDBCol, MDBBtn, MDBIcon, MDBInput } from 'mdbreact';

class FormPage extends Component {
    state = {
      name: '',
      email: '',
      subject: '',
      message: ''
    }

    handleChange = e => {
      const inputId = e.target.name;
      const value = e.target.value;
      this.setState({ [inputId]: value })
   }

    render(){
      return (
        <MDBContainer fluid>
            <MDBRow>
                <MDBCol md='6'>
                    <form action="mailto:ania.morawska92@gmail.com" method="POST" encType="text/plain" className='hoverable' style={{ padding: 38 }}>
                        <p className='h5 text-center mb-4'>Formulario Contacto</p>
                        <div className='grey-text'>
                            <MDBInput
                                label='Your Name'
                                name='name'
                                value={this.state.name}
                                onChange={this.handleChange}
                                icon='user'
                                group
                                type='text'
                            />
                            <MDBInput
                                label='E-mail here'
                                icon='envelope'
                                name='email'
                                group
                                value={this.state.email}
                                onChange={this.handleChange}
                                type='email'
                            />
                            <MDBInput
                                label='Subject'
                                name='subject'
                                icon='tag'
                                group
                                type='text'
                                value={this.state.subject}
                                onChange={this.handleChange}
                            />
                            <MDBInput
                                type='textarea'
                                rows='2'
                                value={this.state.message}
                                onChange={this.handleChange}
                                name='message'
                                label='Your message please...'
                                icon='pencil-alt'
                            />
                        </div>
                        <div className='text-center'>
                            <MDBBtn outline color='secondary' type="submit">
                                Send Now !!! <MDBIcon far icon='paper-plane' className='ml-1' />
                            </MDBBtn>
                        </div>
                    </form>
                </MDBCol>
            </MDBRow>
        </MDBContainer>
    );
    }

};

export default FormPage;

I think that the only way is to write a backend script where you send the data on onSumbit event attached to the form - it too complex to elaborate on it here, but I'm sure you can find more information on the internet

Best, Ania