The form builder

The builder is where a form's fields are laid out. It is the same surface for a form and for one of your own templates (see templates).

The three areas

On a desktop (≥768px) the builder is three columns: the field palette on the left (every field type, grouped Standard / Advanced / Pricing), the canvas in the middle (the fields in the order a buyer sees them), and the block settings panel on the right, which edits whichever block is selected.

Adding a field

Drag a palette item onto the canvas, or tap it — tapping appends the field to the end. On a phone the palette lives behind the Add tab; adding a field returns you to the canvas with the new block highlighted, so you can add several fields in a row without leaving the canvas.

Editing a block's settings

Every block has settings: its label/text, description, placeholder, CSS class, inline style, whether it is required, its validation message, and — for the field types that need one — a choices editor, a product picker or a conditional-logic rule. Which settings appear depends on the field type.

On a desktop, tap a block on the canvas and its settings appear in the right-hand panel.
On a phone, tap a block on the canvas and the settings panel replaces the canvas. The row at the top of the panel — ← Canvas next to the block's type — returns you to the canvas. The block stays highlighted after you close the panel, so you can see where you were, and tapping it again reopens its settings.
The mobile tab bar has two tabs, Add and Canvas. There is no separate settings tab: editing a block is a tap on the block itself.

What each setting does

Every one of these reaches the published form. Where a setting appears depends on the field type, and each one shows up like this:

Label / text — the field's own label. The text block is a single-line answer field: its label is the text you type, and it is the palette's only short-answer field.
Description — helper text printed under the field, on every block type.
Placeholder — the grey hint inside the field, for text, note, number, email, phone, address, website, captcha, list and repeater fields. A date or time field has no placeholder: the picker prints its own format hint instead.
Max length — how many characters a text or note field accepts.
Default value — the value a text, note, quantity or hidden field starts with.
CSS class — your own class name on the field's control (on the block's own element for text, section, HTML, image and divider blocks), so a custom CSS rule can target it.
Inline style — safe CSS only (under Advanced; no background images or external URLs).
Required message — the words a buyer reads when a required field is left empty, in place of the browser's own wording.
Validation pattern — a regular expression the buyer's answer must match, for text, email, phone and website fields. Browsers ignore a pattern on a number or note field, so it is not offered there.
Format — on a date or time block: whether the buyer gets a date picker, a date-and-time picker or a time picker.
Choices, the product picker and conditional logic — as before: a dropdown, radio, image-choice, option or shipping block edits its own list of choices, a product block picks the product it sells, and a rule shows or hides a field depending on an earlier answer. On an option or shipping block each choice carries its own price, and that price is exactly what the buyer is charged for the choice they pick — so a choice left without a price blocks the save instead of quietly costing nothing (enter 0 for a free choice).

When a text block holds a sentence

A text block is a short-answer field, so whatever you put in its label becomes the label of an empty input on the published form. Forms built under an older version of JomForm stored their introduction sentence in that block, which is how a live page ended up reading "Register for our event — cuma rsvp ja" above an empty box instead of showing it as an introduction.

The builder now warns you where the block is edited: when a text block's label reads like a sentence, a notice appears under the label and offers one action, Treat as intro line. It turns the block into an introduction (a section, in the palette) and keeps the block's id and its text exactly as you wrote them, so the sentence is displayed above the fields rather than used as a label. Nothing is changed on its own — short labels such as Abc or Nama anda never trigger the notice, and it is only ever your click that converts a block.

Changed your mind? The same panel then offers Undo — make it a field again, which restores the exact block you had: the same id, the same text and the same settings. The undo is offered for the block you just converted, in the session you converted it; once the change is saved and the page reloaded, the introduction is simply the block you chose and can be edited like any other.

When a rule's field no longer exists

A conditional rule names the field it watches by that field's internal id. Some older versions of the builder gave every block a new id each time a form was opened, so a form saved by one of them can still carry a rule that names an id no block has any more. The rule picker used to show such a block as if it had no rule at all — the opposite of what buyers got: the server still evaluated the rule, it never matched, and the block stayed hidden on the live page with every answer to it silently thrown away.

The builder now shows it instead. The block's card on the canvas carries a "rule broken" label, and its settings panel lists the unknown id as Not available with a notice saying the rule never matches and that answers to the field are discarded. Nothing is changed on your behalf: pick the field the rule should watch, or choose Always show to remove the rule. Opening a form and publishing it does not rewrite a rule you have not edited — the broken rule is saved as it was, so you can decide what it should do.

The same label appears on a rule that came from a template. A template stores its blocks and their rules exactly as it was saved, so a template written by an older version can bring a rule naming a field the new form does not have — the notice is there for you to point it at a real field, or to clear it.

What a website field accepts

A website block is the browser's own URL input, so it accepts any absolute URL — https://…, ftp://…, mailto:… — and refuses what is not a URL at all, such as yourname.com with no scheme. JomForm applies the same rule again when the form is submitted, so the buyer is not told one thing by the page and another by the server when they press send — with two narrow exceptions, both in the strict direction, where the server refuses a value the page accepted:

A script-bearing scheme — javascript:, a data: URI or vbscript: — is refused even though the browser accepts the string, because the answer is stored and read back later.
A network URL broken in shape — a missing second slash (http:/example.com) or a space in the host (http://exa mple.com) — is refused even though the browser's lenient parser accepts the string. The server reads the first as an address with no host and cannot parse the second at all, so it answers with a corrective message instead of storing a link it cannot vouch for.

Apart from those two, what the page accepts is what the server accepts — ftp://, ws://, tel:, mailto: and file: values are stored exactly as typed. A custom-HTML response form's field registered as type:"url" follows exactly the same rule.

Reordering, duplicating, removing

Each block card carries ↑ and ↓ to move it one position (the arrows are disabled at the ends of the list) and a ⋯ button whose menu holds Duplicate and Remove. You can also drag a block by its card to drop it anywhere on the canvas. None of these controls opens the settings panel — they stop the tap from reaching the card, so arranging a form never swaps you into an editor by accident.

The canvas preview is drawn, not interactive

The canvas shows what a block looks like, so that you can arrange the form without being able to type into it: checkboxes and radio choices are drawn as flat grey marks, the product quantity is a fixed “1”, and the totals are placeholders. They are deliberately not tappable — the real controls belong to the buyer on the published form. An image block with no image yet shows a caption naming the setting to fill in; set the URL (or upload a file) in that block's settings.

Form mode and everything else

The panel also carries the form-level mode: payment (the default — the form takes payment and its entries are sales) or response (no products, no payment; its entries are stored as responses). Everything else about a form — status, confirmation, restrictions, notifications, the per-form CHIP feed and the restaurant menu — lives in Form Settings, not the builder.