Advanced tips and tricks

A grab bag of lesser-known, genuinely useful form options. Most of these are not in the visual builder's properties panel: you set them in the Code Builder, where each component is a tag you can add props to.

Open the Code Builder

Several of the tricks below are props that the drag-and-drop builder does not expose. To reach them, open the Code Builder: in the form editor, click the ⋮ (more actions) menu in the top bar and choose Code Builder, or press ⌥ ⇧ C.

The Code Builder shows your form as a set of tags, one per component. Each field has an id and a label; you add the props below right alongside them.

<Input id="teacherName" label="Teacher Name" columns={6} />

Give a field a default value

Add initialValue to start a field with a value already filled in. The submitter can still change it (as long as the field is editable).

<Input id="grade" label="Grade level" initialValue="Not specified" />

Pre-select a choice

For a Dropdown or Checkboxes field, pass the value(s) as an array: initialValue={["General Supplies"]}.

Start a True/False checked

On a True/False field (<Boolean> in code), add initialValue on its own, with no value, to start it checked. Leave it off to start unchecked.

<Boolean id="agreeToTerms" label="I agree to the terms" initialValue />

Clear a field when it gets hidden

By default, when a Show/Hide rule hides a field, whatever the user already typed in it is kept and still submitted. That is often not what you want: a follow-up answer that no longer applies should go away with the field.

Add the clear prop so the field's value resets the moment it is hidden:

<Textarea id="techJustification" label="Technology justification" clear />

Now if the field shows only when "Tech Equipment" is selected, switching to a different option both hides the field and wipes its answer, so no stale data is left behind.

Show another field's value inside text

Wrap a field's id in double hashes to drop its live value into a label, a Text block, a hint, or an email. The value updates as the user types.

<Text id="greeting">Thanks, ##submittedByName##, your request is almost done.</Text>

This is handy for personalized confirmations, dynamic section headings, and labeling repeated fields (for example, an upload labeled with the row it belongs to). The same ##fieldId## syntax works in workflow notification subjects and bodies.

Right-align numbers in a table

The align prop on a table column only takes effect on calculated columns, the ones that have a formula or a fixed values list. On a plain free-entry column it is ignored, so leave it off there. Right-aligning a money or total column keeps the decimals lined up.

<TableColumn id="lineTotal" label="Total" formula="qty * price" align="right" />

Where to go next

Several nuances are big enough to have their own guide:

• Prefill form fields with URL parameters › open a form with fields already filled, or pass hidden tracking data.
• Use Show/Hide field rules › show or hide fields based on other answers (pairs with clear).
• Formulas and computed fields › calculate values from other fields.
• Use Validation rules › require or constrain what people can enter.