Framer | Rooster Docs

Framer

Use Framer custom code for analytics and page-level form collection.

Builder Reference

Framer supports custom code globally or on a single page. See Framer's custom code lesson: Custom Code.

Analytics

Add analytics as global custom code.

<script src="https://api.rooster.host/analytics/YOUR_PUBLIC_KEY.js" defer></script>

Basic Form Collection

Add the collector on the form page. The form needs named fields so Rooster can save readable submission keys.

<script src="https://rooster.ink/embed/YOUR_PUBLIC_KEY.js" data-rooster-form="default" defer></script>
 
<form data-rooster-form="default">
  <input name="email" type="email" required />
  <textarea name="message" required></textarea>
  <button type="submit">Send</button>
</form>

Multi-Stage Form

Use custom code for staged forms so you can add Rooster's stage attributes.

<script src="https://rooster.ink/embed/YOUR_PUBLIC_KEY.js" data-rooster-form="sales" defer></script>
 
<form data-rooster-form="sales">
  <input name="work_email" type="email" />
  <button type="button" data-rooster-continue>Next</button>
  <select name="company_size">
    <option>1-10</option>
    <option>11-50</option>
  </select>
  <button type="submit" data-rooster-continue data-rooster-final="true">Submit</button>
</form>