Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

90
Views
React Bootstrap using EmailJs show toast/modal on successful sent

I want a toast/modal notification once the form is submitted, right now its only "alert" message. And i want it like this:

<div className="toast_modal">We've received your inquiry, we'll get back to you as soon as possible. Thank you!"</div>

here is my code:

import {useState} from 'react';
import emailjs from 'emailjs-com';

const NameForm = () => {
  const [showModal,setShowModal] = useState(false);
  const sendEmail = (e) => {
      e.preventDefault();

      emailjs.sendForm('service_ID', 'template_ID', e.target, 'user_ID')
        .then((result) => {
            console.log(result.text);
            setShowModal(true);

        }, (error) => {
            console.log(error.text);
        });
        e.target.reset();
    }
    
    return (
      <div>
        <h1 className="text-center text-md-left mb-3">Get in Touch</h1>
        <form className="contact-form" onSubmit={sendEmail}>
            <div className="form-group mb-0 py-3">
              <textarea className="form-control custom--fields-mod text-the-primary" id="message" rows="3" placeholder="Message *" name="message" required></textarea>
            </div>
            <div className="form-group row py-2 mb-0">
              <div className="col-md-6 text-center text-md-left py-2 py-md-0">
                <input className="buttons-width float-md-right btn btn-dark-moderate-orange rounded-0" type="submit" value="SEND MESSAGE" />
              </div>
            </div>
        </form>
        {showModal && (
        <div className="modal fade show d-block" tabIndex={-1}>
          <div className="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div className="modal-content bg-white border border-the-primary">
              <div className="modal-body text-center py-4">
                <p>We've received your inquiry, we'll get back to you as soon as possible. Thank you!"</p>
                <button type="button" class="btn btn-dark-moderate-orange px-5" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>
        )}

      </div>
    );
  
}
export default NameForm;

Im trying to achieve the toast/modal notifications once the form is submitted.

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

First of all I prefer to you to use functional component. To show toast_modal you can use a state. Then use this state in return.

import {useState} from 'react';
import emailjs from 'emailjs-com';

const NameForm = () => {
  const [showModal,setShowModal] = useState(false);
  const sendEmail = (e) => {
      e.preventDefault();

      emailjs.sendForm('service_ID', 'template_ID', e.target, 'user_ID')
        .then((result) => {
            console.log(result.text);
            setShowModal(true);

        }, (error) => {
            console.log(error.text);
        });
        e.target.reset();
    }
    
    return (
      <div>
        <h1 className="text-center text-md-left mb-3">Get in Touch</h1>
        <form className="contact-form" onSubmit={sendEmail}>
            <div className="form-group mb-0 py-3">
              <textarea className="form-control custom--fields-mod text-the-primary" id="message" rows="3" placeholder="Message *" name="message" required></textarea>
            </div>
            <div className="form-group row py-2 mb-0">
              <div className="col-md-6 text-center text-md-left py-2 py-md-0">
                <input className="buttons-width float-md-right btn btn-dark-moderate-orange rounded-0" type="submit" value="SEND MESSAGE" />
              </div>
            </div>
        </form>
        {showModal && (
        <div className="modal fade show d-block" tabIndex={-1}>
          <div className="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div className="modal-content bg-white border border-the-primary">
              <div className="modal-body text-center py-4">
                <p>We've received your inquiry, we'll get back to you as soon as possible. Thank you!"</p>
                <button type="button" onClick={() => setShowModal(false)} className="btn btn-dark-moderate-orange px-5" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>
        )}

      </div>
    );
  
}
export default NameForm;
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!