Submitted about 1 month ago

Newletter Signup Form JS

Arnaud Lahaut• 200

@Arnotts33

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Newsletter sign-up form with success message

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

My first time doing a 'complex' JS challenge by myself. Quite happy but might refactor my code at some point.

I really need to start using SCSS. But is it widely used in the pro world and is it considered good practice?

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

Main challenges:

Responsive part with switching the image on the right on desktop layout: I used and for the image. Use of flex grid.
JS email validation: Took me a while to make the JS file working... forgot to put novalidate in the HTML.

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

Any feedback or review are welcome!

Thanks!

Community feedback

Alex• 3,130

@Alex-Archer-I

Posted about 1 month ago

Hey!

You stepped on the JS part, congrats =) And I can see that you are using BEM, cool!

By the way, the action attribute of the form are for url where it will send data, so submit doesn't fit there. And I have a few doubts about novalidate and accessibility.

Also I like that you think about set focus on the email field! There is an autofocus attribute you can use as well.

To answer your question about SCSS - it isn't totally must have stuff, but in general the more tools you are familiar to the better. Also a lot of companies use it, so if you will search a job in the webdev field it will be another plus to your portfolio.

Personally I prefer plain CSS with autoprefix plugin, but I won't say that it is a best way. And If you already have a decent CSS foundation all those tools will be much easier to learn.

Marked as helpful

Arnaud Lahaut• 200

@Arnotts33

Posted about 1 month ago

Hey Alex!

Thanks for another feedback, always appreciated!

I took the novalidate from the form course just before this challenge. Thing is when I get rid of this and the action attribute, it's not working. I don't get the error message.

Thanks for your advice about SCSS :)

Alex• 3,130

@Alex-Archer-I

Posted about 1 month ago

@Arnotts33

Oh, hey! The comments section here are really strange sometimes. I barely notice your answer!

Do you mean that you don't get your own custom message? When you delete novalidate attribute browser turns on it's own validation. And if you write the email without "@" browser shows it's own error and the form won't be submitted - that's why your message didn't appear. But it will if you write email with "@" but without dot after, so your regex still work.

The action doesn't affect from submission since you are using event.preventDefault(). The purpose of action attribute is to specify url of the server to send form data without JS.

I can explain why I have doubts about novalidate thing. The default browser form validation contains messages which could be recognized by screen readers. But if you use your own validation you should somehow tell them what went wrong - I believe there is special aria tag for error messages or something like this. I really doesn't dive deep in the topic of form accessibility, so that why it is only doubts =)

And also I suggest you to add some logic to remove error status when user start to fix error. I mean if I'll write wrong email and input goes red I have to write correct email on the red field. For example, you can dismiss the error status when user start to type again or when input get focus. It will be a little UX improvement =)

Marked as helpful

Arnaud Lahaut• 200

@Arnotts33

Posted about 1 month ago

Hey @Alex-Archer-I !

Thanks for taking the time to go deeper into this :)

I will definitely try to improve on this solution and follow your suggestions. Very much appreciated!

Alex• 3,130

@Alex-Archer-I

Posted about 1 month ago

@Arnotts33

Hey, you're welcome as always =)

Please log in to post a comment

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