Fandom Survey Form Feedback

I have completed my Survey Form and I’d like feedback on it. I ran it through the W3C validator and it looks like there’s no errors.

I tested out your form. It looks very nice. However, this happened when I clicked submit…

so I clicked on “more details” and it showed me this…

Referred From Pen Message

I don’t know if that is just Codepen or if you have a missing href that perhaps needs a self-location or missing a url, you just have: #.

I didn’t login to Codepen, I haven’t made an account yet. I was using the form as an anonymous user.

Otherwise, looks good!

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

  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.

Yeah I tried it as well and it does the same thing. I’m not sure why it does that but I’m assuming it’s because the form doesn’t have any place to be submitted to.

I ran it through the validator and it shows this error.

I don’t understand what it means though.

Since it really has nowhere to actually post the data, then maybe to fix it, make it refer back to itself when submit button is clicked.

Or make another simple HTML page in CodePen that says “Thank You! Your information has been submitted!” for the purposes of this project (even though the data is not really submitted anywhere). Then set that page as the action upon submit.

True, the form data will not actually post to anywhere like a database without something on the back-end like Node.js, PHP, etc to get the posted names /values from the form, process them, and post them to a MySQL database or whatever.

But whether data is actually posted somewhere or not is a separate issue. The submit action still needs to take the user somewhere in the case of submit success or submit failure.

Certainly you can still redirect the user to either the same page or another page! :smiley:

In fact, because your redirect is not working, that is exactly what CodePen is doing, catching the error and … redirecting… the user to this page:

I think you would need to adjust this part in your source:

<form id = "survey-form" action = "#">

HTML Form Action

Maybe that is not working the way you think should work because there is no URL there… :smiley:

URL - Where to send the form-data when the form is submitted.

Possible values:

  • An absolute URL - points to another web site like action=“http://www.example.com/example.htm
  • A relative URL - points to a file within a web site like action=“example.html”

I haven’t got to the projects part of any of the FCC curriculum yet, so I don’t know if that is outside of the requirements or scope of the project you are doing.

But I think there is a way to do that, as I’ve done it on HTML/PHP projects of mine (outside of the scope of FCC) when testing that my form and submit is functioning before even getting into the PHP/MySQL of it.

1 Like

Let’s compare some of your source… in some places you have labels like this:

<label for = "email" id = "email-label">Email: </label>

In other places you have labels like this:

<label for = "tumblr">It was trending on tumblr.</label>

The CSS I see is:

label{
  font-size: 1.2rem;
}

I don’t see anything else in your CSS that is selecting labels by id so for some labels like:

<label for = "email" id = "email-label">

why is id = "email-label" there? What purpose is it serving?

See: HTML label tag

@khaonlaakni, as a start you can review this lesson. There is a paragraph there that describes why/how to use the for attribute.

Also, do not forget about the <br> elements. They should not be use for line breaks or spacing.

Side note, there is no backend to this very simple form project so do not worry about the message from codepen when the submit button is pressed.

1 Like

@Roma

I am not trying to criticize or cause worry. Just point out it is generally possible to do that.

But I checked the link you gave:

freeCode Camp Survey Form

and it does the same thing.

So now I’d like to know…is this just a side effect of using CodePen?

Just want to know so if I ever get around to that project, I don’t waste time trying to make that work. :slight_smile:

I am familiar with github, but CodePen, not so much.

1 Like

It’s out of the scope of this project. It’s not codepen.

1 Like

oh, ok thank you.

@khaonlaakni

Disregard my reply about that then, but keep it in mind for “real world” projects .

Was just trying to help.

:slightly_smiling_face:

1 Like

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