'Make the email contact part of my website more demanding in terms of content and with a Snackbar that says the message has been sent?
I'm using Emailjs to help me to send emails, I'm want to only send me an email if all inputs have something and the email is valid, and, also, put a Snackbar if the the message was successfully sent. How can I do it? my implementation
code:
function sendEmail(e) {
e.preventDefault();
emailjs.sendForm('gmail', 'template_bc48enl', e.target, 'user_GTlxptiKDu3LQHwm9LrrO')
.then((result) => {
console.log(result.text);
}, (error) => {
console.log(error.text);
});
e.target.reset()
}
///////////////////////////////////////////////////////////////
<form onSubmit={sendEmail}>
<fieldset>
<div className="row pt-5 mx-auto">
<div>
<label htmlFor="contactName">Name <span className="required">*</span></label>
<input type="text" defaultValue="" size="35" id="contactName" placeholder="Name" name="name" onChange={this.handleChange}/>
</div>
<div>
<label htmlFor="contactEmail">Email <span className="required">*</span></label>
<input type="email" defaultValue="" size="35" id="contactEmail" name="email" onChange={this.handleChange}/>
</div>
<div>
<label htmlFor="contactSubject">Subject</label>
<input type="text" defaultValue="" size="35" id="contactSubject" placeholder="Subject" name="subject" onChange={this.handleChange}/>
</div>
<div>
<label htmlFor="contactMessage">Message <span className="required">*</span></label>
<textarea cols="50" defaultValue="Let me hire you!" rows="15" id="contactMessage" placeholder="Your message" name="message"></textarea>
</div>
<div>
<button className="submit">Submit</button>
<span id="image-loader">
<img alt="" src="images/loader.gif" />
</span>
</div>
</div>
</fieldset>
</form>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
