Feat: Adiciona estilo do form
This commit is contained in:
parent
ec8c15ef50
commit
67eab80954
@ -1,18 +1,51 @@
|
||||
.form{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
left: 30px;
|
||||
width: 748px;
|
||||
& h1{
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.formLabel{
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #100D0E;
|
||||
}
|
||||
.formInput{
|
||||
height: 46px;
|
||||
width: 748px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #100D0E;
|
||||
border-radius: 25px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.checkbox{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 13.58px;
|
||||
margin-bottom: 12.6px;
|
||||
}
|
||||
.signupButton{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4.28px;
|
||||
& p{
|
||||
color: #FF0000;
|
||||
}
|
||||
& input{
|
||||
width: 18.64px;
|
||||
height: 18px;
|
||||
border: 1px solid #000000;
|
||||
border-radius: 3px;
|
||||
}
|
||||
& a{
|
||||
color: #100D0E;
|
||||
}
|
||||
}
|
||||
input.input-error,
|
||||
select.input-error{
|
||||
@ -27,8 +60,9 @@ select.input-error{
|
||||
display: flex;
|
||||
position: relative;
|
||||
justify-content: right;
|
||||
float: right;
|
||||
top: 30px;
|
||||
width: 748px;
|
||||
height: 0px;
|
||||
top: 10px;
|
||||
}
|
||||
.errorP{
|
||||
font-family: 'Roboto';
|
||||
@ -38,7 +72,31 @@ select.input-error{
|
||||
line-height: 14px;
|
||||
color: #FF0000;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.35;
|
||||
.sentP{
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: #008000;
|
||||
}
|
||||
.signupButtonDiv{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 748px;
|
||||
height: 52.44px;
|
||||
}
|
||||
.signupButton{
|
||||
background: #000000;
|
||||
border-radius: 25px;
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
letter-spacing: 0.05em;
|
||||
color: #FFFFFF;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@ -2,8 +2,10 @@ import { useFormik } from 'formik';
|
||||
import './Contact.modules.scss'
|
||||
import { Schema } from '../schemas/Schema'
|
||||
|
||||
const onSubmit = async (actions:any) => {
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||
const onSubmit = async (values:any, actions:any) => {
|
||||
console.log(values);
|
||||
console.log(actions);
|
||||
await new Promise((resolve) => setTimeout(resolve, 3000));
|
||||
actions.resetForm()
|
||||
};
|
||||
|
||||
@ -20,101 +22,106 @@ const Contact = () => {
|
||||
validationSchema: Schema ,
|
||||
onSubmit
|
||||
})
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1>Preencha o formulário</h1>
|
||||
<div className='formWrapper'>
|
||||
<form onSubmit={handleSubmit} className='form' autoComplete='off'>
|
||||
<h1>Preencha o formulário</h1>
|
||||
|
||||
{errors.nome && touched.nome &&
|
||||
<div className='errorDiv'>
|
||||
<p className='errorP'>{errors.nome}</p>
|
||||
</div>}
|
||||
<label htmlFor="nome">Nome</label>
|
||||
<label className='formLabel' htmlFor="nome">Nome</label>
|
||||
<input value={values.nome}
|
||||
onChange={handleChange}
|
||||
id='nome'
|
||||
type="text"
|
||||
placeholder='Seu nome completo'
|
||||
onBlur={handleBlur}
|
||||
className={errors.nome && touched.nome ? "input-error" : ""}/>
|
||||
className={<input/> ? "formInput" : "formInput" && errors.nome && touched.nome ? "input-error" : ""}/>
|
||||
|
||||
{errors.email && touched.email &&
|
||||
<div className='errorDiv'>
|
||||
<p className='errorP'>{errors.email}</p>
|
||||
</div>}
|
||||
<label htmlFor="email">E-mail</label>
|
||||
<label className='formLabel'htmlFor="email">E-mail</label>
|
||||
<input value={values.email}
|
||||
onChange={handleChange}
|
||||
id='email'
|
||||
type="email"
|
||||
placeholder='Seu e-mail'
|
||||
onBlur={handleBlur}
|
||||
className={errors.email && touched.email ? "input-error" : ""}/>
|
||||
className={<input/> ? "formInput" : "formInput" &&errors.email && touched.email ? "input-error" : ""}/>
|
||||
|
||||
{errors.cpf && touched.cpf &&
|
||||
<div className='errorDiv'>
|
||||
<p className='errorP'>{errors.cpf}</p>
|
||||
</div>}
|
||||
<label htmlFor="cpf">CPF</label>
|
||||
<label className='formLabel'htmlFor="cpf">CPF</label>
|
||||
<input value={values.cpf}
|
||||
onChange={handleChange}
|
||||
id='cpf'
|
||||
type="number"
|
||||
placeholder='000.000.000-00'
|
||||
onBlur={handleBlur}
|
||||
className={errors.cpf && touched.cpf ? "input-error" : ""}/>
|
||||
className={<input/> ? "formInput" : "formInput" &&errors.cpf && touched.cpf ? "input-error" : ""}/>
|
||||
|
||||
{errors.nascimento && touched.nascimento &&
|
||||
<div className='errorDiv'>
|
||||
<p className='errorP'>{errors.nascimento}</p>
|
||||
</div>}
|
||||
<label htmlFor="nascimento">Data de Nascimento</label>
|
||||
<label className='formLabel'htmlFor="nascimento">Data de Nascimento</label>
|
||||
<input value={values.nascimento}
|
||||
onChange={handleChange}
|
||||
id='nascimento'
|
||||
type="number"
|
||||
placeholder='00.00.0000'
|
||||
onBlur={handleBlur}
|
||||
className={errors.nascimento && touched.nascimento ? "input-error" : ""}/>
|
||||
className={<input/> ? "formInput" : "formInput" &&errors.nascimento && touched.nascimento ? "input-error" : ""}/>
|
||||
|
||||
{errors.telefone && touched.telefone &&
|
||||
<div className='errorDiv'>
|
||||
<p className='errorP'>{errors.telefone}</p>
|
||||
</div>}
|
||||
<label htmlFor="telefone">telefone</label>
|
||||
<label className='formLabel' htmlFor="telefone">telefone</label>
|
||||
<input value={values.telefone}
|
||||
onChange={handleChange}
|
||||
id='telefone'
|
||||
type="tel"
|
||||
placeholder='(00) 00000-0000'
|
||||
onBlur={handleBlur}
|
||||
className={errors.telefone && touched.telefone ? "input-error" : ""}/>
|
||||
className={<input/> ? "formInput" : "formInput" &&errors.telefone && touched.telefone ? "input-error" : ""}/>
|
||||
|
||||
|
||||
{errors.instagram && touched.instagram &&
|
||||
<div className='errorDiv'>
|
||||
<p className='errorP'>{errors.instagram}</p>
|
||||
</div>}
|
||||
<label htmlFor="instagram">Instagram</label>
|
||||
<label className='formLabel' htmlFor="instagram">Instagram</label>
|
||||
<input value={values.instagram}
|
||||
onChange={handleChange}
|
||||
id='instagram'
|
||||
type="text"
|
||||
placeholder='@seuuser'
|
||||
onBlur={handleBlur}
|
||||
className={errors.instagram && touched.instagram ? "input-error" : ""}/>
|
||||
className={<input/> ? "formInput" : "formInput" &&errors.instagram && touched.instagram ? "input-error" : ""}/>
|
||||
|
||||
<div className='checkbox'>
|
||||
<p>*</p>
|
||||
<label htmlFor="check">
|
||||
<a href="">Declaro que li e aceito</a>
|
||||
</label>
|
||||
<input id='check' type="checkbox" required/>
|
||||
</div>
|
||||
<div className='signupButton'>
|
||||
<button disabled={isSubmitting} type='submit'>CADASTRE-SE</button>
|
||||
<div className='signupButtonDiv'>
|
||||
<button className='signupButton' autoFocus={isSubmitting} type='submit' >CADASTRE-SE</button>
|
||||
</div>
|
||||
{isSubmitting &&
|
||||
<div className='sent'>
|
||||
<p className='sentP'>*Formulário enviado com sucesso!</p>
|
||||
</div>}
|
||||
</form>
|
||||
</div>
|
||||
</>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user