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

22

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:

24

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

25

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

26

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)

: )

27

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.

28

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

29

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
30

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

1 Like
31

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

32

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:

33

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

34

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

35

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.

36

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

37

Kevin,
Thank you for the feedback on the button and the ideas for the checkboxes and drop-down.

I’ll check out your survey form this weekend!

38

Thank you! Just put both inputs under the same div :slight_smile:

39

Recently came across this Smashing Magazine post with some helpful ideas on designing forms. I was looking for something like this when I was doing my survey form project. Maybe this will help others who may still be working on theirs.

1 Like
40

I just finished my survey form .Its not very stylish , simple but i tried to make it responsive.
here is link

Feedback appriciated :slight_smile:

41

Just completed my survey form and added a bit of a World Cup flavor to it, since the World Cup just started today.

Appreciate any comments or suggestions!

2 Likes
42

Finally finished my survey-forum, feel free to check it out.

https://michaelcheng022.github.io/survey-form/

1 Like