Submitted 5 months ago

Responsive contact form using CSS Flex, JavaScript

Anton Vasilache•580

@Antonvasilache

Preview site View code

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?

I've used some complex selectors to create custom input elements
I've tried to make the form accessible as best as I could

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

Creating custom input elements proved to be somewhat challenging - I've looked up various methods online and managed to do it through some trial and error. Refactoring the JavaScript code was somewhat tricky, due to the way the CSS selectors were set up in the beginning.

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

I'm not sure if I have combined the accessibility elements properly.

Community feedback

Diagne Makha•570
@mbd89Posted 5 months ago
this looks pretty good
1
Diagne Makha•570
@mbd89Posted 5 months ago
Put this in your html above script js tag to enable jquery

script src="https://code.jquery.com/jquery-3.7.1.min.js">
0
Diagne Makha•570
@mbd89Posted 5 months ago
If you look in the design, when you select a query type and then click elsewhere the background of the selected query type stays light green., i struggled to make it happen; i finally found a solution to that with jquery. $('.enquiry').click(function () { $(this).find('input:radio')[0].checked = true; $('.focused').toggleClass('focused'); $(this).toggleClass('focused'); });
0

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