Формы студии Boostrap отвечают по столбцам - PullRequest
Новая
       42

Формы студии Boostrap отвечают по столбцам

0 голосов
/ 02 декабря 2018

Я использую bootstrap studio для отправки ответов на мой почтовый ящик.Однако я не могу заставить его работать должным образом в столбцах

Например, 

<div class="container">
        <div class="row">
            <div class="col-md-6">
                <form data-bss-recipient="a6ecf09a9056b803c75d95a1041f534a" data-bss-subject="Form" id="contact-form">
                    <label for="name"><img src="assets/img/name.svg" /></label>
                    <input class="form-control" type="text" name="name" >
                    <label for="company"><img src="assets/img/company.svg" /></label>
                    <input class="form-control" type="text" name="company">                     
                    <label for="address"><img src="assets/img/address.svg" /></label>
                    <br>
                <textarea name="address" form="contact-form" cols="24" rows="8" ></textarea>
                <br>
                    <label for="telephone"><img src="assets/img/telephone.svg" /></label>
                    <input class="form-control" type="tel" name="telephone" >
                    <label for="email"><img src="assets/img/email.svg" /></label>
                    <input class="form-control" type="email" name="email" >
                    </div>

// ВЫШЕ ПОЛЕ ПОПРАВИЛИСЬ ПРАВИЛЬНО 

<div class="col-md-6">
                    <label for="department-to-contact"><img src="assets/img/department-to-contact.svg" /></label>
                    <br>
                    <select>
                  <option value="Technical">Technical</option>
                  <option value="production">Production Planning & Sales</option>
                  <option value="office-administration">Office Administration & Order Processing</option>
                  <option value="company-admin">Company Administration</option>
                <option value="accounts">Accounts</option>
                  <option value="prepress">Factory & Prepress</option>
                </select>
                <label for="enquiry"><img src="assets/img/enquiry.svg" /></label>
                <br>
                <textarea name="enquiry" form="contact-form" cols="35" rows="11" ></textarea>
                <p>&nbsp;</p>
                    <button class="btn btn-sm text-white bg-white" type="submit"><img src="assets/img/Submit%20Button.svg" width="180px" /></button>

// ВЫШЕ ПОЛЯ НЕ УДАЛЕНЫ

Я могу исправить это, сохранив форму в одном div, а затем разделив ее на два столбца, плавающих влево и вправо.Но это нарушает отзывчивость и не вариант.

1 Ответ

0 голосов
/ 03 декабря 2018

Ваш тег формы открывается внутри первого столбца, и поэтому предполагается, что форма закрывается при закрытии столбца div, и поэтому отправляет только те поля, которые являются частью этого столбца.Вы должны поместить все строки и столбцы формы в открывающие и закрывающие теги формы: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <form data-bss-recipient="a6ecf09a9056b803c75d95a1041f534a" data-bss-subject="Form" id="contact-form">
    <div class="row">

      <div class="col-md-6">
        <label for="name"><img src="assets/img/name.svg" /></label>
        <input class="form-control" type="text" name="name">
        <label for="company"><img src="assets/img/company.svg" /></label>
        <input class="form-control" type="text" name="company">
        <label for="address"><img src="assets/img/address.svg" /></label>
        <br>
        <textarea name="address" form="contact-form" cols="24" rows="8"></textarea>
        <br>
        <label for="telephone"><img src="assets/img/telephone.svg" /></label>
        <input class="form-control" type="tel" name="telephone">
        <label for="email"><img src="assets/img/email.svg" /></label>
        <input class="form-control" type="email" name="email">
      </div>
      <!-- //ABOVE FIELDS ARE SENT CORRECTLY -->

      <div class="col-md-6">
        <label for="department-to-contact"><img src="assets/img/department-to-contact.svg" /></label>
        <br>
        <select>
          <option value="Technical">Technical</option>
          <option value="production">Production Planning & Sales</option>
          <option value="office-administration">Office Administration & Order Processing</option>
          <option value="company-admin">Company Administration</option>
          <option value="accounts">Accounts</option>
          <option value="prepress">Factory & Prepress</option>
        </select>
        <label for="enquiry"><img src="assets/img/enquiry.svg" /></label>
        <br>
        <textarea name="enquiry" form="contact-form" cols="35" rows="11"></textarea>
        <p>&nbsp;</p>
        <button class="btn btn-sm text-white bg-white" type="submit"><img src="assets/img/Submit%20Button.svg" width="180px" /></button>
      </div>
    </div>
  </form>

</div>
...