Submission fails when using custom contact form module in Apostrophe CMS

Question

I am following the "Going Deeper" portion of https://docs.apostrophecms.org/apostrophe/tutorials/intermediate/forms but I want to control the output of the form markup, more so than using the schema:macro.html allows. I am able to get the form to populate on the page just fine, but when I try to submit I get the "Something's not right" alert. This basically means there's an error somewhere in the apos.schemas.convert() call. But I can't seem to figure out where the error is.

I've pretty much copied the tuturial listed above, with the exception of the widget.html being my own version of the markup for the form.

So the code in my lib/modules/contact-form/index.js, lib/modules/contact-form-widgets/index.js and /lib/contact-form-widgets/always.js are all pretty much exact dups of what's in the tuturial, so I won't copy them here for brevity's sake. Below is my lib/modules/contact-form-widgets/views/widget.html for how I'm outputing the form fields:

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <form class="form contact-form mt-5" id="contactForm" data-contact-form>
        {% for field in data.schema %}
          {% if field.type === 'string' and field.textarea %}
            <div class="form-group">
              <label class="input-label" for="{{field.name}}">{{field.label}}</label>
              <textarea class="textarea-input" id="{{field.name}}" name="{{field.name}}" rows="5" placeholder="Type here"></textarea>
            </div>
          {% elif field.type === 'select' %}
            <div class="form-group">
              <label class="input-label" for="{{field.name}}">{{field.label}}</label>
              <select class="select-input" name="{{field.name}}">
                <option>Choose below...</option>
                {% for choice in field.choices %}
                  <option value="{{choice.value}}">{{choice.label}}</option>
                {% endfor %}
              </select>
            </div>
          {% else %}
            <div class="form-group">
              <label class="input-label" for="{{field.name}}">{{field.label}}</label>
              <input class="form-input" type="text" id="{{field.name}}" name="{{field.name}}" placeholder="{{field.label}}" value=""/>
            </div>
          {% endif %}
      {% endfor %}
      <button class="btn primary" type="submit">Submit</button>
      {# Later gets hoisted out and becomes visible #}
      <div class="thank-you" style="display: none;" data-thank-you>
        <h4>Thank you for getting in touch! We'll respond soon.</h4>
      </div>
    </form>
  </div>
</div>

Expected result would be a successful submission. Any help would be greatly appreciated. I love the apostrophe platform so far.

Answer 1

So after doing some looking at what the interior of the apostrophe-schemas/views/macros.html contains and investigating, if found that I wasn't including some critical data attribute I was missing. I basically just needed to add a data-name={{field.name}} to my form-groups and form submission are working now.