Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>freeCodeCamp Survey Form</title>
    <link rel="stylesheet" href="styles.css" />
    </head>
      <body>
        <h1>freeCodeCamp Survey Form</h1>
        <p>Thank you for taking the time to help us improve the platform</p>
        <form action="htpps://survey-form,freecodecamp,org" >
        <fieldset>
          <label>Name <input type="text" name="enter your name" required placeholder="Enter your name" /></label>
          <label>Email <input type="email" name="email" required placeholder="Enter your Email" /></label>
          <label>Age(optional) <input type="number" name="age" required min="13" max="120" placeholder="Age"/></label>
          </fieldset>
          <label>Which option best describes your current role?
            <select name="role">
              <option value="">(select current role)</option>
              <option value="1">Student</option>
              <option value="2">Full Time Job</option>
              <option value="3">Full Time Learner</option>
              <option value="4">Prefer not to say</option>
              <option value="5">Other</option>
              </select>
          </label>
          <label>Would you recommend freeCodeCampto a friend?</label>
          <label><input type="radio" name="account-type" class="inline" /> Definitely</label>
          <label><input type="radio" name="account-type" class="inline" /> Maybe</label>
          <label><input type="radio" name="account-type" class="inline" /> Not sure</label>
         <fieldset> <label>What is your favourite feature of freeCodeCamp?
            <select name="features">
              <option value="">(select an option)</option>
              <option value="1">Challenges</option>
              <option value="2">Projects</option>
              <option value="3">Community</option>
              <option value="4">Open Source</option>
              </select>
              <label>What would you like to see improved? (check all that apply)</label>
          <label><input type="checkbox" name="improvement" class="inline" /> Front-end-Projects</label>
          <label><input type="checkbox" name="improvement" class="inline"/> Back-end-Projects</label>
          <label><input type="checkbox" name="improvement" class="inline"/> Data Visualization</label>
          <label><input type="checkbox" name="improvement" class="inline"/> Chanllenges</label>
          <label><input type="checkbox" name="improvement"class="inline"/> Open Source Community</label>
          <label><input type="checkbox" name="improvement" class="inline"/> Gitter help rooms</label>
          <label><input type="checkbox" name="improvement" class="inline"/> Videos</label>
          <label><input type="checkbox" name="improvement" class="inline"/> City Meetups</label>
          <label><input type="checkbox" name="improvement" class="inline"/> Wiki</label>
          <label><input type="checkbox" name="improvement" class="inline"/> Forum</label>
          <label><input type="checkbox" name="improvement" class="inline"/> Additional Courses</label>
          </label>
          </fieldset>
          <fieldset>
            <label>Any comments or suggestions?
              <textarea rows="3" cols="30" name="comments" placeholder="Enter your comment here..."></textarea>
            </label>
          </fieldset>
          <input type="submit" value="Submit"
/>        </form>
        </body>

body{
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #0909FF;
  color: #f5f6f7;
  font-family: Tahoma;
  font-size: 16px;
}
label{
  display: block;
  margin: 0.5rem 0;
}
h1, p{
  margin: 1em auto;
  text-align: center;
}
form{
  margin: 0 auto;
  max-width: 500px;
  min-width: 300px;
  width: 60vw;
  padding: 2em;
}
fieldset {
  border: none;
  padding: 2rem 0;
  border-bottom: 3px solid #3b3b4f
}
fieldset:last-of-type{
  border-bottom: none;
}
input, textarea, select {
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 2em;
}
.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: 1rem;
  background-color: #90EE90;
  min-width: 300px; 
}
input[type="file"]{
  padding: 1px 2px;
}

Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

Hi!

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more information you give us, the more likely we are to be able to help.

3

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