Build a Survey Form Project Questions, Discussions, and Resources (January 2018 Cohort)

awesome thanks!!!

@gilvarry
Your survey form is failing one objective if you check it with the test suite. I would also recommend looking at other’s forms to get idea’s for a better visual layout and color scheme.

1 Like

I added my project to the list in the first post.

Now that I’m a little behind, I finally finished this project. I’ll make some minor tweaks here and there but it felt like putting band-aids on when I was creating the mobile versions after doing the desktop layout.

Check out my Star Wars themed survey here:
https://slamoureux.github.io/survey-form/

2 Likes

Survey Form - finally!

Some features of the project:

  • All native CSS, with media queries – no Bootstrap
  • Responsive & mobile-first design
  • No inline styles
  • No ID selectors for styling
  • Uses semantic HTML5
  • Uses Normalize
  • Accessibility supports
  • Passes color contrast test: 7.10:1
  • Hosted on CodePen
  • Uses Google Fonts: Barlow Semi Condensed
  • Linear gradients on page background and button
  • Link to animate.css CDN: bounceInLeft

Things I’m not satisfied with:

  • I was unable to figure out how to make the checkbox section required. Currently, a survey-taker can submit the form without answering Which Meals on the Move have you tried?
  • I don’t like the look of the dropdown (Which store do you shop at?) Any suggestions?
  • I believe it’s acceptable for the logo to be ignored by screen readers. However, I don’t seem to be doing it correctly. The deque aXe accessibility checker doesn’t seem to like what I have currently.
  • Truth be told, I understood very little of the results from the aXe accessibility checker. Any suggestions?

Notes:

  • After reviewing and implementing all of your wonderful feedback and suggestions, I will refactor the CSS so that it is DRYer. :slightly_smiling_face:
  • I feel that I’ve made noticeable growth since the Tribute Page project. Thank you to everyone in the cohort who has offered feedback, suggestions, and resources! :heart_decoration:

Question:

  • Does it make sense to put a minimum width on the contents? I’m thinking of what happens when the screen is dragged to a tighter and tighter width and the contents get super narrow. Mostly I’m thinking aloud here, hopefully this line of thought makes a wee bit of sense.

link to Survey Form - Meals on the Move

All feedback and comments welcome. Thanks!

– Janice

3 Likes

Please review my survey form for the beta curriculum’s Survey Form Project. It passes the FCC beta tests, no inline styling used, no ID selectors in CSS, no validation errors in HTML and CSS. I am still working on centering all HTML form elements using CSS. Thank you in advance for all your feedback!

Here is the codepen link:

Hi Vani,

Maybe it’s a temporary CodePen glitch, but the project doesn’t load for me.
I saw the HTML and CSS panels, but the live-view doesn’t load.
I tried a couple of times during the past 10 mins or so.

Fingers crossed!
– Janice

Hi Janice,

I too tried to review some of the projects. But, it wouldn’t load on CodePen though I could see the HTML and CSS panels. I am also thinking that it is a temporary glitch.

Thank you for trying to review my project.

Vani

Vani,
I was able to view your Pen. Replied with comments at the link in the master list.

Please comment on my Survey Form (Meals on the Move). Posted 3+ days ago and no comments :frowning_face: .
(but I was l-a-t-e in posting… mea culpa)

: )

Beautiful survey form! Nice background radient & font. Everything is well aligned and it’s completely responsive. I must say this looks like a real-life survey form, where are those meals? :open_mouth:

  1. Divs
    I think you may be using a few extra div’s in there. For example, was there anything you did with <div class="head2-container"> that you couldn’t apply directly to the <p class="head2" id="description"> that it surrounds?

  2. Classes
    Also, some classes are styled with the same styling and can probably be styled at once or even use just one class name instead. For example varieties-group & buyagain-group.

  3. Dropdown
    Regarding the dropdown, I also don’t like this look. When you remove the size="2" from its html tag, it will go back to a normal dropdown which I personally prefer.

  4. Logo
    BTW, your logo doesn’t load at all for me, I just see a yellow ball as a result of the logo’s border.

Hi guys. So i am in school taking some notoriously difficult courses so i had to put fcc aside. But i want to see if i can chip away at these projects while working. So i did not get to finish the survey form project so if you could remind me what challenges taught the things i would need, i would be grateful. I have forgotten what i learned

Thank you for reviewing my survey form. I am sorry for the late reply as I got busy. These are my thoughts on your survey form:

  1. Your form looks good and is well-aligned.
  2. I think you have to use javascript/jquery to make the checkbox required.
  3. I found some posts (on Google) on styling dropdowns using only CSS. But, haven’t tried them yet. I want to change the dropdowns on my form too. I will post them when I try them.
  4. You could probably consider reducing the width of the submit button.
    Happy coding your Landing Page
1 Like

Hi yall. Can someone help me figure out how to center the light blue box in the middle?

1 Like

Thank you for taking a look and sending your thoughts!
:sunny:

Hello everyone and @camper!

Hopefully I’m not too late to join even though its way past the deadline. :sweat_smile:
I have added myself to the list and here is my survey form:

Thank you :wink:

this is lovely! did you make the dod adoption form background or you got it o the net bc it looks like its two different pics that you put into some kind of flexbox

how did you put First name last name male and female on one line?

The only way I can think of to make the checkboxes required would be using JS, maybe make an object with each of the checkboxes as keys and a true false value that is toggle with the checkbox then test whether at least one value is true before submiting the form?

I looked into drop down menus for mine as well as far as I can tell the only reasonable solution to making them a little less ugly is making a custom menu instead of <select> and <option> tags. Something to do with the way different OS / browsers render them so there was a decision to allow minimal customization of styling around CSS2.

The form looks good though! I’m not sure I like the gradient on the submit button, it looks a little 90s to me.

I added my form to the projects list if anyone has the time to give it a once over, I’d appreciate it!