Contact forms — inline, modal, popup

What you get

The forms widget is a lightweight loader for a single contact form. The form itself lives on your AppGram portal — the widget renders an iframe pointing at it, sized and styled for the host page, with cross-origin events forwarded back to your code.

The bundle is served from https://cdn.appgram.dev/forms.min.js (~30 KB gzipped).

Three display modes

• Inline (default) — renders the form directly inside a container element you provide. Best for dedicated contact pages or embedding inside a landing-page section.
• Modal — renders a centered overlay over the page when opened via the API. Best for a "Contact us" button in a navbar or hero.
• Popup — renders a smaller positioned card (default bottom-right). Best for a persistent "feedback" launcher in the corner.

Install — inline mode

Add a container element to your HTML with a unique id, e.g. contact-form. Then drop a script tag pointing at https://cdn.appgram.dev/forms.min.js with these attributes:

src="https://cdn.appgram.dev/forms.min.js"
data-form="YOUR_FORM_ID"
data-container="#contact-form"

The iframe sizes itself to 100% width and auto height by default — it grows with the form's content.

Install — modal mode

For modal / popup you don't need a container element. The widget creates an overlay on demand and opens it via the public API. Use the same script tag with these attributes:

src="https://cdn.appgram.dev/forms.min.js"
data-form="YOUR_FORM_ID"
data-mode="modal"

Then anywhere on the page, trigger it with a button: onclick="window.AppGramForms.open()". The widget is invisible until AppGramForms.open() is called. Use .close() to dismiss programmatically; clicking the backdrop also closes it.

Install — popup mode

Popup is like modal but smaller and corner-positioned. Use these attributes:

src="https://cdn.appgram.dev/forms.min.js"
data-form="YOUR_FORM_ID"
data-mode="popup"
data-position="bottom-right"

Settings reference

• data-form / formId — Required. The form's UUID from your AppGram dashboard.
• data-mode / mode (default "inline") — inline, modal, or popup.
• data-container / container — CSS selector for the host element. Required for inline mode.
• data-width / width (default "100%") — any CSS width, e.g. "480px".
• data-height / height (default "auto") — any CSS height. auto resizes to the form's content.
• data-theme / theme.mode (defaults to OS) — light or dark.
• data-primary-color / theme.primaryColor — hex color with or without #.
• data-position / position (default "center") — popup only: bottom-right, bottom-left, top-right, top-left, center.

Reacting to submissions

The widget forwards events from the form iframe back to your page. Subscribe via AppGramForms.on(event, callback):

window.AppGramForms.on('submit', (data) => {
  analytics.track('contact_form_submitted', { formId: data.formId })
})

window.AppGramForms.on('close', () => {
  // user dismissed a modal / popup
})

Events emitted: open, close, submit, error. The submit payload includes the form ID and a server-confirmed receipt — the form data itself stays inside the iframe (the host page never sees raw field values).

Multiple forms on one page

Each script tag creates its own widget instance. If you need two forms inline on the same page, drop two script tags with different data-container selectors and the same or different data-form IDs.

Where to get the form ID

In the AppGram dashboard, open Forms, pick the form you want to embed, and copy the ID from the form's settings page. The form must be marked active to load successfully.