|
|
|
@ -1,4 +1,13 @@
|
|
|
|
|
const Contact = () => (
|
|
|
|
|
import { FormEventHandler, useRef, useState } from 'react';
|
|
|
|
|
import ReCAPTCHA from 'react-google-recaptcha';
|
|
|
|
|
import { useTheme } from 'next-themes';
|
|
|
|
|
|
|
|
|
|
const formURL = 'http://localhost:4000/portfolio';
|
|
|
|
|
|
|
|
|
|
const Contact = () => {
|
|
|
|
|
const { theme, setTheme } = useTheme();
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className="contact">
|
|
|
|
|
<div className="container">
|
|
|
|
|
<div className="header" id="contact">
|
|
|
|
@ -6,13 +15,14 @@ const Contact = () => (
|
|
|
|
|
</div>
|
|
|
|
|
<form
|
|
|
|
|
encType="application/x-www-form-urlencoded"
|
|
|
|
|
action="https://forms.guusvanmeerveld.dev/portfolio"
|
|
|
|
|
action={formURL}
|
|
|
|
|
className="content"
|
|
|
|
|
method="POST"
|
|
|
|
|
name="contact"
|
|
|
|
|
>
|
|
|
|
|
<label htmlFor="email">Email</label>
|
|
|
|
|
<input name="email" type="email" required placeholder="Your email address" id="email" />
|
|
|
|
|
|
|
|
|
|
<label htmlFor="type">Message type</label>
|
|
|
|
|
<select name="type[]" id="type">
|
|
|
|
|
<option value="bug">Bug</option>
|
|
|
|
@ -20,14 +30,22 @@ const Contact = () => (
|
|
|
|
|
<option value="suggestion">Suggestion</option>
|
|
|
|
|
<option value="other">Other</option>
|
|
|
|
|
</select>
|
|
|
|
|
|
|
|
|
|
<label htmlFor="message">Message</label>
|
|
|
|
|
<textarea required name="message" placeholder="Your message" id="message"></textarea>
|
|
|
|
|
<button className="button" type="submit">
|
|
|
|
|
|
|
|
|
|
<ReCAPTCHA
|
|
|
|
|
theme={theme as 'light' | 'dark'}
|
|
|
|
|
sitekey={process.env.NEXT_PUBLIC_CAPTCHA_KEY}
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<button className="button submit" type="submit">
|
|
|
|
|
Send
|
|
|
|
|
</button>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default Contact;
|
|
|
|
|