79 lines
2.3 KiB
JavaScript
79 lines
2.3 KiB
JavaScript
import axios from "axios";
|
|
import { useState, useEffect } from "react";
|
|
|
|
export default function Form() {
|
|
const [message, setMessage] = useState("");
|
|
const [name, setName] = useState("");
|
|
const [mail, setMail] = useState("");
|
|
const [tel, setTel] = useState("");
|
|
const sendMail = (e) => {
|
|
e.preventDefault();
|
|
axios
|
|
.post("/api/hello", {
|
|
msg: message,
|
|
name: name,
|
|
mail: mail,
|
|
tel: tel,
|
|
})
|
|
.then(function (response) {
|
|
console.log(response);
|
|
})
|
|
.catch(function (error) {
|
|
console.log(error);
|
|
});
|
|
};
|
|
return (
|
|
<div className="flex flex-row px-48 justify-around">
|
|
<form className="flex flex-col py-12">
|
|
<input
|
|
name="name"
|
|
placeholder="Imię"
|
|
className="border border-slate-300 h-8 w-[32rem] mt-4 px-4 transition ease-in-out m-0 focus:text-gray-700 focus:border-blue-600 focus:outline-none"
|
|
onChange={(e) => {
|
|
setName(e.target.value);
|
|
}}
|
|
></input>
|
|
|
|
<span className="flex flex-row w-[32rem]">
|
|
<input
|
|
name="phone"
|
|
placeholder="Telefon"
|
|
className="mr-1 border border-slate-300 h-8 w-[16rem] mt-4 px-4 transition ease-in-out m-0 focus:text-gray-700 focus:border-blue-600 focus:outline-none"
|
|
onChange={(e) => {
|
|
setTel(e.target.value);
|
|
}}
|
|
></input>
|
|
<input
|
|
name="email"
|
|
placeholder="Email"
|
|
className="ml-1 border border-slate-300 h-8 w-[16rem] mt-4 px-4 transition ease-in-out m-0 focus:text-gray-700 focus:border-blue-600 focus:outline-none"
|
|
onChange={(e) => {
|
|
setMail(e.target.value);
|
|
}}
|
|
></input>
|
|
</span>
|
|
|
|
<textarea
|
|
name="message"
|
|
placeholder="Wiadomość"
|
|
className="border border-slate-300 h-64 w-[32rem] mt-4 px-4 py-4 transition ease-in-out m-0 focus:text-gray-700 focus:border-blue-600 focus:outline-none"
|
|
onChange={(e) => {
|
|
setMessage(e.target.value);
|
|
}}
|
|
></textarea>
|
|
<button
|
|
className="bg-red-500 text-gray-100 font-medium mt-4 px-3 py-3 w-[32rem] ring-0 ring-offset-2 ring-red-500 transition ease-in-out duration-200 hover:ring-2 hover:bg-rose-600"
|
|
onClick={(e) => {
|
|
sendMail(e);
|
|
}}
|
|
>
|
|
Wyślij
|
|
</button>
|
|
</form>
|
|
<div className="grid place-content-center">
|
|
<img src="/images/envelope.png" className="w-96 p-16"></img>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|