Responsive and accessible contact form using Flexbox and CSS Grid

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

Hey guys! How are things going?

I’m proud to have successfully built a well-structured and user-friendly form, as well as created a solid script using JQuery and GSAP. Next time, I aim to adhere even more closely to the design.

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

As it was my first time creating a form, I encountered quite a bit of difficulty in structuring it to be as accessible as possible. However, I managed to overcome this by taking some YouTube classes.

Using jQuery and GSAP for page interactivity was also quite challenging due to semantics, but it significantly streamlined the coding process.

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

The only problem I couldn’t solve was with the Query Type field. The idea I had was that while one button was selected, the background would be green, while the other button would have a white background. However, after clicking on one and then clicking on the other, both buttons retain their background color until the page is reloaded.

If you have any suggestions on how to fix this, I’ll provide the relevant code snippets below:

HTML:

          Query Information
          
            
              Query Type *
            
            
              
              General Enquiry
            
            
              
              Support Request
            
            
              Please select a query type
            
          

JS/JQuery:

$(document).ready(function() {
  $('input[name="queryType').on('change', function() {
    if (!$(this).is(':checked')) {
      $(this).parent().css({
        'background-color': 'hsl(148, 38%, 91%)',
      });
    } else {
      $(this).parent().css({
        'background-color': 'white',
      });
    }
  });
});