Form fields & selectors

Field names the handler expects

The hosted contact handler recognizes these field names:

• name — required
• phone — required
• email — required
• message — required
• reason — optional

Any additional named inputs you include are forwarded along with the submission, so you can capture extra context without extra configuration. An empty optional reason is omitted automatically.

Targeting your form

By default the client binds to any form carrying the data-contact-form attribute:

<form data-contact-form>
  <!-- fields -->
</form>

If your markup already uses its own classes or IDs, pass a custom selector instead:

<form class="marketing-contact-form">
  <!-- fields -->
</form>

<script src="https://script.app.overtureforms.com/contact-form.bundle.js" defer></script>
<script>
  window.addEventListener("DOMContentLoaded", function () {
    window.ContactFormHandler.initContactForms({
      selector: ".marketing-contact-form",
      publicKey: "YOUR_PUBLIC_KEY",
      formId: "YOUR_FORM_ID"
    });
  });
</script>

Migrating an existing form

If your form currently submits to a page URL (action="#" or a server route), let the Overture client take over submit handling reliably:

1. Load the bundle with defer.
2. Call initContactForms(...) on DOMContentLoaded.
3. Keep data-contact-form (or pass selector) on the form element.

No other changes are needed — the client intercepts the submit event, so your existing action is ignored.