My survey form is giving me nuts. Can someone review it and give me feedback, please?

<%= @topic_view.topic.title %>
<%= @topic_view.topic.average_rating %> <%= @topic_view.topic.posts.count { |p| !!p.custom_fields['rating'] } %>

Survey Form

    <form id="survey-form" action="http://codepen.io/freecodecamp/pen/MJjpwO" method="POST">
       <p id="form-description">Help us Make Your Community Great</p>
    <div class="rowTab">
      <div class="labels">
       <label id="name-label" for="name">Name:</label>
        <input type="text" class="input-field" id="name" name="name"  placeholder="Enter your name" required><br><br>
      </div>
    </div>
     <div class="rowTab">
      <div class="labels">
       <label id="surname-label" for="surname">Surname</label>
        <input type="text" name="surname" class="input-field" id="surname" placeholder="Enter you Surname"required><br><br>
       </div>
  </div>
  <div class="rowTab">
    <div class="labels">
        <label id="number-label" for="age">Age</label>
        <input type="number" class="input-field" min="7" max="115" name="age" id="number" placeholder="Your Age"><br><br>
    </div>
  </div>
  <div class="rightTab">
    <div class="labels">
        <label id="gender-label" for="gender">Gender</label>
        <input type="text" name="gender" id="gender" class="input-field" placeholder="Male/Female" required><br><br>
    </div>
  </div>
  <div class="rightTab">
    <div class="labels">
        <label id="email-label" for="email">Email</label>
        <input autofocus type="email" name="email" class="input-field" id="email" placeholder="Enter your email" required><br><br>
    </div>
      </div>
      <div class="rightTab">
       <div class="labels">
        <label for="education">Your Level of Education</label>            
        <select id="dropdown" name="education" class="input-field">
          <option value="student">Student</option>
          <option value="high-school-certificate">High School Certificate</option>
          <option value="college-diploma">College Diploma</option>
          <option value="bachelor's-degree">Bachelor's Degree</option>
          <option value="masters">Masters</option>
          <option value="doctorate">Doctorate</option>
          <option value="other">Other</option>
        </select><br><br>
        </div>
      </div>
      <div class="rightTab">
        <div class="labels">
        <label for="occupation">Occupation, please specify</label>
        <input type="text" name="occupation" id="occupation" class="input-field" placeholder="specify" required>
        </div>
      </div>
        <p>Which area do you live in?</p>
        <div id="fieldset">
          <div class="legend">Choose one of these three items:<br>
        <input type="radio" id="low-density" name="answer" value="low-density" class="radio">
        <label for="low-density">Low Density</label><br>
        <input type="radio" id="medium-density" name="answer" value="medium-density">
        <label for="medium-density">Medium Density</label><br>
        <input type="radio" id="high-density" name="answer" value="high-density">
        <label for="high-density">High Density</label>
        </div>
      </div>
        <p>How do you describe the level of service in your area?</p>
        <div id="fieldset">
          <div class="legend">Choose one of the following items:<br>
        <input type="radio" id="poor" name="answer" value="poor">
        <label for="poor">Poor</label><br>
        <input type="radio" id="average" name="answer" value="average">
        <label for="average">Average</label><br>
        <input type="radio" id="good" name="answer" value="good">
        <label for="good">Good</label><br>
        <input type="radio" id="excellent" name="answer" value="excellent">
        <label for="excellent">Excellent</label>
          </div>
      </div>
        <p>What services do you want supplied to your area?</p>
        <input type="checkbox" id="services" name="services" value="library">
        <label for="services">Library</label><br>
        <input type="checkbox" id="medical" name="services" value="medical">
        <label for="medical">Medical/Clinic</label><br>
        <input type="checkbox" id="playgrounds-parks" name="services" value="playgrounds">
        <label for="playgrounds">Playgrounds/Parks</label><br>
        <input type="checkbox" id="amenities" name="services" value="amenities">
        <label for="amenities">Schools, colleges, University</label><br>
        <input type="checkbox" id="sanitation" name="services" value="sanitation">
        <label for="sanitation">sanitation</label><br>
        <input type="checkbox" id="crime-watch" name="services" value="crime-watch">
        <label for="crime-watch">Crime Watch</label><br>
        <input type="checkbox" id="other" name="services" value="other">
        <label for="other">Other</label>
        <p>According to your assessment, is your area safe enough?</p>
          <label for="safety">Choose</label> 
        <select id="dropdown" name="safety" class="dropdown">
          <option value="yes">Yes</option>
          <option value="no">No</option>
          <option value="not-sure">Not Sure</option>
          </select>
        <p>Has anything been done to combat crime?</p>
        <label for="crime">Choose</label>
        <select id="dropdown" name="answer" class="dropdown">
          <option value="yes">Yes</option>
          <option value="no">No</option>
          <option value="not-sure">Not Sure</option>
        </select>
        <p>As a crime fighting measure, what do you think must be done? Choose from the following options.</p>
      <input type="checkbox" id="measures" name="services" value="measures">  
        <label for="measures">Establishment of Neiborhood Watch Committees</label><br>
        <input type="checkbox" id="police" name="services" value="police">
        <label for="police">Creation of Police Posts/ Visible Policing</label><br>
        <input type="checkbox" id="security-guards" name="services" value="security-guards">
        <label for="security-guards">Assignment/Engagement of Security Guards</label><br>
        <input type="checkbox" id="army" name="services" value="army">
        <label for="army">Deployment of Army Personnel</label><br>
        <input type="checkbox" id="punishment" name="services" value="punishment">
        <label for="punishment">Stricter penulties/punishment for Offenders</label><br>
        <input type="checkbox" id="other" name="services" value="other">
        <label for="other">Other</label><br>
        <p>And, if other, please specify;
        <input type="text" min length="3" maxlength="100" class="input-field" id="summary" name="summary" placeholder="specify"></p>
        <label for=" summary"></label>
        <p>Any comments or suggestions?</p>
          <textarea id="comment" name="comment" style="" rows="7" cols="50" class="input-field" placeholder="Enter Your Comments Here"></textarea>
        <label for="comment"></label>
          <div class="button">

            <button type="submit" value="submit" class="button" id="submit">Submit</button>
          </div>
      </div>
    </form>
  </div>
</section>

Please post a link to your codepen

https://codepen.io/tsar777/pen/voeLGm

Hi @Tsar, your form looks okay. Some things you may want to revisit;

  • codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to the <head> click on the ‘Settings’ button and add it into the ‘Stuff for <head>’ box.
    • The link to your font would go in the box labeled ‘Stuff for <head>’
  • codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • You have a typo in CSS that will affect how your form displays.
    • You have some invalid elements in HTML and an id can be used only once
  • run the tests. Your form passes 16/17 tests. The one that’s failing is very easy to correct.
  • line things up a little better. Centering everything is not always a good idea
  • Make your form responsive