Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

Hi Everyone! I’m having some trouble with my survey form. I’m trying to change the color of the checkboxes, but nothing is working. Is it even possible?

Your code so far

freeCodeCamp Survey Form

Thank you for taking the time to help us improve the platform

Name
Email
Age(optional)

Which option best describes your current role?

Would you recommend freeCodeCamp to a friend?

Definitely Maybe 
      <label
        ><input
          name="user-recommend"
          value="not-sure"
          type="radio"
          class="input-radio"
        />Not sure</label
      >
      <hr style="border: none"
      id="line2">
    </div>

    <div class="form-group">
      <p>What is your favorite feature of freeCodeCamp?</p>
      <select id="most-like" name="mostLike" class="form-control" 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="openSource">Open Source</option>
      </select>
      <hr style="border: none"
      id="line3">
    </div>

    <div class="form-group">
      <p>
        What would you like to see improved?
        <span class="clue">(Check all that apply)</span>
      </p>

      <label
        ><input
          name="prefer"
      value="front-end-projects"
          type="checkbox"
          class="input-checkbox"
        />Front-end Projects</label
      >
      <label>
        <input
          name="prefer"
          value="back-end-projects"
          type="checkbox"
          class="input-checkbox"
        />Back-end Projects</label
      >
      <label
        ><input
          name="prefer"
          value="data-visualization"
          type="checkbox"
          class="input-checkbox"
        />Data Visualization</label
      >
      <label
        ><input
          name="prefer"
          value="challenges"
          type="checkbox"
          class="input-checkbox"
        />Challenges</label
      >
      <label
        ><input
          name="prefer"
          value="open-source-community"
          type="checkbox"
          class="input-checkbox"
        />Open Source Community</label
      >
      <label
        ><input
          name="prefer"
          value="gitter-help-rooms"
          type="checkbox"
          class="input-checkbox"
        />Gitter help rooms</label
      >
      <label
        ><input
          name="prefer"
          value="videos"
          type="checkbox"
          class="input-checkbox"
        />Videos</label
      >
      <label
        ><input
          name="prefer"
          value="city-meetups"
          type="checkbox"
          class="input-checkbox"
        />City Meetups</label
      >
      <label
        ><input
          name="prefer"
          value="wiki"
          type="checkbox"
          class="input-checkbox"
        />Wiki</label
      >
      <label
        ><input
          name="prefer"
          value="forum"
          type="checkbox"
          class="input-checkbox"
        />Forum</label
      >
      <label
        ><input
          name="prefer"
          value="additional-courses"
          type="checkbox"
          class="input-checkbox"
        />Additional Courses</label
      >
    </div>
    <hr style="border: none"
    id="line4">
    <div class="form-group">
      <p>Any comments or suggestions?</p>
      <textarea
        id="comments"
        class="input-textarea"
        name="comment"
        placeholder="Enter your comment here..."
      ></textarea>
    </div>

    <div class="form-group">
      <button type="submit" id="submit" class="submit-button">
        Submit
      </button>
    </div>
  </form>
</div>

html {
background: linear-gradient(pink, red, orange);
font-family: fantasy;
}
h1 {
color: darkred;
text-align: center;
}
#description {
color: blue;
text-align: center;
}
#name {
margin: 0 auto;
display: flex;
margin-bottom: 20px;
background-color: black;
color: red
}
#email {
margin: 0 auto;
display: flex;
margin-bottom: 20px;
background-color: black;
color: red;
}
#name-label {
text-align: center;
}
#number {
margin-bottom: 35px;
background-color: black;
color: red;
}
#dropdown {
margin-bottom: 20px;
background-color: black;
color: red;
}
#line1, #line2, #line3, #line4 {
height: 3px;
background-color: brown
}
::placeholder {
color: red;
}
#most-like {
background-color: black;
color: red;
}
::checkbox {
background-color: black
}
.input-checkbox {
outline: 2px solid red;
}
.input-checkbox + checked{
color: red
}

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.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

2

Maybe add the !important attribute to the color.

1 Like
3

No, didn’t work. I’ve read some stuff that says default checkboxes can’t be styled that you have to create your own and go from there. I might just try that.

4

You can change the color after it is ticked using the accent-color attribute. Not sure if that helps or not.

1 Like
5

That did work and I did want to do that, so thank you, but I’d really like to change the background color of the actual checkboxes

6

I’m glad you got half way there. Sorry I don’t know how to help with the unticked color.

7

Yes!! I’m definitely getting there slowly, just once in awhile I get stumped on something lol. Thanks for your help this week.

8

Hi guys, I’m having trouble again. I’m working on my survey form and when I check one of the checkboxes the opposite on in the other column checks, but the original one doesn’t. No idea what could be causing this. Thank you.


<!DOCTYPE html>
<center><html>
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <header class="header">
        <h1 id="title" class="text-center">freeCodeCamp Survey Form</h1>
        <div id="head-section"><p id="description" class="description text-center">
          <a id="platform"><strong>Thank you for taking the time to help us improve the platform</strong></a>
        </p>
      </header>
      <form id="survey-form">
        <div class="form-group">
          <section id="move-name"><div class="name-label"><div id="move-name"><label id="name-label" for="name"><strong>Name</strong></label></div></div>
          <input
            type="text"
            name="name"
            id="name"
            class="form-control"
            placeholder="Enter your name"
            required
          />
        </div></section>
        <div class="form-group">
          <label id="email-label" for="email"><strong>Email</strong></label>
          <input
            type="email"
            name="email"
            id="email"
            class="form-control"
            placeholder="Enter your Email"
            required
          />
        </div>
        <div class="form-group">
          <label id="number-label" for="number"
            ><strong>Age</strong><span class="clue"><strong>(optional)</strong></span></label
          >
          <input
            type="number"
            name="age"
            id="number"
            min="10"
            max="99"
            class="form-control"
            placeholder="Age"
          />
        </div></div>
        <hr id="line1"
        style="border: none">
        <div class="form-group">
          <p id="current-role"><strong>Which option best describes your current role?</strong></p>
          <select id="dropdown" name="role" class="form-control" 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>
          </select>
        </div>
        <hr style="border: none"
        id="line">
        <div class="form-group">
          <hr style="border: none"
          id="missed-line">
          <p id="recommend"><strong>Would you recommend freeCodeCamp to a friend?</p>
          <label id="move-radio"
          class="definitely-label">
            <input
              name="user-recommend"
              value="definitely"
              type="radio"
              class="input-radio"
              checked
              id="move-definitely"
            /><a id="definitely">Definitely</a></label>
          <label id="maybe-label">
            <input
              name="user-recommend"
              value="maybe"
              type="radio"
              class="input-radio"
              id="move-maybe"
            />Maybe</label
          >

          <label id="not-sure"><input
              name="user-recommend"
              value="not-sure"
              type="radio"
              class="input-radio"
              id="move-not-sure"
            />Not sure</label
          >
          <hr style="border: none"
          id="line2">
        </div>

        <div class="form-group">
          <p>What is your favorite feature of freeCodeCamp?</p>
          <select id="most-like" name="mostLike" class="form-control" 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="openSource">Open Source</option>
          </select>
          <hr style="border: none"
          id="line3">
        </div>

        <div class="form-group">
          <p>
            What would you like to see improved?
            <span class="clue">(Check all that apply)</span>
          </p>

          <label id="front-end-projects1"><input
              name="prefer"
          value="front-end-projects"
              type="checkbox"
              class="input-checkbox"
              id="front-end-projects2"
            />Front-end Projects</label>
          <label id="front-end-projects1">
            <input
              name="prefer"
            value="back-end-projects1"
              type="checkbox"
              class="input-checkbox"
              id="back-end-projects2"
            />Back-end Projects</label id="back-end-projects2">
          <label id="data-visualization1"><input
              name="prefer"
              value="data-visualization"
              type="checkbox"
              class="input-checkbox"
              id="data-visualization2"
            />Data Visualization</label
          >
          <label
            id="challenges1"><input
              name="prefer"
              value="challenges"
              type="checkbox"
              class="input-checkbox"
              id="challenges2"
            />Challenges</label
          >
          <label
            id="open-source-community1"><input
              name="prefer"
              value="open-source-community"
              type="checkbox"
              class="input-checkbox"
              id="open-source-community2"
            />Open Source Community</label
          >
          <label
            id="gitter-help-rooms1"><input
              name="prefer"
              value="gitter-help-rooms"
              type="checkbox"
              class="input-checkbox"
              id="gitter-help-rooms2"
            />Gitter help rooms</label
          >
          <label
            id="videos1"><input
              name="prefer"
              value="videos"
              type="checkbox"
              class="input-checkbox"
              id="videos2"
            />Videos</label
          >
          <label
            id="city-meetups1"><input
              name="prefer"
              value="city-meetups"
              type="checkbox"
              class="input-checkbox"
              id="city-meetups2"
            />City Meetups</label
          >
          <label
            id="wiki1"><input
              name="prefer"
              value="wiki"
              type="checkbox"
              class="input-checkbox"
              id="wiki2"
            />Wiki</label
          >
          <label
            id="forum1"><input
              name="prefer"
              value="forum"
              type="checkbox"
              class="input-checkbox"
              id="forum2"
            />Forum</label
          >
          <label
            id="additional-courses1"><input
              name="prefer"
              value="additional-courses"
              type="checkbox"
              class="input-checkbox"
              id="additional-courses2"
            />Additional Courses</label
          >
        </div>
        <hr style="border: none"
        id="line4">
        <div class="form-group">
          <p>Any comments or suggestions?</p>
          <textarea
            id="comments"
            class="input-textarea"
            name="comment"
            placeholder="Enter your comment here..."
          ></textarea>
        </div>

        <div class="form-group">
          <button type="submit" id="submit" class="submit-button">
            Submit
          </button>
        </div>
      </form>
    </div>
  </body>
</html></center>

html {
  background: linear-gradient(pink, red, orange);
  font-family: georgia;
}
h1 {
  color: darkred;
  text-align: center;
}
#description {
  color: darkred;
  text-align: center;
}
#name {
  margin: 0 auto;
  display: flex;
  margin-bottom: 20px;
  margin-top: -18px;
  background-color: black;
  color: red
}
#email {
  margin: 0 auto;
  display: flex;
  margin-bottom: 60px;
  margin-top: -18px;
  background-color: black;
  color: red
}
.name-label {
  text-align: center;
  color: darkred;
  margin-right: 250px;
  margin-top: 30px;
  display: inline-block;
}
#email-label {
  text-align: center;
  color: darkred;
  margin-right: 250px;
  margin-top: 30px;
  display: inline-block;
}
#number {
  margin-bottom: 35px;
  margin-right: 35px;
  background-color: black;
  color: red;
  display: flex;
  margin-top: -20px
}
#dropdown {
  margin-bottom: 20px;
  background-color: black;
  color: red;
}
#line1, #missed-line, #line2, #line3, #line4 {
  height: 3px;
  background-color: brown;
}
::placeholder {
  color: red;
}
#most-like {
  background-color: black;
  color: red;
}
::checkbox {
  background-color: black
}     
.input-checkbox {
  accent-color: orange;
}
#checkbox-style {
  display: inline-block;
}
#videos {
  
}
#city-meetups {
margin-left: 40px
}
.input-textarea {
  background-color: black;
  color: white;
}
#number-label {
  display: inline-block;
  color: darkred;
  margin-right: 250px;
}
#current-role {
  color: darkred;
}
#recommend {
  color: darkred;
}
#definitely {
  color: darkred;
  margin-right: 150px;
  margin-top: 20px
}
#head-section {

}
#platform {
  margin-bottom: 0px;
}
#move-name {
  display: inline-block;
  margin-top: 2px
}

}
#not-sure {

}
#form-group {
  display: inline-block;
}
#move-definitely {
  display: inline-block;
  margin-bottom: 20px
  
}
#move-maybe {
  margin-right: 10px;
  margin-top: 30px;
  margin-left: -114px
  
}
#move-not-sure {
  display: block;
  margin-right: -53px;
  margin-left: -160px;
  margin-bottom: -15px
}
.definitely-label {
display: block;
}
#not-sure {
color: darkred;
  margin-right: 70px;
  margin-bottom: 40px;
  display: block;
  margin-top: -10px;
  margin-left: -50px
}
#maybe-label {
  color: darkred;
  margin-right: -2px;
  margin-bottom: 40px;
  display: block;
  margin-top: -20px;
  margin-left: -50px;
}
.form-group {
  color: darkred;
  display: block;
  margin-bottom: ;
}
#front-end-projects1 {
display: block;
margin-right: 160px;
position: relative;

}
#front-end-projects2 {
display: block;
margin-left: -186px;
margin-bottom: -14px;
position: relative;
}
#back-end-projects1 {
display: block;
position: relative;
}
#back-end-projects2 {
display: block;
position: relative;
margin-right: 190px;
margin-top: 20px;
margin-bottom: -15px;
}
#data-visualization1 {
display: block;
position: relative;
margin-right: 155px;
margin-top: 20px;
}
#data-visualization2 {
display: block;
position: relative;
margin-right: 194px;
margin-bottom: -15px 
}
#challenges1 {
display: block;
position: relative;
margin-right: 215px;
margin-bottom: 30px;
margin-top: 20px;

}
#challenges2 {
display: block;
position: relative;
margin-right: 134px;
margin-bottom: -15px 
}
#open-source-community1 {
display: block;
position: relative;
margin-right: 95px;
margin-top: -5px
}
#open-source-community2 {
display: block;
position: relative;
margin-right: 254px;
margin-bottom: -15px 
}
#gitter-help-rooms1 {
display: block;
position: relative;
margin-left: 400px; 
margin-top: -170px;
margin-bottom: -18px 
}
#gitter-help-rooms2 {
display: block;
position: relative;
margin-right: 190px;
margin-bottom: -15px 
}
#videos1 {
display: block;
position: relative;
margin-left: 316px;
margin-bottom: 0px; 
}
#videos2 {
display: block;
position: relative;
margin-top: 35px;
margin-right: 105px;
margin-bottom: -15px; 
}
#city-meetups1 {
display: block;
position: relative;
margin-left: 380px;
margin-bottom: 40px;
margin-top: px
}
#city-meetups2 {
display: block;
position: relative;
margin-right: 165px;
margin-bottom: -15px;
margin-top: 20px;
}
#wiki1 {
  display: block;
  position: relative;
  margin-left: 317px;
  margin-bottom: 35px;
  margin-top: 10px
}
#wiki2 {
display: block;
position: relative;
margin-right: 99px;
margin-top: -20px;
margin-bottom: -13px;
}
#forum1 {
display: block;
position: relative;
margin-left: 340px;
margin-top: -18px
}
#forum2 {
display: block;
position: relative;
margin-right: 121px;
margin-bottom: -13px
}
#additional-courses1 {
display: block;
position: relative;
margin-top: 40px;
margin-left: 100px
}
#additional-courses2 {
display: block;
position: relative;
margin-right: 200px;
margin-bottom: -15px
}
#line {
  color: darkred
}
#submit {
  display: block;
  background-color: red;
  color: darkorange;
  border: 2px solid darkred;
  margin-left: 270px;
  margin-top: -28px
}
9

the issue might be related to the id attribute duplication within the labels and checkboxes.
Each HTML element should have a unique ID

10

Yea, I put the label IDs with the number 1 and the input IDs as number 2. Is that not enough of a difference? I thought as long as one character was different it was good.

11

This isn’t quite the issue, it just seems like it. Right click on the text for one of the check boxes and inspect it in dev tools. When dev tools opens, hover your mouse over each of the labels and watch the form to see what happens. That should give you a good idea of what is going on.

1 Like
12

So it’s the margins? How do you align them so they don’t overlap?

13

It’s not the margins. Margins aren’t clickable. Do you understand what display: block does? A label is an inline element by default. You have turned it into a block level element. You need to understand what happens when you do that.

I understand what you are trying to do here. The problem is that you haven’t learned enough CSS yet to be able to layout the check boxes properly like you want to. That information is coming, you are just sort of jumping the gun a little. My suggestion would be to get rid of all the positioning you are trying to do on these check boxes and just have them line up in one column. But if you want to jump ahead then I would recommend you use flexbox for this. Here are some links to a few articles.

MDN: Flexbox

CSS-Tricks: A Complete Guide to Flexbox

fCC: Learn CSS Flexbox in 5 minutes - A tutorial for beginners

1 Like
14

Actually, I already finished the Responsive Web Design course. I was just tweaking my project for practice - it was a bit bland lol. You are correct, though, I have a pretty weak grasp on what display: block does. It’s alot to learn and I’m kinda just trying to figure things out as I run into problems. I’ll try using flexbox though. Thank you!

15

This might help:

16

Hello @holiday387 !

I found something that may help you with the checkbox background color change.

As well, I do not know if this has been mentioned, or if it is just a posting error, but I do not see the basic boiler template which should include the href to connect the html to the css for the styling.

If it is just posting error where it just did not show up, I apologize bringing it up.

Just in case, here is a link with the basic boiler template.

HTML Starter Boiler Template

Keep up your good progress!

1 Like
17

Thank you for the article, I will check it out. I do have the link to CSS right under the opening head element.

<!DOCTYPE html>
<center><html>
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
18

Thank you for that information. I did not see it in post. My apologies!

19

No problem. Thanks for all of your help. This forum has really helped me along!

2 Likes
20

This forum community is great, and you, like all of us, help each other.

I have learned so much from this community, and everybody, like yourself, help me learn, too.

Thank you!

1 Like