HAPI + Alpine Plugin Require Alpine JS

If your website is not built with JavaScript framework such as Vue, React, Angular, you can use Alpine JS to implement the form.

Take a look at the examples below.

The Hard Way

<form x-data="contactForm" x-on:submit.prevent="submit">
  <div>
    <label for="name">Name</label>
    <input id="name" type="text" x-model="fields.name" />
    <template x-if="errors && errors.name">
      <p x-text="errors.name"></p>
    </template>
  </div>
  <div>
    <label for="email">Email</label>
    <input id="email" type="text" x-model="fields.email" />
    <template x-if="errors && errors.email">
      <p x-text="errors.email"></p>
    </template>
  </div>
  <div>
    <button type="submit">Submit</button>
    <span x-show="busy">Please wait...</span>
  </div>
</form>

<script src="//unpkg.com/alpinejs" defer></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
  document.addEventListener('alpine:init', () => {

    Alpine.data('contactForm', () => ({
      fields: {},
      errors: {},
      busy: false,
      submit() {
        this.errors = {};
        this.busy = true;

        axios
          .post('https://app.hapiforms.com/api/c9a2eac4-9869-4641-913e-8e132e947229', this.fields)
          .then(res => {

            this.busy = false;
            window.location.href = '/thank-you.html';

          })
          .catch(err => {

            this.busy = false;
            this.errors = err.response.data
          })
      }
    }))

  })
</script>

The Easy Way

<form x-data="contactForm" x-on:submit.prevent="submit">
  <div>
    <label for="name">Name</label>
    <input id="name" type="text" x-model="fields.name" />
    <template x-if="errors && errors.name">
      <p x-text="errors.name"></p>
    </template>
  </div>
  <div>
    <label for="email">Email</label>
    <input id="email" type="text" x-model="fields.email" />
    <template x-if="errors && errors.email">
      <p x-text="errors.email"></p>
    </template>
  </div>
  <div>
    <button type="submit">Submit</button>
    <span x-show="busy">Please wait...</span>
  </div>
</form>

<script src="//unpkg.com/alpinejs" defer></script>
<script src="https://unpkg.com/@juno0424/hapi@latest/dist/hapi.min.js"></script>
<script>
  Hapi.form({
    name: 'contactForm',
    endpoint: 'https://app.hapiforms.com/api/c9a2eac4-9869-4641-913e-8e132e947229',
    redirectTo: '/thank-you.html',
  });
</script>

Instead of writing long Alpine code, you will just need to write 3 lines of code to make the submission works and redirect to /thank-you.html page after the form is submitted.

Please check out the full documentation of HAPI Form plugin here

Vist https://stackblitz.com/edit/hapiforms-alpine and play it live for more examples including file upload features.