diff --git a/package.json b/package.json index 4f35457..9e4f41b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-contact-form", - "version": "0.1.0", + "version": "1.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.11.9", diff --git a/src/ContactForm.js b/src/ContactForm.js index 822e3f3..0359774 100644 --- a/src/ContactForm.js +++ b/src/ContactForm.js @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { useForm } from 'react-hook-form'; import emailjs from 'emailjs-com'; import { ToastContainer, toast } from 'react-toastify'; @@ -5,6 +6,7 @@ import 'react-toastify/dist/ReactToastify.min.css'; const ContactForm = () => { const { register, errors, handleSubmit, reset } = useForm(); + const [disabled, setDisabled] = useState(false); const toastifySuccess = () => { toast('Form sent!', { @@ -22,12 +24,14 @@ const ContactForm = () => { const onSubmit = async (data) => { // Send form email try { + setDisabled(true); const templateParams = { name: data.name, email: data.email, subject: data.subject, message: data.message }; + console.log('clicked'); await emailjs.send( process.env.REACT_APP_SERVICE_ID, @@ -38,6 +42,7 @@ const ContactForm = () => { reset(); toastifySuccess(); + setDisabled(false); } catch (e) { console.log(e); } @@ -120,7 +125,8 @@ const ContactForm = () => { {errors.message && Please enter a message} - diff --git a/src/index.css b/src/index.css index 93802c4..965dde2 100644 --- a/src/index.css +++ b/src/index.css @@ -86,6 +86,12 @@ form { border: 2px solid var(--green); } +.submit-btn:disabled:hover { + background-color: var(--dark); + color: var(--green) !important; + cursor: wait; +} + @media (max-width: 768px) { .submit-message { width: 125px;