Build and embed an intake form

Intake forms turn website visitors into requests. You build the form in Workspace369, then either paste one script tag into your site or share the form's own page. Every submission arrives in the Requests inbox with the consent the visitor gave.

Before you begin

• You need the Manage Request Form Settings permission.
• Decide what you must know from a first contact. Shorter forms get more submissions; ask only for what you need to reply.
• Have your terms and privacy policy pages ready. Visitors must accept them to submit.

Create a form

1. Open Requests, choose the settings menu in the list header, then Contact form.
2. Choose New Form, enter a name such as "Quote request", and choose Create. The URL name is generated from the name.

Form names must be unique.

Set up the form

The form editor is organized in sections:

1. Form Details. The Form Name and the URL name. The URL name is part of every embed and link, so change it before you share the form, not after.
2. Form Template. Pick a starting field set: Simple with name, email, and message; Full, which adds phone and service type; Quote Request, which adds address, date, and budget; Emergency with name and phone only; or Custom to build from scratch.
3. Visual Layout. Choose Default for a centered card, Editorial for a magazine look with serif headings, Glass for a frosted panel over slowly drifting color, Split for a dark brand panel beside the fields, Inline for plain fields with no card at all, or Minimal for a single row of pill-shaped fields. The layout you pick is used by the embed and by the form's own page alike.
4. Form Fields. Drag to reorder, tap a field's badge to switch between Required and Optional, and use the eye to show or hide it. Add hidden field and Add UTM fields under the list add fields the visitor never sees, filled from the address of the page they are on. See Track where a lead came from.
5. Form Design. Set the Form Title, the Button Text, and the Thank You Message the visitor sees after submitting.
6. SMS Consent. Turn on the consent checkbox and review the wording. The wording follows your registered messaging use case; when it covers both service and marketing texts, the visitor sees two separate checkboxes.
7. Terms & Privacy. Enter the URLs of your terms and privacy policy. The acceptance checkbox is always shown and always required.
8. Workflow Override. Keep the workspace Default Workflow, or give this form its own notification, auto-reply, assignment, and workflow trigger settings.
9. Choose Save.

Themes in the editor preview how the form renders on your site.

Embed the form on your website

One script tag puts the form on your site. It can render the form in the page, open it in a popup from a floating button we add, or render nothing at all and wait for a button of your own.

In the form editor, open the embed code section, pick a mode, and copy the snippet. Each one already carries your workspace ID and the form's URL name.

Inline

Paste it into your page where the form should appear.

<script src="https://369.dev/form.js"
  data-workspace="WORKSPACE_ID"
  data-form="quote-request"
  data-theme="light">
</script>

data-theme appears only when you picked a theme in the editor. Leave it out and the form uses the theme saved on the form itself.

Popup

Paste it anywhere on the page, or into your site builder's site-wide footer or custom-code area so the button appears everywhere.

<script src="https://369.dev/form.js"
  data-workspace="WORKSPACE_ID"
  data-form="quote-request"
  data-theme="light"
  data-mode="popup" data-label="Contact us" data-color="#111827">
</script>

data-label and data-color are the two things you edit by hand:

• data-label is the button text. It is cut at 40 characters; leave it out and the button reads Contact us.
• data-color is the button background. It has to be a full six-digit hex color such as #111827 — a shorter hex or a color name is ignored and the button stays #111827. The text color is picked for you, dark on a light button and white on a dark one.

Write data-mode="popup" in lower case. data-mode="Popup" is not recognized, and an unrecognized mode falls back to inline — the form renders in the page, wherever the tag happens to sit.

The button appears once the form has loaded, and always in the bottom-right corner, so the script tag itself can sit anywhere, <head> included. The visitor closes the overlay with the × control, by pressing Escape, or by clicking the dimmed area around it. What they typed is kept: closing and reopening returns them to the same half-filled form, and after they submit, reopening shows your thank-you message until the page is reloaded.

Your own button

<script src="https://369.dev/form.js"
  data-workspace="WORKSPACE_ID"
  data-form="quote-request"
  data-theme="light"
  data-mode="api">
</script>
<button type="button" data-w369-form>Contact us</button>

data-mode="api" loads the form and shows nothing — no form in the page, no floating button of ours. Your own element opens it; see Open the form from your own button.

Open the form from your own button

Add data-w369-form to any element on the page — a button, a link, a menu item — and clicking it opens the form in the overlay.

<button type="button" data-w369-form="quote-request">Get a quote</button>

The value is the form's URL name, the same one the snippet puts in data-form. Leave the value empty and the click opens the first popup or your-own-button form on the page, which is all you need when the page carries one form.

The click is caught wherever the element sits, including elements your site adds later, and the element's own action is suppressed. Keep a real href on a link: it still goes to the form's own page for a visitor whose JavaScript never runs, and opens the popup for everyone else.

From JavaScript

window.W369Form.open('quote-request');  // open a form by its URL name
window.W369Form.open();                 // open the first form on the page
window.W369Form.close();                // close whatever is open

• Once the script has loaded, a click or an open() that lands before the form itself has arrived is remembered, and the popup opens by itself the moment it does. Nobody has to click twice.
• When the form cannot be loaded, or the name matches no snippet on the page, nothing opens and a message is written to the browser console. Check there first if a button seems dead.

An inline page has no window.W369Form

A page carrying only the inline snippet has no window.W369Form at all, and ignores data-w369-form elements entirely — silently, with nothing in the console. The inline snippet renders its form and does nothing else.

So if you pasted the inline snippet and then added buttons of your own, those buttons do nothing. Swap the inline snippet for the popup or your-own-button one, or add a second snippet in Your own button mode for the form the buttons should open.

Share the form as a page

Choose Standalone URL to copy a link to the form hosted on 369.dev. Use it in email signatures, social profiles, or anywhere you cannot add a script.

The page is the form you built, not a generic one. It draws the layout you picked, in the form's theme, with your fields in your order, and it carries your Form Title, your Button Text, and your Thank You Message. Change any of those in the editor and both the page and the embed follow. Every layout shows your logo and business name, and every one carries the consent and terms checkboxes.

Two of the six layouts read differently as a whole page, because both were drawn to sit inside a page of your own:

• Inline drops the card: your logo and name on one quiet line, then the fields on a plain background.
• Minimal is a single wrapping row of pill-shaped fields with the button at the end, centered in the page. It is the one layout that shows no Form Title, because a single row has nowhere to put a heading. Your button text and thank-you message still show.

Both still ask for every field you configured. Only the shape changes.

Keep the whole link. The standalone URL ends in ?form= and your URL name, and that is the part that ties the page to your form. The same address without it, 369.dev/ws/WORKSPACE_ID/contact, is not your form: it shows a standard card asking for name, email, phone, and message, with none of your fields, layout, or copy. Share the link exactly as you copied it.

Track where a lead came from

A hidden field is a field the visitor never sees. Its value comes from the address of the page they are on, so a link tagged ?ref=partner42 or ?utm_source=google records where the lead came from without anyone typing anything.

1. In the form editor, under Form Fields, choose Add hidden field.
2. Enter the URL parameter to read, such as ref. Use letters, digits, underscores, and hyphens, up to 40 characters. A parameter can be used only once per form, whatever its capitalization, and the address is read exactly as you typed it, so a field set to ref does not pick up ?Ref=.
3. Add a Label to name the value on the request. Leave it blank to use the parameter name.
4. Add a Default value to record when someone arrives with no tag at all, for example direct. Leave it empty to record nothing.
5. Choose Save.

Add UTM fields adds utm_source, utm_medium, utm_campaign, utm_term, and utm_content in one step, skipping any the form already has. A form holds up to 20 hidden fields; the counter under the buttons shows how many are used.

Hidden fields sit in the field list with the rest, tagged Hidden · ?ref. Tap one to edit it, drag to reorder, delete it like any other field. They carry no Required badge and no eye, because nobody ever sees them, and switching the form template keeps them.

Where the values come from

When the form loads it takes each hidden field's value from that parameter in the current page address. If the parameter is not in the address, the form uses what it remembered earlier in the same visit: tags it has already seen are kept in the visitor's browser for the rest of the browsing session. So someone who lands on example.com/?utm_source=google, reads two more pages, and then reaches your contact form still submits utm_source=google. A tag in the current address always wins over a remembered one. Closing the tab forgets everything; nothing is kept between visits.

Tags are only remembered on pages where a form snippet loads. The form script is what does the remembering, so a page without the snippet on it passes through unrecorded. If the snippet sits only on your contact page, you capture only the tags on links that point straight at that page; a visitor who lands on a tagged homepage and then clicks through arrives with nothing.

The popup and your-own-button snippets are the answer to that. Both read and remember the tags as soon as the page loads, whether or not the visitor ever opens the form, and neither one puts a form in the middle of a page that has no room for one — the popup adds a floating button, and your-own-button mode shows nothing at all. Put one of them in your site-wide template or footer and every page a visitor lands on is recorded. An inline form on your contact page alone cannot see the tag from your homepage; a popup or your-own-button snippet loaded site-wide can. Tags never travel between different websites, and the standalone page on 369.dev remembers separately from your own site.

One consequence worth knowing: the tags are held in the visitor's browser under your own domain, so other scripts on your site, such as analytics or a chat widget, can read them. Those scripts can already read the address bar; the difference is that a remembered tag stays readable after the visitor has left the tagged page. Keep hidden fields to campaign and referral tags, and do not put personal details into the links you hand out.

Tag a link to the form's own page

The hosted form reads tags the same way, so you can capture attribution with no website at all. Add the parameters to the standalone URL:

https://369.dev/ws/WORKSPACE_ID/contact?form=quote-request&ref=partner42&utm_source=newsletter

Give each partner, ad, or email signature its own link, and every submission arrives labeled.

Where the values end up

Captured values arrive on the request in a Tracking card, beside the Form answers card that lists what the visitor typed. Converting the request to a client copies the tracking values onto the client, so the attribution stays with them. See Requests and intake forms.

Another system can send the same values with the lead instead of a visitor's browser; see Automate new-request handling.

What the visitor experiences

The form shows your fields in order, the consent checkbox or checkboxes, and the terms acceptance. After submitting, the visitor sees your thank-you message. If the Default Workflow has an auto-reply turned on, they also receive it by text or email. Submissions are limited to a few per hour from the same connection to keep spam out.

Verify the form

1. Open the standalone URL and submit a test request with your own details. If the form has hidden fields, append a test tag first, such as &ref=test.
2. Check that it appears in Requests as New under the right form filter, with the consent record you gave and your test tag in the Tracking card.
3. Archive the test request afterwards.

Good to know

• Renaming the URL name breaks every embed and link that already uses the old one. Update your site when you rename.
• A page carrying the contact form in popup mode and a booking page in popup mode shows two floating buttons stacked in the same bottom-right corner. Put one of the two behind a button of your own to keep the corner clear.
• The floating button only appears once the form itself has loaded. If it never appears, check that the URL name in data-form still matches the form.
• A form stays reachable at its address as long as it exists. To stop taking submissions, remove the embed from your site.
• The first time you open Contact form settings, the previous single contact form is migrated into a form named "Contact Form".
• A captured value is stored as plain text and trimmed to 200 characters. Nothing a visitor sends can create a field you have not configured.
• Each request keeps the label a hidden field had when the submission arrived, so renaming or deleting a hidden field never changes what an older request shows.