Create React form and send to custom e-mail


Topic: Create React form and send to custom e-mail

bgining2this asked 3 years ago

Hello comunity !!!

I know this is not maybe a 100% mdbootstrap question, but can anybody help me to send a form in React to a custom e-mail (gmail) i think.

My MDB/React component is this.-

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

const FormPage = () => {
    return (
        <MDBContainer fluid>
            <MDBRow>
                <MDBCol md='6'>
                    <form className='hoverable' style={{ padding: 38 }}>
                        <p className='h5 text-center mb-4'>Formulario Contacto</p>
                        <div className='grey-text text-center'>
                            <MDBInput
                                label='Your Name'
                                icon='user'
                                group
                                type='text'
                                validate
                                error='wrong'
                                success='right'
                            />
                            <MDBInput
                                label='E-mail here'
                                icon='envelope'
                                group
                                type='email'
                                validate
                                error='wrong'
                                success='right'
                            />
                            <MDBInput
                                label='Subject'
                                icon='tag'
                                group
                                type='text'
                                validate
                                error='wrong'
                                success='right'
                            />
                            <MDBInput
                                type='textarea'
                                rows='2'
                                label='Your message please...'
                                icon='pencil-alt'
                            />
                        </div>
                        <div className='text-center'>
                            <MDBBtn outline color='secondary'>
                                Send Now !!! <MDBIcon far icon='paper-plane' className='ml-1' />
                            </MDBBtn>
                        </div>
                    </form>
                </MDBCol>
            </MDBRow>
        </MDBContainer>
    );
};

export default FormPage;

So as this is my first form with MDB i dont know how to implement it, together with PHP ? I dont have idea, could anybody help me please. Thank you in advance.


Anna Morawska staff answered 3 years ago

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


bgining2this commented 3 years ago

Thank you Ania.-

Yes, that was what i was afraid of, its not that simple, even thought with 7 lines of PHP code i think it cant be done, i will research further, but as you say, maybe its too complex to elaborate here. Thank you for your help and good day.


Anna Morawska staff commented 3 years ago

No problem, have a great day :)


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.8.4
  • Device: Desktop
  • Browser: Chromium
  • OS: Arch Linux
  • Provided sample code: No
  • Provided link: No