Responsive Web Design Survey Form

HTML-CSS
1

I think I have completed the project but I cannot seem to run it successfully. Can anyone help me out.

2

Please use the “Ask for Help” button so we know what project you are talking about and can see some of your code.

1 Like
3

I am having a challenge submitting my code for the “run test”. It does not seem to work or maybe I am doing something wrong.

my code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8" />
  <title>Survey Form</title>
   <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="forms">
    <h1 id="title">Survey Form</h1>
    <p id="description">Thank you for taking the time to help us improve the platform</p>
    <form method="post" action='https://register-demo.freecodecamp.org' id="survey-form">
      <label for="name" id="name-label">Name: <input required id="name" type="text" placeholder="Enter your name" /></label>
      <label for="email" id="email-label">Email: <input required id="email" type="email" placeholder="Enter your email" /></label>
      <label for="age" id="number-label">Age(optional) <input id="number" type="number" min="12" max="120" placeholder="Age" /></label>
             <label for="referrer">How did you hear about us?
          <select id="referrer" name="referrer">
            <option value="">(select one)</option>
            <option value="1">News</option>
            <option value="2">YouTube Channel</option>
            <option value="3">Forum</option>
            <option value="4">Other</option>
          </select>
        </label>
      <legend>Sex(required)</legend>
      <label for="male" id="sex-label"><input id="male" type="radio" name="sex" class="inline" />Male</label>
      <label for="female" id="sex-label"><input id="female" type="radio" name="sex" class="inline" />Female</label>
      <legend>What is your level of education(select all that apply)</legend>
      <label for="education" id="education-label"><input id="education" type="checkbox" value="1" class="inline"/>High School</label>
      <label for="education" id="education-label"><input id="education" type="checkbox" value="2" class="inline" />Undergraduate</label>
      <label for="education" id="education-label"><input id="education" type="checkbox" value="3" class="inline"/>Masters</label>
      <label for="education" id="education-label"><input id="education" type="checkbox" value="4" class="inline" />Doctorate</label>
      <label for="education" id="education-label"><input id="education" type="checkbox" value="5" class="inline" />Post Doctorate</label>
      <legend>Any additional comments<textarea></textarea></legend>
      <input type='submit' value="submit" />
      </form>
      <div>
    </body>
</html>

/* file: styles.css */
body {
    background-image: url(https://www.myfreetextures.com/wp-content/uploads/2014/11/Deep-Blue-Abstract-Background.jpg);
    width: 100%;
    height: 100vh;
    margin: 0;
    color: #f5f6f7;
    font-family: Tahoma;
    font-size: 16px;
  }

.forms{
  background-color: #104aBe;
    width: 80%;
  margin: auto;
  padding: 20px;
  max-width: 500px;
}
  
  h1, p {
    margin: 1em auto;
    text-align: center;
  }
  
  form {
    width: 60vw;
    max-width: 500px;
    min-width: 300px;
    margin: 0 auto;
    padding-bottom: 2em;
  }
  
  label {
    display: block;
    margin: 0.5rem 0;
  }
  
  input,
  textarea,
  select {
    margin: 10px 0 0 0;
    width: 100%;
    min-height: 2em;
  }
  
  input, textarea {
    background-color: #0a0a23;
    border: 1px solid #0a0a23;
    color: #ffffff;
  }
  
  .inline {
    width: unset;
    margin: 0 0.5em 0 0;
    vertical-align: middle;
  }
  
  input[type="submit"] {
    display: block;
    width: 60%;
    margin: 1em auto;
    height: 2em;
    font-size: 1.1rem;
    background-color: #3b3b4f;
    border-color: white;
    min-width: 300px;
  }
  
  input[type="file"] {
    padding: 1px 2px;
  }
  
  .inline{
    display: inline; 
  }
  a{
    color: #dfdfe2
  }

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

4

I just did that in a new post. I would be grateful if you could help me figure this out.

5

Hey -I love that blue background image.
I seemed to be able to submit your code for testing. First make sure to save your code then reload the page and try clearing cookies or using a different browser.
Hope this helps!

2 Likes
6

Can you also explain what sort of feedback you’re getting so we can better help you?

1 Like
7

When I click on “Run the Tests”, nothing happens. The page stays the same. But I will try on a different browser and see if it’s the same outcome.

8

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