0

I have a full form written out with other components for the success of the submission and validation, but now I want to connect to Emailjs so I can receive the email in my actual gmail. Heres what the EmailJs code wants me to add to my code but Im not sure how to pass 2 arguments together and make it work.

function sendEmail(e) {
    e.preventDefault();

    emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', e.target, 'YOUR_USER_ID')
      .then((result) => {
          console.log(result.text);
      }, (error) => {
          console.log(error.text);
      });
  } 

and here is my code

import React from 'react'
import useForms from './useForms'
import validate from './validateInfo'

const FormContact = ({submitForm}) => {

const { handleChange, values, handleSubmit, errors} = useForms(submitForm, validate);


return (
    <div className="form-content-right">

        <form action="" className="form" onSubmit={handleSubmit}>
            <h6>Get in contact with us!</h6>

            <div className="form-inputs">
                <label htmlFor="name" className="form-label">
                   Full Name: 
                </label>
                <input id='name'
                    type="text" 
                    name='name' 
                    className="form-input" 
                    placeholder='Name'
                    value={values.name}
                    onChange={handleChange}
                />
                {errors.name && <p>{errors.name}</p>}
            </div>
            <div className="form-inputs">
                <label htmlFor="email" className="form-label">
                    Email Address:
                </label>
                <input id='email'
                    type="email" 
                    name='email' 
                    className="form-input" 
                    placeholder='Email'
                    value={values.email}
                    onChange={handleChange} 
                />
                {errors.email && <p>{errors.email}</p>}
            </div>
            <div className="form-inputs">
                <label htmlFor="number" className="form-label">
                    Contact Number:
                </label>
                <input id='number'
                    type="tel" 
                    name='number' 
                    className="form-input" 
                    placeholder='Contact number' />
            </div>
            <div className="form-inputs">
                <label htmlFor="country" className="form-label">
                    Country:
                </label>
                <input id='country'
                    type="country" 
                    name='country' 
                    className="form-input" 
                    placeholder='Country' 
                    value={values.country}
                    onChange={handleChange}
                />
                {errors.country && <p>{errors.country}</p>}
            </div>
            <div className="form-inputs">
                <label htmlFor="message" className="form-label">
                        Message:
                </label>
                    <textarea id='message'
                        type="message" 
                        name='message' 
                        className="form-input" 
                        placeholder='Enter message here' 
                        value={values.message}
                        onChange={handleChange}
                    />
            </div>
            <button className="form-input-btn" type='submit' >
                Contact Us
            </button>
        </form>

    </div>
)
}

export default FormContact

I need handleSubmit for my code to work but also somehow need to add "sendEmail" to that same argument inside onSubmit

1 Answer 1

1

You can create an anonymous function that calls both your needed functions:

<form action="" className="form" onSubmit={(e) => {handleSubmit(e); sendEmail(e);}} >
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.