Survey Form - Build a Survey Form

Tell us what’s happening:
I’m not necessarily stuck on anything here, but this is the first solo project i’ve done with no guidance, and I am just looking to get some feedback on the code i’ve written to see if anyone can point out anything i’m doing wrong or how I can improve.

Thanks :slight_smile:

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head> 
    <meta charset="UTF-8">
    <title>EE Customer Service Survey</title>
      <link rel="stylesheet" href="styles.css"/>
  </head>
<body>
  <img src="https://iconape.com/wp-content/png_logo_vector/ee-logo.png">
  <h1 id="title">EE Customer Service Survey</h1>
  <p id="description">Please use this survey form to provide feedback on how you felt your experience was speaking to us today.</p>
<form id="survey-form">
  <fieldset>
    <label id="name-label">Enter Your Name:<input id="name" name="name" type="text" placeholder="Input full name" class="inline" required></label>
    <label id="email-label">Enter Your Email Address:<input id="email" name="email" type="email" placeholder="Ensure email is valid" class="inline" required></label>
  </fieldset>  
  <fieldset>
    <label id="number-label">How would you rate the advisor you spoke to out of 10?<input id="number" name="number" type="number" min="0" max="10" class="inline" placeholder="Score between 0-10, with 10 being the best"></label>
    <label for="company">How would you rate EE as a company out of 10?<input id="company" name="company" type="number" min="0" max="10" class="inline" placeholder="Score between 0-10, with 10 being the best"></label>
    <label for="recommend">Would you recommend EE to a friend or family member?
    <select id="dropdown" name="dropdown" class="inline">
      <option value="">(Select one)</option>
      <option value="1">Yes</option>
      <option value="2">No</option>
      <option value="3">Unsure</option>
    </select>
    </label>
    <label for="feedback">Additional Feedback:
      <textarea id="feedback" name="feedback" rows="5" cols="30" class="inline" placeholder="Please provide any additional feedback about your experience"></textarea> </label>
    </fieldset>
    <fieldset>
      <h2>Marketing Preferences</h2>
        <p>How do you wish to receive markerting and offers in the future?</p> 
    <label for="sms"><input id="sms" type="radio" name="marketing-preference" class="inline" value="1">SMS</label>
    <label for="email"><input id="email" type="radio" name="marketing-preference" class="inline" value="2">Email</label>
    <label for="telephone"><input id="telephone" type="radio" name="marketing-preference" class="inline" value="3">Telephone</label>
    <label for="post"><input id="post" type="radio" name="marketing-preference" class="inline" value="4">Post</label>
      <p>Which products do you currently have with EE?</p>
   <label for="telephone"><input id="telephone" type="checkbox" class="inline" value="1"> Telephone</label>
   <label for="broadband"><input id="broadband" type="checkbox" class="inline" value="2"> Broadband</label>
   <label for="mobile-phone"><input id="mobile-phone" type="checkbox" class="inline" value="3"> Mobile Phone</label>
   <label for="tv"><input id="tv" type="checkbox" class="inline" value="4">TV</label>
    </fieldset>
  <input id="submit" type="submit" value="Submit"/>
</form>
</body>
</html>
/* file: styles.css */
body{
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: rgb(51,120,131);
  color: rgb(251,227,77);
  font-family: Tahoma;
  font-size: 16px;
}

h1, p{
  text-align: center;
  margin: 1em auto;
}

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

fieldset{
  border: none;
  padding: 2rem 0;
  border-bottom: 3px solid rgb(105,207,206);
}

fieldset:last-of-type{
  border-bottom: none;
}

label{
  display: block;
  margin: 0.5rem 0;
}

.inline {
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
}

input[type="submit"] {
  display: block;
  width: 60%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  background-color: rgb(105,207,206);
  border-color: white;
  min-width: 300px;
  padding-bottom: 20px;
}

input[type="file"] {
  padding: 1px 2px;}

input, textarea, select{
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 2em;
}

input, textarea {
  background-color: #ffffff;
  border: 1px solid #0a0a23;
  color: #ffffff;
}

img{
  width:30%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
}

Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

Great job! Looks good! :slight_smile:

1 Like