Skip to content
Submitted about 1 year ago

Newsletter Signup Form (Vanilla CSS, HTML, and JS)

BoJoNVi•30
@BoJoNVi
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

I really feel like the implementation of my CSS is really bad. I'm not sure if this is fine or not, but if you guys have some opinion about it feel free to share.

Community feedback

  • jnunez2301•170
    @jnunez2301Posted about 1 year ago

    It's very clever to use the hidden property but i wouldn't recommend abuse it when you can make an extra path to /sucess for example, try to avoid the use of the position property to center elements.

    You can do it easier with grid and flexbox with also provides responsivness in the future by adding wrap or changing the template for the width of the device

    Take a look at:

    Learn-Flexbox

    Marked as helpful
    1
    BoJoNVi•30
    @BoJoNViPosted about 1 year ago

    I see, thank you for the feedback on how to transition from the form state to the success state, I think it is better since it's much easier to implement than the one I've made. Also, thanks for the insights about the flexbox in this use case @Roxc2301! :D

    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