A new patient is already on your contact page, deciding whether to call. Sending them off to a separate link to fill in a form is one more place to lose them. An embedded form sits in the page itself, in your colors, and the patient never leaves your site.
Get the code in three steps
Open Forms in the sidebar and use the ⋮ menu on a form's row, or on its own page, and choose Get this on your website. (The form's page also has a Get this on your website button under Share this form.) A short guide takes you through three steps: Style, Size, and Get the code.
- Style: start from a look (Goji, Terracotta, Ocean, Blossom or Ink), then change the Button & highlight color, the Background (or Blend into my page (transparent)), the Corners (Square, Soft or Round) and the Font. A Dark mode menu offers Always light, Always dark or Follow the visitor's device.
- Size: Fit each question automatically, which is recommended, or A fixed height in pixels. Automatic grows and shrinks with the question on screen, so there is no empty space or inner scrollbar.
- Get the code: a Copy code button, and Where do I paste it? tabs for WordPress (a Custom HTML block), Squarespace (a Code block, which needs a plan that allows custom code) and Wix.
A preview beside the controls is your real form with your real questions. Nothing typed into it is saved or sent, so you can click through it freely. The code is one script line and one tag, and you can come back to the guide any time and paste in the updated snippet:
What runs where
The tag draws a frame, and the form inside it runs on Goji, the same one patients reach from your public link. The patient's answers are sent straight to Goji; they don't pass through your website or any scripts on it. Finished forms arrive in the same submissions inbox, and required signatures, validation and saved progress work as they do on the link. A small Powered by link sits in the corner of the frame.
Styling is a fixed set of options, not custom CSS. The form collects patient information, so it doesn't accept styles from the page around it, and anything invalid is ignored in favor of the default. Text on top of your accent color switches between white and dark to stay readable. Fonts named Serif, Rounded and Mono use fonts already on the visitor's device. A Google Font such as Lora is loaded by the visitor's browser from Google, so Google sees their IP address, though never their answers.
Options you can set by hand
The guide writes these attributes for you, and you can edit them directly:
- height: left off, the frame fits the current question between 360 and 900 pixels. A number such as 700 fixes it, and two numbers such as 300,700 set your own minimum and maximum. Width always fills the space your page gives it, so use a narrower column to make it narrower.
- theme: light (the default), dark or auto.
- accent: a hex color for buttons, progress and highlights.
- background: a hex color, or transparent to let your page show through.
- radius: corner roundness from 0 to 24 pixels.
- font: serif, rounded, mono, or a Google Font name.
React when a form is submitted
The tag fires goji:ready when the form has loaded and goji:submitted when a patient submits successfully. Neither carries any answers, only the form's id. Use them to fire an analytics event or send the visitor to your own thank-you page; the custom thank-you screen inside the form still shows as well.