test.html

<section class="container form-section" id="theForm">
    [[!FormIt?
    &hooks=`resources`
    &validate=`email:email:required`
    ]]
    <form action="[[~[[*id]]]]" method="post">
      <div class="columns">
        <div class="column">
          <div class="field">
            <!--<label class="label">First Name</label>-->
            <p class="control">
              <input class="input" type="text" placeholder="First Name" name="f_name" value="[[+fi.f_name]]">
            </p>
          </div>
          <div class="field">
            <!--<label class="label">Last Name</label>-->
            <p class="control">
              <input class="input" type="text" placeholder="Last Name" name="l_name" value="[[+fi.l_name]]">
            </p>
          </div>
          <div class="field">
            <!--<label class="label">Email</label>-->
            <p class="control">
              <input class="input" type="email" placeholder="Email" name="email" required="" value="[[+fi.email]]">
            </p>
          </div>
        </div>
        <div class="column is-7">
          <div class="field">
            <p class="control">
              <div class="b-checkbox">
                <input id="checkbox1" class="styled" type="checkbox" name="conf">
                <label for="checkbox1">I’m interested in attending the MagiCuba conference</label>
              </div>
            </p>
          </div>
          <div class="field">
            <p class="control">
              <div class="b-checkbox">
                <input id="checkbox2" class="styled" type="checkbox" name="fest">
                <label for="checkbox2">I’m interested in festival and show tickets</label>
              </div>
            </p>
          </div>
          <div class="columns">
            <div class="column">
              <p>How did you learn about MagiCuba?</p>
            </div>
            <div class="column">
              <div class="field">
                <p class="control">
                  <div class="b-checkbox">
                    <input id="checkbox3" class="styled" type="checkbox" name="b1">
                    <label for="checkbox3">Search Engine</label>
                  </div>
                </p>
              </div>
              <div class="field">
                <p class="control">
                  <div class="b-checkbox">
                    <input id="checkbox4" class="styled" type="checkbox" name="b2">
                    <label for="checkbox4">Friend</label>
                  </div>
                </p>
              </div>
              <div class="field">
                <p class="control">
                  <div class="b-checkbox">
                    <input id="checkbox5" class="styled" type="checkbox" name="b3">
                    <label for="checkbox5">News Story</label>
                  </div>
                </p>
              </div>
              <div class="field">
                <p class="control">
                  <div class="b-checkbox">
                    <input id="checkbox6" class="styled" type="checkbox" name="b4">
                    <label for="checkbox6">Advertising</label>
                  </div>
                </p>
              </div>
              <div class="field">
                <p class="control">
                  <div class="b-checkbox">
                    <input id="checkbox7" class="styled" type="checkbox" name="b5">
                    <label for="checkbox7"><textarea name="cust"></textarea></label>
                  </div>
                </p>
              </div>
            </div>
          </div>
          <div class="field">
            <p class="control">
              <button class="button send">Send</button>
            </p>
          </div>
        </div>
      </div>
    </form>
  </section>