Freeform text form input box

Question

I have set up an input form like this:

<form name='inputform' id='inputform'>

    <div class="center_text_grid flex-item mktg_text EMail_Pwd">

    <input type="text" class="signup_join" autofocus placeholder="Your email address" id="email_field" name="email_field" style="width:75%;" required></div>

    <div class="center_text_grid flex-item mktg_text EMail_Pwd">

    <input type="text" class="signup_join" autofocus placeholder="First Name (optional)" id="name_field" name="name1_field" style="width:75%;"></div>

    <div class="center_text_grid flex-item mktg_text EMail_Pwd">
    <input type="text" class="signup_join" autofocus placeholder="Last Name (optional)" id="name_field" name="name2_field" style="width:75%;"></div>

    <div class="center_text_grid flex-item mktg_text EMail_Pwd">
    <input type="comments" class="signup_join" autofocus placeholder="Comments (optional)" name="comments" style="width:75%;"></div>

</form>

The final input box is for freeform text comments, but it behaves like an email input box where the cursor is positioned in the center by default and the text doesn't wrap. I need a box that has the same size and rounded edges as the other three inputs, but the text wraps like a normal input box. In other words, I'm looking for a simple freeform text box as a form input box.

This is the css code for the four classes:

.center_text_grid {
    display: grid;
    grid-column: 5 / 12;
    grid-row: 20 / 20;
    display: block;
    overflow: auto;
    align-items: center;
    justify-items: center;
}

.flex-item {
  display: flex;
  width: 70%;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.mktg_text{
    font-family: CamphorW01-Thin, sans-serif;
    font-size: 13pt;
    color: rgb(175,222,162);
    line-height: 1.5;
}

.EMail_Pwd{
    grid-column: 8 / 14;
    font-family: CamphorW01-Thin, sans-serif;
    font-size: 14pt;
}

I'm using all the same classes in the freeform text box. I have tried new classes for the freeform text box, but still no success. The simple question is how can I do a freeform text input box based on the form code above?

Thanks for any ideas.

Answer 1

<input type="comments" /> comments isn't a valid input type. Use <textarea>.