Skip to content
Submitted 6 months ago

Responsive Newsletter sign-up form with success message

Shabrina Putri•150
@shabrina12
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Newsletter sign-up form with success message
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

What challenges did you encounter, and how did you overcome them?

I came across a challenge when i tried to retrieve the email value that the user entered on the home page and display the email to the success page, then i found a solution which is to use useSearchParams(). Later, I got an error saying "useSearchParams() must be wrapped in a Suspense boundary" when trying to deploy on vercel. I found a solution in https://stackoverflow.com/questions/78439067/how-do-you-get-rid-of-usesearchparams-and-suspense-deployment-error

What specific areas of your project would you like help with?

Is it possible to enable the "valid email required" error message only after the user clicks on the input instead of appearing from the beginning when the page is displayed?

Community feedback

  • JuvoGenesis👾•2,010
    @AkoToSiJeromeEhPosted 6 months ago

    Hey Great work out there ! i just notice that the newsletter component does not vertically align on middle . you are correct through the usage of flex and align-items but there are missing property that is justify by adding this on main element the component will be horizontally and vertically align on middle.

    instead of justify-between change to justify-center

    <main class="
font-roboto 
flex 
xs:bg-white m
d:bg-dark-grey 
min-h-screen 
flex-col
items-center 
**justify-center**   
md:p-24" >

</main>

    and regarding to the email validation you can check if the user are focus on input field and also if there inputting is wrong you can show the error message and hide it by default

    Marked as helpful
    0
    Shabrina Putri•150
    @shabrina12Posted 6 months ago

    @AkoToSiJeromeEh Hi, yeah i just noticed the "justify-between" part, thanks for pointing that out and i really appreciate your input, definitely will try to fix it later. Thank you

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord