Skip to content
Submitted 4 months ago

Responsive Contact-form using Css flex and grid plus JS

Dawit•70
@dawitgetahun055
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Contact form
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

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

This one was pretty tough, But I think I have done a good work. Trying to provide solution for this challenge on my own.

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

The first challenge was that the query inputs once I select one of them and submit it its background changes per the instruction. But if the person did not complete the form and change his mind to choose the other query input then both the queries are gonna show the same green background with a green border color. The other challenge that I faced was that I needed to consider too many things while working with JS.

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

I need help on how to use JS to provide a simple solution for complex challenges. I need someone who can guide me and assign me on different projects.

Community feedback

  • Mahmood•1,450
    @MahmoodHashemPosted 4 months ago

    Hey there! 🙋🏽‍♂️

    Congratulations on finishing the challenge! ✅

    Your project is looking amazing!

    I have a helpful tip for you that interest you:

    Form validation is really important for maintaining accurate data and creating a smooth user experience on the front end. Luckily, HTML and JavaScript have built-in validation APIs that can make this process easier and save time when implementing strong form validation.

    I recommend using HTML validation attributes like required, min, max, minlength, maxlength, type (and others as needed) to clearly define the validation rules for each form field. This approach allows you to take advantage of the browser's built-in validation mechanisms, which are usually well-optimized and reliable.

    For an even better validation experience, you can also use JavaScript's validation APIs, such as the validity property, to customize error messages and handle more complex validation scenarios. This will help you create a more personalized and user-friendly validation experience.

    I suggest checking out the article Form Validation Using JavaScript’s Constraint Validation API, which gives a detailed overview of different techniques and best practices for implementing effective form validation in your web applications.

    Hope you find this helpful!

    Great job overall!

    Marked as helpful
    1
    Dawit•70
    @dawitgetahun055Posted 4 months ago

    Thank you @MahmoodHashem I will consider your tips and advises. This one was somehow challenging a little bit. I will do more projects on contact forms. Thank you anyways.

    1
    Mahmood•1,450
    @MahmoodHashemPosted 4 months ago

    @dawitgetahun055 That would be great. and If you found that useful, please consider marking it as helpful.

    Marked as helpful
    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