chirp-form

The chirp-form element displays your form on any page. It automatically fetches your form configuration and renders all fields.

Basic Usage

<chirp-form form-id="YOUR_FORM_ID"></chirp-form>

Attributes

The chirp-form element supports various attributes.

form-id (required)

Your unique form identifier from the Chirp Form dashboard.

<chirp-form form-id="abc123"></chirp-form>

button-text

Customize the submit button text. Default: "Send"

<chirp-form form-id="YOUR_FORM_ID" button-text="Submit"></chirp-form>

redirect-to

Redirect to a URL after successful submission:

<chirp-form form-id="YOUR_FORM_ID" redirect-to="/thank-you/"></chirp-form>

The redirect-to attribute takes precedence over a defined success handling (see below).

disable-honeypot

Disable the built-in honeypot spam protection:

<chirp-form form-id="YOUR_FORM_ID" disable-honeypot></chirp-form>

Note: Only disable this if you have alternative spam protection (e.g. the form is used on private page).

Success handling

Display a custom message after successful submission:

<chirp-form form-id="YOUR_FORM_ID">
  <template type="style">
    .result {
      /* Your custom CSS here */
    }
  </template>

  <template type="result">
    <div class="result">
      <h3>Thank you!</h3>

      <p>We'll get back to you soon.</p>
    </div>
  </template>
</chirp-form>

Success message placement

Control where the success message appears:

• prepend (default) - insert at the beginning
• append - insert at the end
• replace - replace the entire form

<chirp-form form-id="YOUR_FORM_ID">
  <template type="style">
    .result {
      /* Your custom CSS here */
    }
  </template>

  <template type="result" placement="replace">
    <div>
      <h3>Thank you!</h3>

      <p>We'll get back to you soon.</p>
    </div>
  </template>
</chirp-form>

JavaScript events

Listen for successful submissions:

<chirp-form id="myForm" form-id="YOUR_FORM_ID"></chirp-form>

<script>
  document.getElementById("myForm").addEventListener("chirpform:form:success", (event) => {
    console.log("Form submitted!", event.detail);
    // event.detail contains the submission data
  });
</script>

Other events available are:

• chirpform:form:submit - dispatched before submit
• chirpform:form:erorr - dispatched upon form error
• chirpform:field:invalid - dispatched upon form error