This is a solution to the Newsletter sign-up form with success message challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- Add their email and submit the form
- See a success message with their email after successfully submitting the form
- See form validation messages if:
- The field is left empty
- The email address is not formatted correctly
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
- Solution URL: Frontend Mentor Solution
- Live Site URL: Demo
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- React - JS library
- React Hook Form - Para validar el formulario
- Styled Components - For styles
I reinforced knowledge about how to manage forms with react-hook-form
const {
register,
handleSubmit,
formState: { errors },
} = useForm();
const emailRules = {
required: "Email is required",
pattern: {
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
message: "Email is invalid",
},
};
<FormContainer onSubmit={handleSubmit(onSubmit)}>
<Field>
<Messages>
<p className="fw-bold color-charcoal-grey">Email address</p>
{errors.email && <Span>{errors.email.message}</Span>}
</Messages>
<Input
type="email"
placeholder="[email protected]"
{...register("email", emailRules)}
/>
</Field>
<button className="btn fw-bold color-white fs-normal">
Subscribe to monthly newsletter
</button>
</FormContainer>
- GitHub - JuanBlancodev
- Frontend Mentor - @JuanBlancodev