<form id="myForm" class="container" >
  
  <div class="row">
    <div class="col-sm-3"><h2>שדות הזנה ישירה</h2></div>
    <div class="col-sm-9">
      <fieldset>
        <div class="row">
          <legend class="col-12">קצת מידע עליכם</legend>
          <div class="col-6 simple-input">
            <input name="name" id="name" type="text" />
            <label for"name">שם מלא</label>
          </div>
          <div class="col-6 simple-input">
            <input name="email" id="email" type="email" />
            <label for"email">כתובת מייל</label>
          </div>
          <div class="col-6 simple-input">
            <input name="phone" id="phone" type="tel" />
            <label for"phone">מספר טלפון</label>
          </div>
          <div class="col-6 simple-input">
            <input name="password" id="password" type="password" />
            <label for"password">סיסמה</label>
          </div>
        </div>    
      </fieldset>
      <div>
        <legend>במה עוד תרצו לשתף אותנו?</legend>
        <textarea name="more"></textarea>
      </div>
    </div>
    <hr class="col-12" />
    <div class="col-sm-3"><h2>שדות בחירה יחידה</h2></div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-6">
          <fieldset>
            <legend>מה העונה האהובה עליכם?</legend>
            <span>
              <input type="radio" value="winter" name="season" id="winter" />
              <label for="winter">חורף</label>
            </span>
            <span>
              <input type="radio" value="autumn" name="season" id="summer" />
              <label for="autumn">סתיו</label>
            </span>
            <span>
              <input type="radio" value="summer" name="season" id="summer" />
              <label for="summer">קיץ</label>
            </span>
            <span>
              <input type="radio" value="spring" name="season" id="spring" />
              <label for="spring">אביב</label>
            </span>
          </fieldset>
        </div>
        <div class="col-md-6">
          <legend>שתפו אותנו בתחביב שלכם</legend>
          <select name="hobby">
            <option value="">בחרו תחביב</option>
            <option value="puzzles">פאזלים</option>
            <option value="taki">משחק בטאקי</option>
            <option value="lego">בנייה בלגו</option>
          </select>
        </div>
      </div>
    </div>
    <hr class="col-12" />
    <div class="col-sm-3"><h2>שדות בחירה מרובה</h2></div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-sm-6">
          <legend>תחומי עניין שמרתקים אתכם</legend>
          <select name="interests" multiple>
            <option value="">בחרו תחומי התעניינות</option>
            <option value="cars">מכוניות</option>
            <option value="design">עיצוב</option>
            <option value="computers">מחשבים</option>
            <option value="knowledge">מדע וידע</option>
          </select>
        </div>
        <div class="col-sm-6">
          <fieldset>
            <legend>מה תשמחו לאכול?</legend>
            <span>
              <input type="checkbox" value="pizza" name="food" id="pizza" />
              <label for="pizza">פיצה</label>
            </span>
            <span>
              <input type="checkbox" value="chips" name="food" id="chips" />
              <label for="chips">צ'יפסים פריכים</label>
            </span>
            <span>
              <input type="checkbox" value="salad" name="food" id="salad" />
              <label for="salad">סלט טרי</label>
            </span>
            <span>
              <input type="checkbox" value="humus" name="food" id="humus" />
              <label for="humus">חומוס</label>
            </span>
          </fieldset>
        </div>
      </div>
    </div>
    <hr class="col-12" />
    <div class="col-sm-4">כפתורי שליחה</div>
    <div class="col-sm-8" id="submit_btns">
      <button type="button" name="serialize" value="serialize">Serialize</button>
      <button type="button" name="serializearray" value="serializearray">SerializeArray</button>
    </div>
  </div>
</form>

body{
  direction: rtl;
  text-align: right;
  padding: 30px 0;
}
.simple-input label{
  display: block;
}
[type = "radio"] + label, [type = "checkbox"] + label{
  margin-left: 20px;
}
input:not([type = "radio"]):not([type = "checkbox"]), select, textarea{
  width: 100%;
}
#submit_btns{
  text-align: center;
  
}
span{
  display: inline-block;
}
h2{
  font-size: 1.5rem;
}
jQuery('#myForm').on('submit', function(e){
  e.preventDefault();
});
jQuery('#submit_btns button').on('click', function(){
  if(jQuery(this).attr('name') == 'serialize')
    var formData = jQuery('#myForm').serialize();
  else
    var formData = jQuery('#myForm').serializeArray();
  console.log(formData);
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js