This guide walks every feature of the AI Form Builder in detail. If you haven't already, start with the Overview and Quick Start. If you are running into issues using a form, check Tips and Troubleshooting.

To access the form builder, click your avatar (top-right corner, with your initials) → AI Form Builder. From there choose Start from scratch and press Build with AI.

The Form Builder Assistant (AI chat)

The assistant is a guided chat. The assistant will walk you through the required information it needs to build your custom form. 

1. Define Input Fields. Tell the assistant each field's name/label and type. An email address field and at least one file attachment input are required on every form.
2. Validation Requirements. The assistant lists every field and asks which are required, plus any format constraints (email, phone mask, date mask, etc.).
3. Generate the Form. Confirm and the assistant produces the form. Progress is shown while the agent builds the HTML for you (usually under a minute).

When defining your input fields, you can describe any of the following in natural language:

• Text input (single-line)
• Textarea (multi-line)
• Email — automatically validated as email format
• Number / phone — with optional input mask (e.g., XXX-XXX-XXXX)
• Date — with format enforcement (e.g., MM/DD/YYYY)
• Dropdown (select) — provide the option list
• Radio button group — provide the option list
• Checkboxes - provide what you want the checkbox to indicate 
• File attachment — uses the SendSafely Dropzone uploader

Once the assistant finishes, four buttons appear below its reply:

Button	Action
Save Form	Persists the form as a draft. The chat is replaced by the Form Details panel.
Preview Form	Opens the form in a new tab with a "not LIVE" banner overlay.
Keep Editing	Returns to chat — ask for changes.
Discard Form	Throws the form away.

The assistant will also embeds a Click here to view a live preview of the form link, equivalent to Preview Form.

Tip: Always do a test submission of the first preview before you save the form. Before you spend time tweaking copy or styling, fill out the form, attach a file, and submit. Verify that a package gets created on your Dropzone, that the success dialog appears with a submission ID, and that you can open the secure message and see every field's name/value pair. This catches misconfigured field types or validation rules early — when they're trivial to fix via chat.

After the initial preview is generated, you can continue editing the form and ask the assistant to:

• Add, remove, or modify fields
• Change validation requirements
• Update labels or styling
• Adjust layout
• Modify the success/confirmation message
• Change colors or visual design

Examples:

• "Add a Phone Number field after Email Address. Make it required and use US format validation (XXX-XXX-XXXX)."
• "Change the dropdown label from 'Reason' to 'Issue Category' and add a new option called 'Billing Question'."
• "Make the form title 'Help Desk Intake' and change the submit button color to dark blue."

Note on File Type Restrictions: The file type restrictions configured in your Dropzone will be applied to uploads made through any custom form. The Form Builder constructs HTML and Javascript but does not apply file type restrictions. These must be configured in your Dropzone settings and will be applied to all related custom web forms. 

The Form Details Panel

After Save Form, the chat is replaced by the Form Details panel.

Field	Description
Name	Display name. Click the pencil to rename inline; click the floppy disk to save. Also shown in the My Forms sidebar.
URL	Public URL of the form. Click the pencil to customize the slug after /forms/ — e.g., change the auto-generated UUID to something memorable like helpdesk or kyc-demo.
Status	Toggle: Draft or Live. External users only see the form when it's Live.
View Form	Opens the form in a new tab.
Copy Form	Duplicates the form and opens the assistant on the copy for further editing. The copy is unsaved until you click Save Form.
Delete Form	Permanently removes the form.

New forms are auto-named New Form, New Form 2, New Form 3, etc. Rename them right after saving so the sidebar is readable.

While the form's Status is Draft, a banner appears at the top of the page:

NOTE: This form will not be available to external users until you save and set the status to LIVE.

Flip Status to Live in Form Details to remove the banner and expose the form publicly.

URL Paths and the Package Label

Every Custom Form supports an optional path info segment after the slug:

https://<your-tenant>/forms/<slug>/<path-info>

That <path-info> value is used to pre-fill the packageLabel on the resulting SendSafely package. If no path info is supplied, the form's display name is used as the package label instead.

This matters in two scenarios:

1. Reference numbers in package labels. If you send people to https://<tenant>/forms/helpdesk/INC-48211, the submitted package shows INC-48211 in the label instead of Help Desk Intake. Useful for case-tracking and search.
2. Dropzone connectors. Every form invokes your Dropzone connectors after the package is finalized. Connectors that key off packageLabel (e.g., to attach the submission to a Zendesk / ServiceCloud ticket) will see the path-info value you supplied. So if your connector reads case numbers from packageLabel, embed them in the URL.

You don't need to configure anything for this — it's the default behavior of every form.

Example: https://acme.sendsafely.com/forms/wire-request/REQ-2026-0512 → submitted package label = REQ-2026-0512.

Reopening and Editing an Existing Form

Click any form in My Forms to open its Form Details panel.

To edit a saved form, click Copy Form. This opens the assistant pre-loaded with the form's current spec:

I've successfully loaded your Help Desk Intake form. This form collects: ... What would you like to change?

Make your edits, then click Save Form (or say "save the form").

Important: Copy Form creates a new form rather than editing the original in place. To replace the original entirely, save your edits as the new form, set its URL slug to the one you want, then delete the original. (You can reuse the original's slug only after the original is deleted.)

Advanced Styling and Branding

The default style applied to new forms uses the Bootstrap UI library with your tenant logo. The assistant can take you well beyond that with a single prompt.

What's available out of the box

• Bootstrap CSS for layout, inputs, buttons, and responsive behavior.
• Font Awesome for icons.
• Google Fonts — you can request any font from the Google Fonts library and the assistant will pull it in.

External CSS frameworks (Tailwind, Foundation, etc.) and arbitrary third-party stylesheets are not allowed. If you need a look outside of Bootstrap, ask the assistant to write custom CSS classes for you — it can produce inline <style> blocks that achieve almost any visual treatment you describe.

Describing the look you want

Treat the assistant like a designer who needs an art-direction brief. The more concrete you are about colors, surfaces, accents, and typography, the closer the first draft lands.

Example brief:

Dark-mode secure-portal aesthetic: indigo gradient background, slate card with rounded corners, emerald-green trust accents and focus states, small purple branding accents, uppercase letter-spaced section headers, translucent tinted alert boxes, and a highlighted inner sub-card for the most sensitive fields.

For more elaborate designs, provide a structured spec — global palette, header treatment, card surface, accent colors, padding/radius values, even pixel-level details. The assistant will follow detailed directives related to form styling and UI.

Custom logos

By default the form's header uses the logo from your tenant's settings. To override per-form, tell the assistant:

"Use this image for the logo instead of the default one: https://pnp.github.io/contoso/img/logo.png"

The URL must be publicly accessible from the visitor's browser.

Background images

You can also point the assistant at a hero/background image. We recommend darkening it so it doesn't compete with the form:

"Use https://pnp.github.io/contoso/img/beach-banner.jpg as the background image for the page. Set some black opacity on it so the image is darkened and not visually distracting from the rest of the form. 

NOTE: Many websites restrict hot-linking to their images. If a logo or background fails to render on the live form, open the page in a browser and check the JavaScript console — you'll usually see a CORS or blocked-resource error if the referenced site refuses to allow hot linking. You are solely responsible for making sure you have the rights to use any external images you reference.

Reproducing an Existing Form or Mockup

The assistant can't visit URLs or analyze screenshots / PDFs you reference. If you have an existing HTML form or a mockup you want to clone, use another AI tool to convert the source into a detailed prompt for our form-builder agent.

1. Upload the source (PDF, screenshot, paste of HTML, etc.) to a separate LLM — Claude, ChatGPT, etc.
2. Ask that LLM to convert the source into a detailed prompt for a custom web form builder agent.
3. Paste the resulting prompt into the SendSafely Form Builder Assistant.

Prompt to use with the external LLM:

"I have an AI form builder agent. I want the agent to reproduce the attached form exactly, however I want it to be done via a prompt without providing it the HTML. Can you create the prompt for me?"

This pattern works because the form-builder agent will follow very detailed prompts — it just can't see anything outside the chat itself. 

For more best practices, common pitfalls, troubleshooting, and the glossary, see Tips and Troubleshooting.