Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

I am done with my survey form. How do I submit it to freecodecamp? Is there marking of some kind?
I have passed all tests. What do I do next?

Your code so far

<!-- file: index.html -->
<!DOCTYPE>
<html lang="en">
  <head>
    <meta name="author" content="Hannah Chao">
    <meta name="description" content="surveyform">
    <meta charset="UTF-8">
    <title>Survey Form</title>
     <link rel="stylesheet" href="styles.css">

  </head>
  <body>
    <h1 id="title" title="Survey Form">
      Survey Form
      </h1>
        <p id="description" description="appreciation">
          Thank you for taking your time to fill this form. Your feedback is important to us.
        </p>
        <form action="https://httpbin.org/get" method="get" id="survey-form">
<p>
<label for="name" id="name-label">Name</label>
</p>
<p>
<input id="name" type="text" placeholder="Jane Doe" required>
</p>
<p>
<label for="email" id="email-label">Email</label>
</p>
<p>
<input id="email" type="email" pattern=".+@example\.com" placeholder="youremail@example.com" required>
</p>
<p>
  <label for="number" id="number-label">
    Number
  </label>
  </p>
  <p>
<input id="number" type="number" min="1970" max="2007" placeholder="1984" required>
</p>
<p>
  Gender
  </p>
  <p>
  <select id="dropdown">
    <option>
      select
      </option>
    <option>
    Male
    </option>
    <option>
    Female
    </option>
  </select>
</p>
<p>
  Do you have pets?</p>
  <p>
  <input type="radio" name="pet">
  Yes
  </p>
  <p>
<input type="radio" name="pet">
No
</p>
<p>
  Select your pet
  </p>
  <p>
  <input type="checkbox" value="cat">
  Cat</p>
  <p>
    <input type="checkbox" value="dog">
    Dog</>
    <p>
      <input type="checkbox" value="Fish">Fish
      </p>
      <p>
        <input type="checkbox" value="other">Other
        </p>
        <p>
          
          <label>Leave us a message:</label>
          </p>
          <p>
        <textarea rows="10" cols="30"></textarea>
        </p>
        <button id="submit" type="submit">Submit</button>
        </form>
  </body>
  </html>

/* file: styles.css */
body{background-color:#010255;
color:white;
font-family:sans-serif;}
h1{font-family:Serif;
font-weight:bolder;}
#email,#name,#number{line-height:10px;
width:300px;}
button{background-color:green;
color:white;
width:300px;
border-radius:30px;
border-color:grey;}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Challenge Information:

Survey Form - Build a Survey Form

2

press the button on the modal to submit the project and go to next challenge

1 Like
3

which button? The one I have created or which one?

4

@Ceres110

First run the tests

run the tests
run the tests501×302 10.1 KB

Then if all tests pass you will get this model:

submit and go to next challege
submit and go to next challege1136×648 25.1 KB

press the button to pass

5

I’m seeing a tick beside all items, but the page isn’t moving beyond that. A tick besides each instruction, that is

6

Hi,
the menu is located above the list with tick marks, you can find it by scrolling up.
Or you can press ctrl + enter on your keyboard and the code will submit, then you will receive the popup.
Good luck.

7

If every item has a checkmark after running the tests then save your code and refresh the page.

if that does not work then save your code and hard refresh the page:
Windows/ Linux:

  • Hold down Ctrl and click the Reload button.
  • Or, hold down Ctrl and press F5 .
  • Or, hold down Ctrl + Shift + R .

Mac:

  • Hold down Shift and click the Reload button.
  • Or, hold down Command + Shift + R .
8

I checked your code, you are not passing all the tests, please individuate the one that is failing and try to see what’s going on

2 Likes