Survey Form - Build a Survey Form

[briannaarb]

Tell us what’s happening:

Full code: Survey Form - JSFiddle - Code Playground

I want to make my survey form look better, so I can include it the portfolio I’ll have to do. I’m having a couple of issues with it, though:

Problem 1: There’s a huge space between the checkboxes and the text. How do I get rid of that?

Problem 2: I want to set the dark green of the form to an opacity of 80%, but it sets the whole form. I tried to do a div to set the background color and opacity and it messed up everything.

Problem 3: I want a background, but it gets rid of the form color in the previous problem.

Your code so far

/* Problem 1 */
#interest p {
  margin-right:-10px;
}

/*I've also tried
#interest input[type="checkbox"] {
   margin-left:-10px;
} */

  <fieldset>
    <legend for="interest" id="interest">What are you interested in doing in this book club?
    </legend>
      <label for="interest" id="interest">
      Challenges: 
      </label>
      <input class="inline" id="interest" type="checkbox" value="challenges"/>
      <label for="interest" id="interest">Buddy Reads: 
      </label>
      <input class="inline" id="interest" type="checkbox" value="buddyreads"/>
      <label for="interest" id="interest">Group Reads: 
      </label>
      <input class="inline" id="interest" type="checkbox" value="groupreads"/>
      <label for="interest" id="interest">Book Exchange: 
      </label>
      <input class="inline" id="interest" type="checkbox" value="bookexchange"/>
  </fieldset>

/* Problem 2 */
form {
  background-color: #084A25;
  max-width: 500px;
  margin: 50px auto;
  padding: 10px 20px;
  border-radius: 4px;
}

/* Problem 3 */
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  color: #2BAB65;
  font-family: Poppins;
  font-size: 16px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(https://images.unsplash.com/photo-1588666309990-d68f08e3d4a6?q=80&w=1885&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)
};

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

freeCodeCamp.org

[kyleslufc]

It is hard to visualise your project without seeing all of the code to help you find what might be conflicting.
From what i can see for your problem number 3, you have set the color in the body with the image but only set the background color in the form element. it might help to set the color in your form element so it applies to everything within it.
Also remember you can accidently override your properties with ordering of styles.
I hope you manage to find some solutions pal.

[a2937]

Hello.

I’d alter the ids for the first one to get started. Never ever make attributes with the same id in the form. It’s a good way to get really bad data.

I did try putting those checkboxes and radio buttons in divs with their labels but it still looks kinda bad.

As for it getting rid of the form color, are you absolutely sure it does that? You might just want to stretch the background-image by changing it to stretch instead of cover.

[briannaarb]

Hey, I posted the full code link in the beginning of the post!

How do I set the background color in the body but only in the form? I’ve been trying to figure that out. I’ve tried so many things, and nothing worked.

I’m looking at the styles to determine what I did there now.

[briannaarb]

When I changed it to stretch, it got rid of the formatting for the form. How did you get the background working in your screenshot?

[briannaarb]

Hi,

I have updated the code in the link. If you’re still willing to help, how can I get this code to work?

.general-info {
margin-bottom: 5px;
}

and solve problem 1? What changes can I make below?

legend.interest>input {
padding-left:-20px;
}

[briannaarb]

Hello,

I have updated the code in the link. If you’re still willing to help, how can I get this code to work?

.general-info {
margin-bottom: 5px;
}

and solve problem 1? What changes can I make below?

legend.interest>input {
padding-left:-20px;
}