bootstrap studio 表单响应跨列

Question

我正在使用 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 中然后拆分成左右浮动的两列来解决此问题。但这破坏了响应能力，不是一种选择。

Answer 1

您的表单标记在第一列中打开，因此它假定表单在列 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>

bootstrap studio 表单响应跨列

boostrap studio form responses across columns

html

bootstrap-4

bootstrap-studio