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
- Receive mail a few minutes after succesfully submitting the form
- Solution URL: https://www.frontendmentor.io/solutions/newsletter-form-that-actually-works-with-mailchimp-api-3wIbGCZQd5
- Live Site URL: https://fem-newsletter-navy.vercel.app/
- Mailchimp API
- Next.js:
- You can have API Routes in your Next.js app and abstract all the request/response fuzz away
- Loading page is straightforward and easy-to-use
- Chakra UI is really helpful, but if you want to customize it heavily, it will look something like this:
<Link
href="/"
display="flex"
justifyContent="center"
alignItems="center"
position="relative"
borderRadius="0.5rem"
h="3.5rem"
mt="auto"
mb={{ base: "10", lg: "unset" }}
_hover={{
_before: { opacity: 0 },
boxShadow: "0px 16px 32px 0px rgba(255, 97, 85, 0.50)",
}}
_focusVisible={{
_before: { opacity: 0 },
boxShadow: "0px 16px 32px 0px rgba(255, 97, 85, 0.50)",
}}
bgGradient="linear(to-b, #FF6A3A 0%, #FF527B 100%)"
overflow="hidden"
_before={{
position: "absolute",
content: `""`,
top: "0",
left: "0",
width: "100%",
height: "100%",
bg: "fem.darkSlateGrey",
transition: "220ms",
}}
_active={{
_before: { opacity: 0 },
}}
color="white"
w="full"
></Link>