Survey Form Feedback/Help

I finished my Survey Form and need some feedback/help.

Im not able to move the textarea and the button in the middle under the two columns. I tried a lot, but nothing seems to work.
Is it correct to create the columns with display:grid, or is there a better way to build this?
Actually i wanted to reduce the opacity of only the background image, but i couldnt figure how to do it properly. Instead i spent way too much time changing the color and style of the text to make it readable. I hope its ok.
I know br elements are not the best way to use, but when i try it with block the description is always under the radio button.

Thanks for your help.

try to make your submit thing in a div and give it a margin 0 auto to move it to the center.

They are all children of survey form div with display: grid. If you want the foot div to be in the middle, you have to change that foot div span to cover 2 columns width, using the grid-column-start. After that there are several ways to center the elements. My approach is to set this foot div display to flex (thus it’s a flex-box nested in a sub-grid), with flex-direction: column, and align-items: center. If you’re using your browser’s dev console (click right > inspect > click on most top-left), it’d be easier to be aware of this problem.

@shugyoza
Your advice worked perfectly. Thanks for the help.

Hello everyone,
I’m needing some help with the survey project in particular with the email not validating. Thanks in advance.


<h1 id="title">Ford Truck Survey</h1>
<p id="description">Choose your favorite Ford truck and color</p>

<form id="survey-form">
  <div>
    <label for="name" id="name-label">Name</label>
    <input  type="text" name="name" id="name"Placeholder="Enter full name here" required></input>
  </div>
  <br>
  <div>
   <label for="email" id="email-label">Email</label>
  <input  type="text" name="email" id="email"  Placeholder="Enter valid email here" pattern=".+@globex\.com" required></input>
  </div>
  <br>
  <div>
   <label for="age" id="number-label">Age</label>
    <input  type="number" name="age" id="number-label" value="age" min="18" max="100" Placeholder="18" required></input>
  </div>
  <br>
  <div>
    <label for="dropdown" id="model"><b>Select your favorite model</b></labels>
    <br>
    <select id="dropdown">
      <option value="f-150">F-150</option>
      <option value="ranger">Ranger</option>
      <option value="raptor">Raptor</option>
      <option value="lightning">Lightning</option>
    </select>
  </div>
  <br>
  <div>
    <label for="colors" id="colors"> <b>Choose your favorite color</b></label>
    <br>
    <input type="radio" name="white" id="colors">
    <label>White</label>
    <br>
    <input type="radio" name="red" id="colors">
    <label>Red</label>
    <br>
    <input type="radio" name="black" id="colors">
    <label>Black</label>
  </div>
  <br>
  <div>
    <label for="Upgrades" id="checkboxes"> <b>Upgrades</b></label>
    <br>
    <input type="checkbox" id="checkboxes" name="leather_seats" value="leather_seats">Leather seats</input>
  <input type="checkbox" id="checkboxes" name="premium_sounds" value="premium_sound">Premium sound</input>
<input type="checkbox" id="checkboxes" name="security_system" value="security_system">Security system</input>
  <div>
    <label><b>Additional Comments:</b></label>
    <br>
    <textarea type="textarea" cols="45" rows="10>"></textarea>
      </div>
<input type="submit" id="submit" value="Submit form">
</form>


@gooseman, please open your own topic for any issue you are having rather than detracting from the OP’s topic.

Your form looks good @jukusuna. Some things to revisit;

  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
    • Reference MDN Docs
      Instead of using <br> elements to have each inline element on a new line use, or set, container elements to be block-level elements so they’ll each take up the full width.
  • Keep all your styling external. Do not use in-line styling.

@Roma thank you for your feedback. I apologize for placing my question in the feed. Could you direct me on how to start a new topic. I’m new to the camp and also believe it or not I don’t have much experience with forums. Thank you