Survey Form Project FG

Code Feedback
1

I appreciate any criticism, comment or suggestion regarding the code or the design of my Survey Form Project

https://codepen.io/FernandoGarcia_fg/pen/dypErXm

2

Your form looks good @FernandoGarciafg. Some things to revisit;

  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • The logic in your required field makes it so that the form cannot be submitted. That’s a bad UX. (You ask for a min of 1 billion but then say the max is one less than 1 billion)
    • Also the placeholder is meant to show the user the format of how to enter into the field. But the input element is not set up to enter it that way. (Not all countries use a 3-3-4 format for a phone number so that would be a bad UX for those people)
  • Change the cursor to a pointer when hovering over the submit button
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
3

I appreciate your response and recommendations.
I solve the problems so that the html validates correctly. From what I inquired on the internet for international noma, the telephone number with fewer digits has 7, including the country code and the largest number cannot exceed 15 digits including the country code, I applied it and tried to make the plaholder more friendly.
Also change the cursor.
And I hadn’t applied any br in my code, or if I had, I didn’t see it :).
https://codepen.io/FernandoGarcia_fg/pen/dypErXm

image
image1322×699 50.6 KB

4

Good job cleaning things up @FernandoGarciafg. Some things to revisit;

  • User’s cannot see what they are typing into the input fields. (Black font on a black background.) This is a bad UX.
  • Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it and address the issue(s). There are four of the same typo’s.

Lines 29 and 31 in your code…

<label for="family">Family</label><br>
  <input type="radio" id="friends" name="with" value="friends">
<label for="friends">Friends</label><br>
5

Corrected the design of the inputs.
With the codepen CSS parser the only error that comes up is (I even commented on the error part to see if there was any other) Unexpected duplicate “background”, which I use to change the opacity to the background of the survey-form and perform greater contrast with the white letters.
Also eliminate the line breaks that were in my html, that I used them at the beginning to order the html and I thought that I had cleaned them all but I had those 2.

6

Looks good.

Line 23 has the opacity. Line 22 does not. Remember what the C in CSS stands for. You don’t need line 22 without the opacity as you replace it in line 23 with opacity.

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.