Add custom HTML attribute to buttons of a Grav generated form

Question

I created a Bootstrap form with the following footer:

            <div class="modal-footer">
                <button type="button" 
                        class="btn btn-secondary" 
                        data-bs-dismiss="modal" // <----------------------
                  >Close
                </button>
                <button type="button" class="btn btn-primary">Send</button>
            </div>

In Grav, I created a form that is styled like my Bootstrap form. I used the official documentation. To close the modal and the form, I need to add the custom attribute data-bs-dismiss="modal" to the button which is generated by Grav:

    buttons:
        -
            type: reset
            value: Cancel
            classes: btn btn-secondary mx-3
            attributes: data-bs-dismiss="modal"   <-------- add custom attribute how?
        -
            type: submit
            value: 
            classes: btn btn-primary
    process: ...

My example code does not work.

How do I add a custom attribute in the form frontmatter so it is generated by Grav with the button?

There is no documentation what additional attributes or values are accepted by the Grav form plugin so I am at a loss. Just clicking anywhere on the screen is fine but I cannot expect all the not-as-tech-savy users to know this so I also need a button.

Answer 1

You might give the following a try.

buttons:
  submit:
    type: submit
    value: Submit
    classes: btn btn-secondary
    attributes:
      data-bs-dismiss: modal

  reset:
    type: reset
    value: Reset

Generated element:

<button type="submit" data-bs-dismiss="modal" class="btn btn btn-secondary">Submit</button>

Note:

• I haven't tested it using Bootstrap
• Not sure if using 'attributes' has any side effects, but it seems to work.