Survey Form - Build a Survey Form

Tell us what’s happening:
I have completed all steps and passed the Build a Survey Form, but I want to know how I can fix one area. Under the radio question “What is your current level of English?”, how can I make each option align with the radio button? When I gave each their own label, I was able to align it, but I didn’t pass the “Every radio button group should have at least 2 radio buttons.”, but when I put all radio buttons under one “label” it passed that question but effects the format my question on the survey.
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

What is your current English level? No Knowledge Beginner Intermediate Advanced

css
.level {
width: unset;
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 5px;
cursor: pointer;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.3 Safari/605.1.15

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

Post the entire html and css code here.

I fixed the format, but now it say I am missing the step “Every radio button group should have at least 2 radio buttons.” :woman_facepalming:

English Language Learning Form

English Language Learning Form

This form helps us personalize your lessons.

Name Email Occupation Age What is your current English level? No Knowledge
Beginner
Intermediate
Advanced Why do you want to learn English? <select id="dropdown" name="reason" (select one) Conversation Business Both What would you like to focus on?
Check all that apply. Speaking Writing Reading Understanding What are your interests? Provide 3 Additional Information If there is any other information you would like to share please write it here. I accept the terms and conditions.

body {
width: 100%;
height: 100vh;
margin: 0;
padding: 1rem;
background-color: #1b1b32;
color: #f5f6f7;
font-family: Tahoma;
font-size: 16px;
}

h1 {
margin: 0.5em auto;
text-align: center;
color: #A2D9CE;
text-shadow: 1px 1px white;
}

p {
margin: 0.5em auto;
text-align: center;
color:#D0ECE7
}

form {
width: 60vw;
max-width: 500px;
min-width: 300px;
margin: 0 auto;
padding-bottom: 2em;
}

fieldset {
border: none;
padding: 1rem 0;
border-bottom: 3px solid #3b3b4f;
}

label {
display: block;
margin: 0.5rem 0;
}

input,
textarea,
select {
margin: 5px 0 0 0;
width: 100%;
min-height: 1em;
}

.inline {
width: unset;
margin: 0 0.5em 0 0;
vertical-align: middle;
cursor: pointer;
}

.age {
width: 35%;
}

.level {
width: unset;
margin: 0 0.5em 0 0;
cursor: pointer;
}

.interests {
min-height: 5em;
}

input, textarea, dropdown {
background-color: #E8F6F3;
border: 1px solid #D0ECE7;
color: #212F3D;
}

input[type=“submit”] {
display: block;
width: 25%;
height: 2em;
font-size: 1rem;
background-color: #73C6B6;
border-color: #16A085;
min-width: 300px;
color: white;
border-radius: 5px;
}

input[type=“submit”]:hover {
background-color: #A569BD;
color: white;
}

When I post my html code on here, I don’t see the code when I click reply.

Use the </> button in the editor to format the code properly.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>English Language Learning Form</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1 id="title">English Language Learning Form</h1>
    <p id="description"><i>This form helps us personalize your lessons.</i></p>
  <form method="post" id="survey-form">
    <feildset>
      <label 
        for="name" id="name-label">Name<input id="name" name="name" type="text" placeholder="enter your name" required></label>
      <label
        for="email" id="email-label">Email <input id="email" name="email" type="email" placeholder="enter your email" required></label>
      <label   
        for="occupation">Occupation <input id="occupation=label" name="occupation" type="text"></label>
     <label
        for="age" id="number-label">Age <input id="number" name="age" class="age" type="number" min="4" max="99" placeholder="enter your age" ></label>
    </fieldset>
    <fieldset>
      <label
        for="level" class="level"> What is your current English level?<input id="level-0" type="radio" name="level-0" class="level" value="no-knowledge"/> No Knowledge<br>
     <input id="level-1" type="radio" name="level-1" class="level" value="beginner"/> Beginner<br><input id="level-2" type="radio" name="level-2" class="level" value="intermediate"/> Intermediate<br><input id="level-3" type="radio" name="level-3" class="level" value="advanced"/> Advanced</label>
    </fieldset>
    <fieldset>
      <label for="reason">Why do you want to learn English? <select id="dropdown" 
       name="reason" 
        <option value="">(select one)</option>
        <option value="1">Conversation</option>
        <option value="2">Business</option>
        <option value="3">Both</option> 
        </select>
      </label>
    </fieldset>
    <fieldset>
      <label for="reason">What would you like to focus on?<br><em>Check all that apply.</em></label> 
       <label><input type="checkbox" name="Speaking" id="Speaking" value="Speaking" class="inline" />Speaking</label> 
       <label><input type="checkbox" name="Writing" id="Writing" value="Writing" class="inline" />Writing</label>
       <label><input type="checkbox" name="Reading" id="Reading" value="Reading" class="inline" />Reading</label>
       <label><input type="checkbox" name="Understanding" id="Understanding" value="Understanding" class="inline" />Understanding</label>
    </fieldset>
    <fieldset>
      <label
        for="interests">What are your interests?<em> Provide 3 </em> <input id="interests-label" name="interests" class="interests" required></label>
    <label for="additional information">Additional Information <textarea>If there is any other information you would like to share please write it here.</textarea></label>
    </fieldset>
    <fieldset>
      <label for="terms-and-conditions">
          <input id="terms-and-conditions" type="checkbox" value="checkbox" required name="terms-and-conditions" class="inline" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions.</a>
        </label>
      </fieldset>
      <input id="submit" type="submit" value="Submit"/>
    </form>
  </body>
</html>

I figured it out. Thanks though

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