contact​

{{#form 'contact' id="ContactForm" class="contact-form"}}
  {{#if form.posted_successfully}}
    <div>Success</div>
  {{/if}}
  {{#if form.errors}}
    <div>{{ form.errors.messages }}</div>
  {{/if}}
  <div class="contact__fields">
    <div class="field">
      <label for="ContactForm-email">email</label>
      <input type="email" id="ContactForm-email" name="contact[email]" title="email" placeholder="please input email">
    </div>
    <div class="field">
      <label for="ContactForm-birthday">birthday</label>
      <input type="date" id="ContactForm-birthday" name="attribute[birthday]" title="birthday" placeholder="please input birthday">
    </div>
    <div>
      <input class="contact__button" type="submit" value="Submit">
    </div>
  </div>
{{/form}}

document.querySelector('.contact__button').addEventListener('click', (e) => {
  const form = document.querySelector('#ContactForm')
  const inputs = form.querySelectorAll('input')
  const translateInput = form.querySelector('input[name=_translate]')
  const translate = {}
  for (let i = 0; i < inputs.length; i++) {
    const input = inputs[i]
    const title = input.getAttribute('title')
    const name = input.getAttribute('name')
    if (/contact|attribute\[[\w]+\]/.test(name)) {
      translate[name] = title
    }
  }
  translateInput.setAttribute('value', JSON.stringify(translate))
})