Survey Form - Build a Survey Form

HTML-CSS
1

When i inspect my form using Chrome, and go to the Responsive tab, when i make the window smaller or select to view on a mobile device, the form is not displayed properly, I’m not sure where I have gone wrong or if I have just missed something in the code, I am still a beginner so any help would be appreciated.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Survey Form</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="heading">
    <h1 id="title">Survey Form</h1>
    <p id="description">Please fill out my survey to improve my skills</p>
  </div>

  <form id="survey-form">
    <div>
        <label id="name-label">Full Name:</label><br><br>
        <input required id="name" type="name" name="name" placeholder="Enter your name" class="form-control"><br><br></input>
        <label id="email-label">Email:</label><br><br>
        <input required id="email" type="email" name="name" placeholder="Enter your Email" class="form-control"></input><br><br>
        <label id="number-label">Email:</label><br><br>
        <input id="number" type="number" name="number" min="13" max="100" placeholder="Enter your Age" class="form-control"></input><br><br>
        <label>Which option best describes your current role?</label><br><br>
        <div>
        <select id="dropdown" type="role" name="role"><br><br>
            <option value="selectrole">Select Your Role</option>
            <option value="student">Student</option>
            <option value="fulltimelearner">Full Time Learner</option>
            <option value="fulltimejob">Full Time Job</option>
            <option value="prefernottosay">Prefer not to say</option>
            <option value="other">Other</option>
        </select>
        </div>
    <div>
        <label>Would you recommend freeCodeCamp to a friend?</label><br><br>
        <input name="user-recommend" type="radio" class="recommend" value="Definately">Definately</input><br><br>
        <input name="user-recommend" type="radio" class="recommend" value="Maybe">Maybe</input><br><br>
        <input name="user-recommend" type="radio" class="recommend" value="NotSure">Not Sure</input><br><br>
        <input name="user-recommend" type="radio" class="recommend" value="No">No</input><br><br>
    </div>
    <label>What is your favorite feature of freeCodeCamp?</label><br><br>
    <select id="feature" type="feature" name="feature"><br><br>
        <option value="selectrole">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>
        <option value="other">Other</option>
    </select>
    <div id="content2">
    <label id="checkbox"> What would you like to see improved? (Check all that apply)</label><br><br>
    <input type="checkbox" value="Front-end-Projects" class="recommend">Front-end Projects</input><br><br>
    <input type="checkbox" value="Back-end-Projects" class="recommend">Back-end Projects</input><br><br>
    <input type="checkbox" value="Data-Visualization" class="recommend">Data Visualization</input><br><br>
    <input type="checkbox" value="Challenges" class="recommend">Challenges</input><br><br>
    <input type="checkbox" value="Open-Source-Community" class="recommend">Open Source Community</input><br><br>
    <input type="checkbox" value="Gitter-help-rooms" class="recommend">Gitter help rooms</input><br><br>
    <input type="checkbox" value="Videos" class="recommend">Videos</input><br><br>
    <input type="checkbox" value="City Meetups" class="recommend">City Meetups</input><br><br>
    <input type="checkbox" value="Wiki" class="recommend">Wiki</input><br><br>
    <input type="checkbox" value="Forum" class="recommend">Forum</input><br><br>
    <input type="checkbox" value="Additional-Courses" class="recommend">Additional Courses</input><br><br>

    <label name="suggestions"> Any comments or suggestions?</label><br><br>
    <textarea id="suggestions" placeholder="Enter your comments here:"></textarea><br><br>
    <input id="submit" type="submit"></input>
    </div>
  </div>
  </form>
</body>

</html>

body {
    background-image: url(https://img.freepik.com/free-photo/forest-landscape_71767-127.jpg?w=996&t=st=1707668077~exp=1707668677~hmac=dac9ca7bd9a381d0003aef5b1c6beb4eeba525edf70ae8cd9ad111d44ba71026);
    background-size: cover;
    background-attachment: fixed;
    color: #fff;
  }

.heading {
    text-align: center;
    width: 100%;
    margin: 0;
  }
  
  #title {
    font-size: 1.8em;
  }

  #description {
    font-size: 18px;
  }

  #survey-form {
    background-color: rgba(0,0,0,0.7);
    padding-top: 34px;
    padding-bottom: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    margin-top: 10px;
    width: 40%;
    border-radius: 10px;
  }

  form .form-control {
    width: 98.5%;
    position: relative;
    height: 1.8em;
    border-radius: 5px;
    border: 0;
    bottom: 10px;
  }

  #dropdown {
    width: 98.5%;
    position: relative;
    height: 1.8em;
    border-radius: 5px;
    border: 0;
    bottom: 10px;
  }

  #feature {
    width: 98.5%;
    position: relative;
    height: 1.8em;
    border-radius: 5px;
    border: 0;
    bottom: 10px;
  }

  #suggestions {
    width: 98.5%;
    position: relative;
    height: 5em;
    border-radius: 5px;
    border: 0;
    bottom: 10px;
  }

  #submit {
    width: 98.5%;
    position: relative;
    height: 3em;
    border-radius: 5px;
    border: 0;
    bottom: 10px;
    background-color: green;
    color: #fff;
  }

  #content2 {
    margin-top: 10px;
    padding: 0;
  }
2

Could you please provide the output screens?

3

What do you mean by that?

4

Can you add a link to the page or screenshot your page

5

Hi, I’ll try to help you as a beginner. I think you tried the Device Mode feature in Chrome DevTools but it didn’t work as you expected. I don’t have knowledge understand what exactly you are referring to when you say “properly displayed” :slight_smile: There is a ready-made code to automatically scale according to the screen width of the displayed device:

<meta name="viewport" content="width=device-width, initial-scale=1" />

Sounds like this might be what you’re looking for. I tried this on your forum page project for you, but like I said, as a beginner I wasn’t sure what I should see :sweat_smile:

You will come across this code in the “Learn CSS Flexbox by Building a Photo Gallery” section of the responsive web design course, but unfortunately, there is not enough explanation. You can find a bit more information in the “Learn Accessibility by Building a Quiz” section, of course, you can also search for the code directly on the internet.

A little hint if you use vscode: you can triger html boilerplate shortcut by pressing “!” in a html file.

6

Screenshot_1
Screenshot_11919×1079 165 KB

Screenshot_2
Screenshot_21919×1079 118 KB

This is what is happening

7

I’m sorry but I don’t quite understand your problem, what exactly you were expecting and it didn’t happen or what you expected it not to happen. At this level the instructions we give to the computer are still very basic. If you expect it to look like the websites you use in your daily life, you will have to learn to enter many more commands :slight_smile:

if your problem is with the DevTools you can check this site. Device Mode

8

Hi @chrismiskin

Try changing the width to 80%.

In later challenges you will learn about @media rules, which make the page responsive to the screen size of the device.

Happy coding

9

It looks like the issue with the form not displaying properly on smaller screens or mobile devices might be related to the fixed width set for the form container (#survey-form). When the screen size is reduced, the fixed width might cause the elements to overflow or not adapt well to the smaller space.

To make your form more responsive, you can use relative units like percentages for width and consider using media queries in your CSS to adjust the styling based on different screen sizes. Here’s a modified version of your CSS to make the form more responsive:

cssCopy code

body {
  background-image: url(https://img.freepik.com/free-photo/forest-landscape_71767-127.jpg?w=996&t=st=1707668077~exp=1707668677~hmac=dac9ca7bd9a381d0003aef5b1c6beb4eeba525edf70ae8cd9ad111d44ba71026);
  background-size: cover;
  background-attachment: fixed;
  color: #fff;
}

.heading {
  text-align: center;
  width: 100%;
  margin: 0;
}

#title {
  font-size: 1.8em;
}

#description {
  font-size: 18px;
}

#survey-form {
  background-color: rgba(0, 0, 0, 0.7);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: auto;
  margin-top: 10px;
  width: 80%; /* Adjusted width for better responsiveness */
  border-radius: 10px;
}

form .form-control,
#dropdown,
#feature,
#suggestions,
#submit {
  width: 100%; /* Use 100% width for better responsiveness */
  margin-bottom: 10px; /* Add some space between form elements */
}

#submit {
  background-color: green;
  color: #fff;
}

#content2 {
  margin-top: 10px;
  padding: 0;
}

This CSS should help your form adjust better to different screen sizes. Feel free to adjust the percentage values to suit your design preferences.

10

Thanks man, so I tried using your exact code and it still performs the exact same as how my code did, it still squishes the form when I adjust the screen size… its very weird :confused:

11

Since your surveyForm ID has a width of 40% it is squeezing the content of the form. To avoid this you can give it a width of 50% or 60% then this will work, also in addition if you want to avoid this you can also give padding: 0 30px 0 30px; which will set the padding-top: 0, padding-right: 30 padding-bottom: 0 and padding-left: 30.

You can play with these numbers.

Capture
Capture704×575 67.1 KB

Thank you…
I hope this will be helpful.

12

Capture2
Capture2331×573 34.1 KB

13

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