Forms

Embedding on your website

Put a form directly on your own site with a copy-and-paste snippet.

Add it to your site

Any form can live directly on your own website instead of behind a link. Open the form's edit page, click the ⋮ menu at the top right and choose Get this on your website (the same menu has Share link for sending patients a direct link). A short guide walks you through the look (colors, corners, font) and the height, then gives you the code to copy, with where-to-paste steps for WordPress, Squarespace and Wix. The preview is your real form, but nothing typed into it is saved. The code looks like this:

<script src="https://…/embed.js" async></script>
<goji-form org="your-practice" form="…"></goji-form>

Paste it into any page that accepts HTML — a WordPress custom-HTML block, Squarespace or Wix code block, or a plain HTML file. Put the <script> line once per page; add one <goji-form> for each form.

How it works

The form runs on Goji and is shown inside a frame on your page, so the patient's answers go straight to Goji — they never pass through your website or any scripts on it. Submissions land in your Form submissions inbox exactly as if the patient had used the public link, and signatures and progress-saving work the same way.

Progress is saved in the patient's browser separately for each website the form is embedded on, so a half-finished form on your site won't appear if the patient opens the public link instead.

Options

height — by default the frame sizes itself to the current question, staying between 360 and 900 pixels tall, so short questions don't leave empty space and long screens like the signature step don't need a scrollbar. Set a number (height="700") for a fixed height, or two numbers (height="300,700") to set your own minimum and maximum. The width fills whatever space your page gives it.
theme — light (default), dark, or auto to match the visitor's device setting.

Matching your brand

The setup guide has controls for accent color, background, corner roundness and font, with a live preview, and adds the matching attributes to your snippet. You can also write them by hand:

<goji-form org="your-practice" form="…"
  accent="#c4623a" background="transparent" radius="12" font="serif"></goji-form>

accent — a hex color for buttons, progress and highlights. Text on top of it switches between white and dark automatically so it stays readable.
background — a hex color, or transparent to let your page show through.
radius — corner roundness, 0 to 24 pixels.
font — serif, rounded or mono use fonts already on the visitor's device. Or give the name of any Google Font, like font="Lora" or font="Playfair Display". The visitor's browser then loads that font from Google, so Google sees their IP address; the patient's answers are never part of that request. Leave it off for the default sans-serif.

These are a fixed set of options rather than custom CSS. The form collects patient information, so it doesn't accept styles from the page it sits on. Anything invalid is ignored and the default is used.

Reacting to a submission

The <goji-form> element fires goji:ready when the form has loaded and goji:submitted when a patient submits successfully. Neither event carries any answers.

document.querySelector("goji-form")
  .addEventListener("goji:submitted", () => {
    // e.g. fire an analytics event, or send the visitor to your thank-you page
  });