Survey Form - Build a Survey Form

Tell us what’s happening:

Hello. I am in the process of styling my survey form and am stuck on the labels. I thought I aligned my label text in the center correctly, but they keep coming up on the left side. Can someone tell me what I’m doing wrong?

Your code so far

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width-content-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
<header class="header">
  <h1 id="title">freeCodeCamp Survey Form</h1>
  <p id="description">Thank you for taking the time to help us improve the platform</p>
  <form id="survey-form">
<label for="name" id="name-label">Name</label>
<input id="name" type="text" placeholder="Enter your name" required>
<label for="email" id="email-label">Email</label>
<input id="email" type="email" placeholder="Enter your Email" required>
<label for="number" id="number-label">Age<span class="parentheses">(optional)</span></label>
<input id="number" type="number" placeholder="Age" min="13" max="99">
<p>Which option best describes your current role?</p>
<select id="dropdown" required>
  <option disabled selected value>Select current role</option>
<option value="student">Student</option>
<option value="job">Full Time Job</option>
<option value="learner">Full Time Learner</option>
<option value="PreferNo">Prefer not to Say</option>
<option value="other">Other</option>
  <p>Would you recommend freeCodeCamp to a friend?</p>
    <input name="recommend" value="definitely" type="radio">Definitely
      <input name="recommend" value="maybe" type="radio">Maybe</label>
        <input name="recommend" value="not-sure" type="radio">Not Sure</label>
        <p>What is your favorite feature of freeCodeCamp?</p>
        <select  id="dropdown" required>
          <option disabled selected value>Select an option</option>
          <option value="challenges">Challenges</option>
          <option value="projects">Projects</option>
          <option value="community">Community</option>
          <option value="open-source">Open Source</option>
<p>What would you like to see improved?<span class="parentheses">(Check all that apply)</span></p>
<input name="improve" value="front-end-projects" type="checkbox">Front-end Projects</label>
    <input name="improve" value="back-end-projects" type="checkbox">Back-end Projects</label>
  <input name="improve" value="data-visualization" type="checkbox">Data Visualization</label>
    <input name="improve" value="challenges" type="checkbox">Challenges</label>
      <input name="improve" value="open-source-community" type="checkbox">Open Source Community</label>
        <input name="improve" value="gitter-help-rooms" type="checkbox">Gitter help rooms</label>
          <input name="improve" value="videos" type="checkbox">Videos</label>
            <input name="improve" value="city-meetups" type="checkbox">City Meetups</label>
              <input name="improve" value="wiki" type="checkbox">Wiki</label>
                <input name="improve" value="forum" type="checkbox">Forum</label>
                  <input name="improve" value="additional-courses" type="checkbox">Additional Courses</label>
<p> Any comments or suggestions?</p>
<textarea id="comments" placeholder="Enter your comment here..."></textarea>
<button id="submit">Submit</button>

@import url(',400&display=swap');

:root {
  --color-white: #f3f3f3;
  --color-darkblue: #1b1b32;--color-darkblue-alpha: rgba(27, 27, 50, 0.8);
  --color-green: #37af65;

body {
  font-family: Poppins, serif;
  font-size: 1rem;
  line-height: 1.6;
  color:var(--color-white: #f3f3f3);
  margin: 0;
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  background: var(--color-darkblue);
  background-image: linear-gradient(
      rgba(58, 58, 158, 0.8),
      rgba(136, 136, 206, 0.7)
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
h1 {
  font-weight: 700;
  line-height: 1.2;

p {
  font-size: 1.125rem;

p {
  margin-top: 0;
  margin-bottom: 0.5rem;
label {
  display: flex;
  align-items: center;
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
.header {
  padding: 0 0.625rem;
  margin-bottom: 1.875rem;
#description {
  font-style: italic;
  font-weight: 200;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
.parentheses {
  margin-left: 0.25rem;
  font-size: 1rem;
  color: #e4e4e4;

Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

can you put your code into a codepen?
This is easier to use for your type of layout question.

Please let me know if you can see it

You still need to put the html code in the HTML section of the pen…

Sorry about that! It should be better now, right?

please see the forked pen here

I changed your code to make the name and email fields appear in the middle.
Is that what you were trying to do?

Basically, I moved the input into the label element.
Then made the label element use display block type. (I made that happen with a class but you can try other ways as well).

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