Removing email form due to issue, get back to.
This commit is contained in:
parent
e3b3571d01
commit
a7b126ca41
|
@ -20,9 +20,3 @@ To do:
|
||||||
- Get proper artwork into database.
|
- Get proper artwork into database.
|
||||||
- Modify about page with proper info, info dependendant on what is requested.
|
- Modify about page with proper info, info dependendant on what is requested.
|
||||||
|
|
||||||
|
|
||||||
OTHER NOTES:
|
|
||||||
|
|
||||||
This project uses an email react form that is on the contact form, created by "Chaoo Charles"
|
|
||||||
https://github.com/chaoocharles/react-email.js
|
|
||||||
https://www.youtube.com/watch?v=bMq2riFCF90
|
|
||||||
|
|
|
@ -8,7 +8,6 @@
|
||||||
"name": "hello",
|
"name": "hello",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@emailjs/browser": "^3.12.1",
|
|
||||||
"@testing-library/jest-dom": "^5.17.0",
|
"@testing-library/jest-dom": "^5.17.0",
|
||||||
"@testing-library/react": "^13.4.0",
|
"@testing-library/react": "^13.4.0",
|
||||||
"@testing-library/user-event": "^13.5.0",
|
"@testing-library/user-event": "^13.5.0",
|
||||||
|
@ -2357,14 +2356,6 @@
|
||||||
"postcss-selector-parser": "^6.0.10"
|
"postcss-selector-parser": "^6.0.10"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@emailjs/browser": {
|
|
||||||
"version": "3.12.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/@emailjs/browser/-/browser-3.12.1.tgz",
|
|
||||||
"integrity": "sha512-C5nK07CgSCFx3onsuRt/ZaaMvIi0T3SHHanM7fKozjSvbZu+OjHHP9W608fYpic0OavF7yIlfy4+lRDO33JdbA==",
|
|
||||||
"engines": {
|
|
||||||
"node": ">=14.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@emotion/is-prop-valid": {
|
"node_modules/@emotion/is-prop-valid": {
|
||||||
"version": "1.2.1",
|
"version": "1.2.1",
|
||||||
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
|
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
|
||||||
|
|
|
@ -3,7 +3,6 @@
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@emailjs/browser": "^3.12.1",
|
|
||||||
"@testing-library/jest-dom": "^5.17.0",
|
"@testing-library/jest-dom": "^5.17.0",
|
||||||
"@testing-library/react": "^13.4.0",
|
"@testing-library/react": "^13.4.0",
|
||||||
"@testing-library/user-event": "^13.5.0",
|
"@testing-library/user-event": "^13.5.0",
|
||||||
|
|
|
@ -1,102 +0,0 @@
|
||||||
|
|
||||||
|
|
||||||
import React, { useRef } from "react";
|
|
||||||
import emailjs from "@emailjs/browser";
|
|
||||||
import styled from "styled-components";
|
|
||||||
|
|
||||||
const ContactForm = () => {
|
|
||||||
const form = useRef();
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const sendEmail = (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
emailjs
|
|
||||||
.sendForm(
|
|
||||||
"replace with service id",
|
|
||||||
"replace with template id",
|
|
||||||
form.current,
|
|
||||||
"replace with user id"
|
|
||||||
)
|
|
||||||
.then(
|
|
||||||
(result) => {
|
|
||||||
console.log(result.text);
|
|
||||||
console.log("message sent");
|
|
||||||
},
|
|
||||||
(error) => {
|
|
||||||
console.log(error.text);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<StyledContactForm>
|
|
||||||
<form ref={form} onSubmit={sendEmail}>
|
|
||||||
<label>Name</label>
|
|
||||||
<input type="text" name="user_name" />
|
|
||||||
<label>Email</label>
|
|
||||||
<input type="email" name="user_email" />
|
|
||||||
<label>Message</label>
|
|
||||||
<textarea name="message" />
|
|
||||||
<input type="submit" value="Send" />
|
|
||||||
</form>
|
|
||||||
</StyledContactForm>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ContactForm;
|
|
||||||
|
|
||||||
// Styles
|
|
||||||
const StyledContactForm = styled.div`
|
|
||||||
width: 400px;
|
|
||||||
|
|
||||||
form {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
flex-direction: column;
|
|
||||||
width: 100%;
|
|
||||||
font-size: 16px;
|
|
||||||
|
|
||||||
input {
|
|
||||||
width: 100%;
|
|
||||||
height: 35px;
|
|
||||||
padding: 7px;
|
|
||||||
outline: none;
|
|
||||||
border-radius: 5px;
|
|
||||||
border: 1px solid rgb(220, 220, 220);
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
border: 2px solid rgba(0, 206, 158, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
max-width: 100%;
|
|
||||||
min-width: 100%;
|
|
||||||
width: 100%;
|
|
||||||
max-height: 100px;
|
|
||||||
min-height: 100px;
|
|
||||||
padding: 7px;
|
|
||||||
outline: none;
|
|
||||||
border-radius: 5px;
|
|
||||||
border: 1px solid rgb(220, 220, 220);
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
border: 2px solid rgba(0, 206, 158, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="submit"] {
|
|
||||||
margin-top: 2rem;
|
|
||||||
cursor: pointer;
|
|
||||||
background: rgb(249, 105, 14);
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
|
@ -1,6 +1,11 @@
|
||||||
// import required component
|
// import required component
|
||||||
import ContactForm from "../components/EmailContactForm"
|
|
||||||
|
|
||||||
|
|
||||||
export function Contact ( props ) {
|
export function Contact ( props ) {
|
||||||
<Contact />
|
return (
|
||||||
|
<div>
|
||||||
|
<h1>Contact</h1>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
}
|
}
|
Loading…
Reference in New Issue