Core

chirp-feed

The chirp-feed element displays submissions from your forms. Show testimonials, comments, guestbook entries or any form responses on your site.

Basic Usage

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

This displays all submissions with a default template.

Real-time Updates

When a chirp-form and chirp-feed share the same form-id on the same page, the feed automatically updates when new submissions are made.

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

<h2>Recent Submissions</h2>

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

Custom Templates

Create custom layouts for your submissions using the template element:

<chirp-feed form-id="YOUR_FORM_ID">
  <template type="style">
    .card {
      /* Custom CSS for submission here */
    }
  </template>

  <template type="submission">
    <div class="card">
      <h3>{{name}}</h3>

      <p>{{message}}</p>

      <time>{{created_at}}</time>
    </div>
  </template>
</chirp-feed>

Use the, optional, template type="style" element to capture additional styles.

Template Variables

Use double curly braces to insert submission data:

  • {{field_name}} - Any field from your form
  • {{created_at}} - Submission timestamp

Field names are matched by:

  1. Exact field name
  2. Slugified field name (lowercase with underscores)

Example: A field labeled Your Name can be accessed as {{Your Name}} or {{your_name}}

Template Actions

Control how new submissions appear:

Prepend (default)

New submissions appear at the top:

<chirp-feed form-id="YOUR_FORM_ID">
  <template type="submission" action="prepend">
    <div class="submission">{{message}}</div>
  </template>
</chirp-feed>

Append

New submissions appear at the bottom:

<chirp-feed form-id="YOUR_FORM_ID">
  <template type="submission" action="append">
    <div class="submission">{{message}}</div>
  </template>
</chirp-feed>

Default Template

If no custom template is provided, submissions are displayed as a definition list:

<li>
  <dl>
    <dt>Created at</dt>
    <dd>2025-11-13T10:30:00Z</dd>

    <dt>name</dt>
    <dd>John Doe</dd>

    <dt>message</dt>
    <dd>Hello world!</dd>
  </dl>
</li>

Examples

These examples show common use-cases for Chirp Form's feeds.

Testimonials

<chirp-feed form-id="YOUR_FORM_ID">
  <template type="submission">
    <blockquote class="testimonial">
      <p>"{{testimonial}}"</p>

      <footer>— {{name}}, {{company}}</footer>
    </blockquote>
  </template>
</chirp-feed>

Comments

Include filter-url="current" for page-specific submissions, like comments.

<chirp-feed form-id="YOUR_FORM_ID" filter-url="current">
  <template type="submission">
    <article class="comment">
      <header>
        <strong>{{name}}</strong>

        <time>{{created_at}}</time>
      </header>

      <p>{{comment}}</p>
    </article>
  </template>
</chirp-feed>

Guestbook

Note the included filter-url="current" attribute.

<chirp-feed form-id="YOUR_FORM_ID" filter-url="current">
  <template type="submission" action="prepend">
    <div class="guestbook-entry">
      <div class="entry-header">
        <span class="name">{{name}}</span>

        <span class="location">{{location}}</span>
      </div>

      <p class="message">{{message}}</p>

      <time class="timestamp">{{created_at}}</time>
    </div>
  </template>
</chirp-feed>