Topic: Create React form and send to custom e-mail
bgining2this free asked 5 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 5 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 free commented 5 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 5 years ago
No problem, have a great day :)
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: 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