Input field settings

In the Input Fields view, every input field has settings. With Title, Description and Variable name you decide how users understand the input field in the design generator and how you use its value in expressions. Create an input field: let users change a text or image shows how to create one.

You open the settings with the gear on the right of the input field. At the top are Variable name, Title and Description (tooltip with more information), below them the settings of the field type. Done closes them.

Title

The Title tells users what the input field is for, like "Headline" or "Logo". They see it above the input field in the design generator.

• You change the title in the settings under Title. It's faster at the top of the input field: click the title and type a new one.
• When you create an input field for an element, it gets a default title that depends on the field type: Edit Text, Select Text, Pick Color, Select Color, Upload Image, Select Image, Upload Logo, Select Value or Toggle. A new input field group is called New Group field.
• Instruction input fields, collections and input fields you add with Add field start without a title. If the title is empty, the design generator shows nothing above the input field.
• The preview on the right of the Input Fields view only shows the design, not the form. So test the title in the design generator.

Description

The Description is a help note for the input field. The title names the input field, the description adds a tip, like "Use your landscape logo". You enter it in the settings under Description (tooltip with more information).

• In the design generator, users see a question mark next to the title. When they hover over it, the description appears as a tooltip.
  
• The question mark only appears if the input field has a title and a description. For an input field group it appears even without a title. If you leave the description empty, no question mark appears.
• In an instruction input field, the description doesn't appear as a tooltip but as a smaller line of text below the instruction.
• In the Input Fields view, a question mark on the right of the input field shows that it has a description.

Variable name

Every input field except an input field group and an instruction input field saves its value in a variable. You use the variable name to work with that value in expressions. If the variable is called headline, you simply write headline in an expression. Variables explains how this works.

The variable name is at the very top of the settings, under Variable name. Bluepic builds the default name from the field type or the element, for example text2_text or rectangle2_color. Most of the time it's fine. Rename it if you want a name that is easier to remember in expressions, or to keep your variables tidy.

To change the variable name:

1. Click the pencil to the right of the variable name.
2. Type the new name.
3. Click the checkmark to save it, or × to cancel. Expressions and connected input fields take over the new name automatically.

These rules apply to the name:

• It must be unique in the template. It also can't be the same as an element ID, a function name or canvas.
• Allowed are letters, digits, _ and $. No spaces, and no digit at the start.
• Words that JavaScript reserves for itself, like class, are not allowed.
• Inside a collection, the name only needs to be unique within that collection.

If the name is invalid or already taken, it turns red and you can't click the checkmark.

The copy button next to the pencil copies the name to the clipboard. The message "Variable name copied to clipboard" appears.