How to add a custom feedback form to your site

The short answer: describe the fields once, then open the form from any button with one line. SnagFrog shows it in a panel, in the visitor's language if you translated it, and every answer lands in your inbox as a report you can reply to.

When is a custom form better than a bug report?

When you need specific answers: "Which store should we add?", "Which file do you want imported?"
When the same request comes in often and you want each one to look the same.
When a request needs a web address or an email address, checked before it is sent.

Step 1: Create the form

Set a Key, such as importer. Your site opens the form by it.
Pick the language it is Written in, and what it Arrives as: Idea / feedback, Bug or Question.
Write the Heading, and optionally the intro, button, report title and thank-you text.
Add Fields: a label and a type (short text, web address, email or long text), ticked required where needed.
Leave On: sites can open it ticked and press Save form.

In the Report title, {key} is replaced by that field's answer, so each report gets a useful title, such as "Import: Things 3".

Step 2: Open it from your site

<!-- The widget must be on the page: -->
<script src="https://snagfrog.com/widget.js" data-app="your-app" async></script>

<!-- Then either a button with no script of your own: -->
<button data-snag-open data-snag-form="importer">Request an import</button>

<!-- or one line from your own code: -->
<script>document.querySelector('#import').onclick = () => Snag.open({ form: 'importer' });</script>

The widget can hide its own floating button if you only want your buttons. Without the widget, link to /r/your-app?form=importer.

Step 3: Translate it

Under Translations, add a language and translate the texts and fields. Visitors in a language without a translation see the form's own language. The widget around it already speaks 17 languages.

Step 4: Work through the answers

Answers arrive in the inbox like any report, with the page and browser attached. Reply by email, label them, put a request on the roadmap, or ask Claude to group them by theme. Deleting a form makes its buttons show the usual report form instead, so no link breaks.

Questions

How do I add a custom form to my website without a backend?

Build the form in SnagFrog, then open it from your page with Snag.open({ form: "key" }) or a button with data-snag-open and data-snag-form. The SnagFrog widget shows the form and stores what people send; you write no server code.

What fields can a form have?

Short text, web address, email and long text, each optional or required. A form can have up to 12 fields, and an app up to 20 forms. An email field is where your replies go.

Where do the answers go?

Each answer arrives in the inbox as a report of the kind you chose: idea or feedback, bug, or question. You can reply, label it, put it on the roadmap or let Claude work on it like any other report.

Can I link to a form from an email or a menu?

Yes. Every form has its own address on the app's report page: /r/your-app?form=key. It works without the widget.

Related guides

All 21 guides, from an idea to a launched app.

How to add a custom feedback form to your website