Build a Survey Form

HTML-CSS
1

Hello Everyone! I have built the survey form but i am having difficulty fixing the background image . If i am setting it to “no-repeat”
then there is a white-space or it uses background color given to the body. if i use repeat then background image repeats itself. Please help me fix it

*{
box-sizing: border-box;
}

img{
height:auto;
}
html{
height:100%;
}
.container{
width: 100%;
margin: 3.125rem auto 0 auto;
}

.text-center{
text-align:center;
}

.description{
font-style: italic;
font-weight: 200;
}

body{

font-family: Poppins, sans-serif;
font-size: 1rem;   
color: #f3f3f3;
margin:0;

}

body {
display:block;
width: 100%;
margin: 0;
background-image: linear-gradient( 115deg, rgba(58, 58, 158, 0.8), rgba(136, 136, 206, 0.7) ), url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
height: 100%;
background-size:cover;
background-position: center;
}

h1, p{
margin-top: 0;
margin-bottom: 0.5rem;
}

p{
font-size:1.25rem;
}

p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}

@media (min-width:480 px){
form{
padding:2.5rem;
}
}

form
{
background: rgba(27, 27, 50, 0.8);
padding: 2.5rem 0.625rem;
border-radius: 0.25rem;
}

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

div{
display:block;
}

.input-textarea{
min-height: 120px;
width: 100%;
padding: 0.625rem;
resize: vertical;
}

label{
display: flex;
margin: 0.5rem 0;

}

#name, #email, #number{
margin: 10px 0 0 0;
width: 100%;
min-height: 2em;
}

input, button, select, textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;

}

.input-checkbox{
display:block;
}

.submit-button{
display: block;
width: 100%;
padding:0.75rem;
margin: 1em auto;
font-size: 1.1rem;
background:#37af65 ;
color:white;
border-radius:2px;
text-align:center;

}

button{
border: none;
}

.clue
{
margin-left: 0.25rem;
font-size: 0.9rem;
color: #e4e4e4;
}

2

Welcome to our community!

Post the entire html and css code.

3

Thanks For Welcoming me and helping me with my doubt. Here is the code.

HTML Code

Survey Form

Codedamn Survey Form

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

<form id="survey-form">
  
  <div class="form-group">
  <label for="" id="name-label">Name</label>
  <input id="name" type="text" placeholder="Enter your name"  required></input>
  </div>

  <div class="form-group">
  <label for="" id="email-label">Email</label>
  <input id="email" type="email" placeholder="Enter your email" required></input>
  </div>

  <div class="form-group">
  <label for="" id="number-label">Age(optional)</label>
  <input id="number" type="number" placeholder="Age" min="5" max="120"></input>
  </div>

  <div class="form-group">
  <p>Which option best describes your current role?</p>
  <select id="dropdown">
    <option disabled selected value>Select current role</option>
    <option value="1">Student</option>
    <option value="2">Full Time Job</option>
    <option value="3">Full Time Learner</option>
    <option value="4">Prefer not to say</option>
    <option value="5">Other</option>
  </select>
  </div>

  <div class="form-group">
    <p>Would you recommend Codedamn to a friend?</p>
    
    <label for="">
      <input name="user-recommend" value="definitely" type="radio" class="input-radio" checked>Definitely</input>
    </label>
     
     <label for="">
      <input name="user-recommend" value="maybe" type="radio" class="input-radio">Maybe</input>
    </label>
     
     <label for="">
      <input name="user-recommend" value="not-sure" type="radio" class="input-radio">Not Sure</input>
    </label>
  </div>

  <div class="form-group">
  <p>What is your favorite feature of Codedamn?</p>
  <select id="dropdown">
    <option disabled selected value>Select an option</option>
    <option value="1">Challenges</option>
    <option value="2">Projects</option>
    <option value="3">Community</option>
    <option value="4">Playgrounds</option>
  </select>
  </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" class="input-checkbox" type="checkbox">Front-end Learning Path</input></label>

    <label><input name="prefer" value="back-end" class="input-checkbox" type="checkbox">Back-end Learning Path</input></label>

    <label><input name="prefer" value="full-stack" class="input-checkbox" type="checkbox">Full-Stack Learning Path</input></label>

    <label><input name="prefer" value="blockchain" class="input-checkbox" type="checkbox">Web 3.0 And Blockchain Learning Path</input></label>

    <label><input name="prefer" value="dsa" class="input-checkbox" type="checkbox">Data Structures and Algorithms Learning Path</input></label>

  <label><input name="prefer" value="devops" class="input-checkbox" type="checkbox">DevOps Learning Path</input></label>

  </div>

   <div class="form-group">
      <p>Any comments or suggestions?</p>
      <textarea id="comments" name="comment" class="input-textarea" placeholder="Enter your comments here..."></textarea>
    </div>

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

  
</form>

CSS Code
*{
box-sizing: border-box;
}

img{
height:auto;
}
html{
height:100%;
}
.container{
width: 100%;
margin: 3.125rem auto 0 auto;
}

.text-center{
text-align:center;
}

.description{
font-style: italic;
font-weight: 200;
}

body{

font-family: Poppins, sans-serif;
font-size: 1rem;   
color: #f3f3f3;
margin:0;

}

body {
display:block;
width: 100%;
margin: 0;
background-image: linear-gradient( 115deg, rgba(58, 58, 158, 0.8), rgba(136, 136, 206, 0.7) ), url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
height: 100%;
background-size:cover;
background-position: center;
}

h1, p{
margin-top: 0;
margin-bottom: 0.5rem;
}

p{
font-size:1.25rem;
}

p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}

@media (min-width:480 px){
form{
padding:2.5rem;
}
}

form
{
background: rgba(27, 27, 50, 0.8);
padding: 2.5rem 0.625rem;
border-radius: 0.25rem;
}

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

div{
display:block;
}

.input-textarea{
min-height: 120px;
width: 100%;
padding: 0.625rem;
resize: vertical;
}

label{
display: flex;
margin: 0.5rem 0;

}

#name, #email, #number{
margin: 10px 0 0 0;
width: 100%;
min-height: 2em;
}

input, button, select, textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;

}

.input-checkbox{
display:block;
}

.submit-button{
display: block;
width: 100%;
padding:0.75rem;
margin: 1em auto;
font-size: 1.1rem;
background:#37af65 ;
color:white;
border-radius:2px;
text-align:center;

}

button{
border: none;
}

.clue
{
margin-left: 0.25rem;
font-size: 0.9rem;
color: #e4e4e4;
}

4

Try to change this selector as follows:

body {
width: 100%;
background-image: linear-gradient( 
  115deg, 
  rgba(58, 58, 158, 0.8), 
  rgba(136, 136, 206, 0.7)
), 
  url("https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg");
 }

Hope this will help.

5

Thanks a lot . I was really stuck in it for a long time. Can you please guide me on how to get better at CSS

6

Use any opportunity to create your own web pages, even the easiest one but try to include different CSS techniques. Start by repeating the basic styling forms given as examples on the following page:

There are tons of sources on the Web. Browse a little bit. You will always find the solution for faced issues.

7

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