Poily Docs
Source Apps/handoffs/admin_mkt/poily-form-highfidelity-prompt.md Last synced View .md

Fill in the blanks

Fill these in to get a copy of the prompt section with your values in it. Blank fields keep their {{placeholder}}. Run the operator precheck first.

#Poily high-fidelity integration — reusable agent prompt (<poily-form>)

For when a site wants Poily to render the form (schema, validation, submission, attribution all owned by Poily) but styled to look native/on-brand — no iframe, one custom element. This is the middle tier of the forms guide (https://docs.poily.com/forms), the counterpart to scan-to-create import. Use it for the "we want a Poily-managed form that looks like ours" case.

#Operator fill-ins

  • {{FORMS_DOMAIN}} — tenant forms host, e.g. forms.doerfy.com
  • {{SLUG}} — a published Poily form's slug (from app.poily.com → Forms → [form] → Distribution)
  • {{PAGE_URL}} — the deployed page to place it on
  • {{PLACEMENT}} — per-CTA attribution tag, e.g. home_hero
  • {{BRAND}} — the site's font / accent color / radius (for the CSS below)

#Operator precheck — confirm first

  1. A published Poily form exists and you have its {{SLUG}} (unlike import, this tier does not create the form — it renders an existing one). If you don't have one, use the scan-to-create import prompt first, or build it in the Forms module.
  2. {{FORMS_DOMAIN}}/poily-form.js is live and current: curl -sI https://{{FORMS_DOMAIN}}/poily-form.js → 200.
  3. The agent can edit the deployed source of {{PAGE_URL}} (not just a preview).

#Prompt (paste to the tenant's marketing-site agent)

Render our Poily form on the page with Poily's <poily-form> web component, styled to match our brand. Poily owns the schema/validation/submission/attribution; we own the CSS.

1) Add the component where the form should appear on {{PAGE_URL}}:

html
<script src="https://{{FORMS_DOMAIN}}/poily-form.js" async></script>
<poily-form slug="{{SLUG}}" placement="{{PLACEMENT}}"></poily-form>

2) Style it from our stylesheet (these pierce the component's shadow DOM — no iframe limits):

css
poily-form {
  --poily-font: {{BRAND font}};
  --poily-accent: {{BRAND accent}};
  --poily-field-radius: {{BRAND radius}};
  --poily-gap: 18px;
  /* also available: --poily-text --poily-muted --poily-field-bg --poily-field-border
     --poily-button-bg --poily-button-text --poily-button-radius --poily-label-color
     --poily-label-weight --poily-error */
}
poily-form::part(button) { text-transform: uppercase; letter-spacing: .04em; }
poily-form::part(label)  { font-weight: 700; }
/* parts: form intro field-grid field label input select textarea options option button error success required */

Optional microcopy via slots: <span slot="header">…</span>, <span slot="footer">No credit card. No spam.</span>. Half-width fields auto-flow into a 2-column grid; it collapses to one column on narrow screens.

3) Deploy to {{PAGE_URL}} — the real live origin (the component fetches the schema + submits to the Poily gateway, and CORS keys off your origin; a preview/localhost may be blocked).

4) Verify on the LIVE page — not a replay. DevTools → Network + Console:

  • poily:ready fires (the schema loaded) and the form renders styled.
  • Submit → POST …/dev/f/{{SLUG}}/submit → 200 {"id":"…"} and a poily:submitted event.
  • Then the row in app.poily.com → [tenant] → Submissions (with {{PLACEMENT}} + any UTMs).

Report: the submit id from the real Network trace, and a screenshot of the styled form.

#import vs high-fidelity — pick the tier

  • data-poily-import (scan-to-create): you already have a native <form>; Poily builds its form from your markup and captures. Your HTML renders. Zero form-building.
  • <poily-form> (this prompt): you want Poily to render a managed form that looks native. Needs an existing slug. Best when there's no good native form to reuse, or you want Poily to own validation/layout while matching your brand.