87 lines
2.1 KiB
JavaScript
87 lines
2.1 KiB
JavaScript
import React, { useState } from "react";
|
||
import axios from "axios";
|
||
import "./contact-form.style.scss";
|
||
import Dog from "../../assets/images/main/contact-form/mask.svg";
|
||
import BluePlanet from "../../assets/images/main/contact-form/Planet Blue.svg";
|
||
import YellowPlanet from "../../assets/images/main/contact-form/Planet Yellow.svg";
|
||
|
||
import FormInput from "../form-input/form-input.component";
|
||
import CustomButton from "../custom-button/custom-button.component";
|
||
|
||
const postForm = (e, data) => {
|
||
e.preventDefault();
|
||
console.log("post form", data);
|
||
axios
|
||
.post("http://127.0.0.1:3005/contact", data)
|
||
.then((res) => console.log(res));
|
||
};
|
||
|
||
const ContactForm = () => {
|
||
const [formData, setFormData] = useState({
|
||
name: "",
|
||
email: "",
|
||
phone: "",
|
||
});
|
||
|
||
const setName = (name) => {
|
||
setFormData({ ...formData, name: name });
|
||
};
|
||
|
||
const setEmail = (email) => {
|
||
setFormData({ ...formData, email: email });
|
||
};
|
||
|
||
const setPhone = (phone) => {
|
||
setFormData({ ...formData, phone: phone });
|
||
};
|
||
|
||
const handleSubmit = (e) => {
|
||
e.preventDefault();
|
||
console.log(e);
|
||
};
|
||
|
||
return (
|
||
<div className="container contact-form">
|
||
<h2>Let’s bring your project to the Moon</h2>
|
||
|
||
<div className="image">
|
||
<img src={Dog} alt="cute dog in space" />
|
||
<img src={BluePlanet} alt="blue planet" className="planet blue" />
|
||
<img src={YellowPlanet} alt="yellow planet" className="planet yellow" />
|
||
</div>
|
||
|
||
{/* <form
|
||
// action="http://127.0.0.1:3005/contact"
|
||
className="container"
|
||
// method="POST"
|
||
onSubmit={(e) => postForm(e, formData)}
|
||
>
|
||
<FormInput
|
||
name="name"
|
||
type="text"
|
||
label="Name"
|
||
onChange={setName}
|
||
required
|
||
/>
|
||
<FormInput
|
||
name="email"
|
||
type="email"
|
||
label="E-mail"
|
||
onChange={setEmail}
|
||
required
|
||
/>
|
||
<FormInput
|
||
name="phone"
|
||
type="tel"
|
||
label="Phone"
|
||
onChange={setPhone}
|
||
required
|
||
/>
|
||
|
||
<CustomButton text="Send" />
|
||
</form> */}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default ContactForm;
|