Pug Adoption Survey Feedback

Hey everyone,

Just finished my survey. It’s pretty simple and much of the style is a bit of an ode to FCC. My first project isn’t very responsive so I wanted to focus more on responsiveness this time around, especially since surveys can often be a royal pain to fill out on a mobile device.

Any feedback would be greatly appreciated!

Edit: Currently working my way through this free Udacity course and it’s been helpful! https://www.udacity.com/course/responsive-web-design-fundamentals--ud893

1 Like

It’s beautiful, but maybe you could make the text inputs (textbox and select) bigger like other parts of your form?

Hi there! It looks pretty neat, and I think you got the responsiveness part mostly right :slight_smile: I would just make the form element expand earlier than at 450px because it looks pretty narrow. So, maybe add one more break at around 800px (the width doesn’t have to be 90%, it could be, say, 70%). Other than that, it scales well :smiley:

One more thing, try to make the label text clickable on checkboxes and radio buttons (for example, when I click on the word ‘Foster’ the corresponding radio button is marked). Hint: the for attribute of your label elements corresponds to id attribute of the input element it refers to.

Hope this helps and, once again, good job! :slight_smile:

1 Like

Nice survey, i like it. Maybe i would add a border around the image (ex. 5px solid white).

1 Like

Hi @bgrigs! I like your form, I think you have done a good job, congratulations!:+1::clap::clap:

I only find an error in the #number field: in the description you propose a scale from 0 to 10, but in the code you set a minimum of 10 and a maximum of 101. :thinking:

Cheers and happy coding!:keyboard::heart:

1 Like

It’s beautiful, but maybe you could make the text inputs (textbox and select) bigger like other parts of your form?

Thanks @jenrodrigues! I think that would look a lot better. I was able to make the textarea box bigger but adjusting the height and font of the select and input buttons didn’t seem to make any difference. Not sure why?

Nice survey, i like it. Maybe i would add a border around the image (ex. 5px solid white).

Done! Thanks @VaNaChiMa

Hi @bgrigs! I like your form, I think you have done a good job, congratulations!:+1::clap::clap:
I only find an error in the #number field: in the description you propose a scale from 0 to 10, but in the code you set a minimum of 10 and a maximum of 101. :thinking: Cheers and happy coding!:keyboard::heart:

Thanks Marta! I’ve seen one of your awesome projects so that means a lot!

Confession: that number field was done intentionally as a joke because I won’t let anyone rate my dog less than a 10 :rofl:

Hi there! It looks pretty neat, and I think you got the responsiveness part mostly right :slight_smile: I would just make the form element expand earlier than at 450px because it looks pretty narrow. So, maybe add one more break at around 800px (the width doesn’t have to be 90%, it could be, say, 70%). Other than that, it scales well :smiley:

Thanks so much @kristina_v for taking such a close look at it! As for the media queries, I made a few adjustments and added one in at 800px but I’m not sure I did it correctly? Also, is it conflicting that I have one media query set to min-with:450 and another set to max-width: 460? It worked for my devices but conceptually my own code doesn’t make sense to me :thinking::woman_facepalming:. I need to look into some other simulators as the chrome dev tools simulator hasn’t been very accurate so I’ve mostly been relying on my own devices to gage if the queries are working.

One more thing, try to make the label text clickable on checkboxes and radio buttons (for example, when I click on the word ‘Foster’ the corresponding radio button is marked). Hint: the for attribute of your label elements corresponds to id attribute of the input element it refers to. Hope this helps and, once again, good job! :slight_smile:

Made the text clickable. Much better and more user-friendly! Thank you!

1 Like

A few more questions:

  1. I added an anchor tag for the submit button, but now one can click the button without filling out any of the form and it’ll successfully go to that page even though I’ve listed some fields as required. How can I fix this?

  2. How does the line-height and spacing look in the form? I can’t tell if it looks off or I’ve just looked at it too much.

Thanks again everyone!!! I appreciate the help so much.

I think you’re right, it doesn’t make that much sense to have a combination, especially if you’re targeting the same properties (unless you use it like this: @media screen and (min-width: 500px) and (max-width: 700px), in which case you’re targeting devices only within those limits and in the same media query, but having conflicting styling for those resolutions wouldn’t make that much sense, at least not that I can think of :slight_smile: ). I believe that the general practice is to use min-width if you’re designing mobile-first because you’ll want to target screens that are progressively larger, and conversely you’d use max-width for desktop-first design in order to target smaller and smaller devices.

In your case, since you’re going mobile-first it seems, I’d maybe switch the width for the two media queries, so that the width is 50% for 800px or larger and 70% for 450px or larger. Generally, you’d want the bigger portion of the screen used for smaller devices. Does this make sense (I don’t know if I explained this clearly enough)? :sweat_smile:

And, by the way, I’m so used to dealing with max-width that I didn’t even notice you were going with min-width initially, so my first comment doesn’t really fit what you were trying to do, so that was totally my bad, forget what I said back then :laughing:

This is because you defined that behavior for the ‘click’ event, so it’ll do it no matter what. To solve this, instead of using it on the submit button, you can use this script as a value for the onsubmit attribute of the form element (which, you guessed it, runs when you submit the form, and you can’t submit it unless you have all the required input fields). Note that in order for onsubmit to work, I think you also need an action attribute (this is where you want to send your data to, like a .php page or something like that, but in your case you can put action="/"). Let me know if this solves your problem :smiley:

It looks fine to me :slight_smile:

Hope I’ve managed to answer some of your questions and good luck! :smiley:

Kristina, thanks again! I’m going to look at the media queries again later but the submit button is now working and redirecting to another page!

The following worked: <form id=“survey-form” onSubmit=window.location=‘https://codepen.io/bgrigs/pen/WNNyqEZ’ action=“https://codepen.io/bgrigs/pen/WNNyqEZ”>

using action="/" resulted being re-directed to the CodePen front-page and leaving it blank resulted in an error. Since this isn’t a real form, I used my codepen thank you page link twice and that seemed to work!

1 Like