Add a contact form to any website

How to add a contact form to any website

A static site can show a form but can’t receive one: there is no server behind it to take the submission, which is how so many simple sites end up with a backend nobody wanted. Paste the snippet where the form belongs and each submission goes to Sorraia instead, so the site stays a folder of files. The same copy-paste works in a hand-written page, a static-site template, or a CMS or page builder’s custom HTML block.

1. In Sorraia, add the website and verify it — a DNS TXT record, or a meta tag in your homepage’s <head>. Verification is what lets you attach a widget to that site, so it comes before there is anything to paste.

2. Save the form and the Copy Embed Code popup appears; you can also open the Install wizard from the form’s row on the Forms page, which walks you through pasting it and re-checks the page for you.

3. Copy the snippet from Sorraia. It already has your widget’s id and the right URL baked in, so copy it rather than retyping it.

4. Open the .html file (or the template, component, or partial) for that page and paste all three lines at the spot in the body where the widget should appear.

5. Save and deploy.

6. Load the live page. If nothing renders, check that it is on the domain the widget belongs to and that the domain shows as verified in Sorraia, then open the browser console, where a blocked script or a loader warning shows up.

Where these steps come from:¹

Worth knowing for this one

• If the site sends a Content-Security-Policy, the form needs its script’s host under script-src, the Sorraia API under connect-src — each submission is sent with fetch(), one of the requests connect-src governs — and 'unsafe-inline' under style-src, because the loader adds the form’s stylesheet as a style element without a nonce.²³⁴
• Re-saving the form in Sorraia updates what visitors see without re-pasting the snippet, so a change of wording never means redeploying the site.¹