Compare commits

..

11 Commits

Author SHA1 Message Date
e58916ae0b Merge pull request 'development' (#9) from development into main
Reviewed-on: #9
2023-01-20 07:56:02 +00:00
a5d38b72c5 Merge pull request 'feature(contatoSASS): Implementa SASS da página de contato responsivo.' (#8) from feature/contatoSASS into development
Reviewed-on: #8
2023-01-20 07:52:45 +00:00
c37943453d Merge pull request 'feature(contato): Implementa React e Typescript da página do contato.' (#7) from feature/contato into development
Reviewed-on: #7
2023-01-20 07:47:01 +00:00
1ce7da9178 Merge pull request 'feature(institucionalSASS): Implementa SASS da página institucional responsivo.' (#6) from feature/institucionalSASS into development
Reviewed-on: #6
2023-01-20 07:44:19 +00:00
fa9528b6b0 Merge pull request 'feature(institucional): Implementa React e Typescript da página institucional.' (#5) from feature/institucional into development
Reviewed-on: #5
2023-01-20 07:42:07 +00:00
0e12406dbd Merge pull request 'feature(footerSASS): Implementa SASS para o footer responsivo.' (#4) from feature/footerSASS into development
Reviewed-on: #4
2023-01-20 07:38:28 +00:00
94bcea8406 Merge pull request 'feature(footer): Implementa React e Typescript para o footer.' (#3) from feature/footer into development
Reviewed-on: #3
2023-01-20 07:31:28 +00:00
b91baf24d5 Merge pull request 'feature(headerSASS): Implementa SASS para o header responsivo.' (#2) from feature/headerSASS into development
Reviewed-on: #2
2023-01-20 07:23:52 +00:00
32009aee31 Merge pull request 'feature(header): Implementa React e Typescript para o header.' (#1) from feature/header into development
Reviewed-on: #1
2023-01-20 07:19:06 +00:00
4f1f8215fc feature(contatoSASS): Implementa SASS da página de contato responsivo. 2023-01-20 04:17:50 -03:00
6af17b42dd feature(contato): Implementa React e Typescript da página do contato. 2023-01-20 04:16:18 -03:00

View File

@ -0,0 +1,133 @@
import { Formik, Form, Field, ErrorMessage } from "formik";
import FormSchema from "./schema/FormSchema";
import { useState } from "react";
interface IFormikValues {
name: string;
email: string;
cpf: string;
data: string;
telefone: string;
instagram?: string;
checkbox: boolean;
}
const initialValues = {
name: "",
email: "",
cpf: "",
data: "",
telefone: "",
instagram: "",
checkbox: false,
};
export const ContactForm = () => {
const [isSubmited, setIsSubmited] = useState(false);
const formSubmit = (values: IFormikValues) => {
setIsSubmited(true);
};
return (
<Formik
onSubmit={formSubmit}
initialValues={initialValues}
validationSchema={FormSchema}
validateOnMount
>
{({ errors, touched, isValid, validateForm }) => (
<Form>
<div className="form-entryes">
<label htmlFor="name">Nome</label>
<span className="error">
<ErrorMessage name="name" className="form-ivalid-feedback" />
</span>
<Field
id="name"
name="name"
placeholder="Seu nome completo"
className={errors.name && touched.name && "invalid"}
/>
</div>
<div className="form-entryes">
<label htmlFor="email">E-mail</label>
<span className="error">
<ErrorMessage name="email" className="form-ivalid-feedback" />
</span>
<Field
id="email"
name="email"
placeholder="Seu e-mail"
className={errors.email && touched.email && "invalid"}
/>
</div>
<div className="form-entryes">
<label htmlFor="cpf">CPF</label>
<span className="error">
<ErrorMessage name="cpf" className="form-ivalid-feedback" />
</span>
<Field
id="cpf"
name="cpf"
type="number"
placeholder="000.000.000-00"
className={errors.cpf && touched.cpf && "invalid"}
/>
</div>
<div className="form-entryes">
<label htmlFor="data">Data de Nascimento:</label>
<span className="error">
<ErrorMessage name="data" className="form-ivalid-feedback" />
</span>
<Field
id="data"
name="data"
type="number"
placeholder="00.00.0000"
className={errors.data && touched.data && "invalid"}
/>
</div>
<div className="form-entryes">
<label htmlFor="telefone">Telefone:</label>
<span className="error">
<ErrorMessage name="telefone" className="form-ivalid-feedback" />
</span>
<Field
id="telefone"
name="telefone"
type="tel"
placeholder="(00) 00000-0000"
className={errors.telefone && touched.telefone && "invalid"}
/>
</div>
<div className="form-entryes">
<label htmlFor="instagram">Instagram</label>
<span>
<ErrorMessage name="instagram" className="form-ivalid-feedback" />
</span>
<Field id="instagram" name="instagram" placeholder="@seuuser" />
</div>
<div className="checkbox_wrapper">
<label htmlFor="checkbox">Declaro que li e aceito</label>
<span className="error">
<ErrorMessage name="checkbox" className="form-ivalid-feedback" />
</span>
<Field
type="checkbox"
id="checkbox"
name="checkbox"
className={errors.checkbox && touched.checkbox && "invalid"}
/>
</div>
<button>CADASTRE-SE</button>
{isSubmited && <span>*Formulário enviado com sucesso!</span>}
</Form>
)}
</Formik>
);
};