The <field> tag can be used anywhere inside the document, not just inside editable. The position of a field in the document hierarchy affects:
Document fields are those outside of any modules or modulezones. They get gathered together at the top of the editor and should be used for things which affect the whole document. A brand colour which is used in lots of places throughout the email would be a good fit here, or a code which is appended to lots of links. The subject line is a document level field.
Similarly fields which are in modulezone but outside of any modules inside the modulezone get gathered together at the top of the modulezone editor and module fields get shown at the top of the module, before any editables.
In certain circumstances you may wish to nest a field inside another field. An example is if you want to hide some fields that don't have any relevance if a checkbox is turned to off.
In this example, the field for the image upload will only be shown in the editor if the checkbox is set to True :
<field type="checkbox" name="showimage" label="Show Image?" default="false"> <field type="src" name="" label=""></field> </field>
This behaviour is typically linked to using rules to show or hide HTML.
You can nest fields inside a field of any type, including dropdowns.
There are different types of field to allow different kinds of input. The type of field is specified with the type= attribute.
<field type="align" name="" label="" default="left"></field>
The align field returns either left, center, or right, and can be used to control the position of text and imagery.
<field type="valign" name="" label="" default="middle"></field>
The valign field returns either top, middle, or bottom, and can be used to control the position of any element of a module, such as image, text or a CTA.
Dropdown fields allow you to set specific choices for the editor, with an option to add a custom value if required. Allow-custom is optional.
<field name="lunch" type="dropdown" allow-custom="true"> <choice label="Sausages" value="sausage"></choice> <choice label="Crisps" value="crips"></choice> <choice label="Egg & chips" value="egg_and_chips"></choice> </field>
If the values used are image paths then src-value can be used instead - this will let Taxi know that the value is an image source and thus Taxi will include it in the list of images when you upload your Email Design.
<field name="lunch_image" type="dropdown" allow-custom="true"> <choice label="Sausages" src-value="sausage.png"></choice> <choice label="Crisps" src-value="crips.png"></choice> <choice label="Egg & chips" src-value="egg_and_chips.png"></choice> </field>
The value of {{lunch_image}} will be a path the relevant image. This field will then follow the behaviour of type= src , so users can choose where their images are hosted on export.
Multiple value dropdown fields allow you to set more than one variable from one selection of the dropdown box.
Note, here names is used instead of name and the multiple values are given for each option.
<field names="lunch dinner image" type="dropdown" default-lunch="sausage"> <choice label="Sausages" lunch="sausage" dinner="more_sausage" image-src="sausage.png"></choice> <choice label="Crisps" lunch="crips" dinner="more_crips" image-src="crips.png"></choice> <choice label="Egg & chips" lunch="egg_and_chips" dinner="more_eggs" image-src="eggandchips.png"></choice> </field>
Only one default value is needed to identify the choice.
In this example values for references to {{lunch}} will be set to sausage', crisps' or egg_and_chips' depending on the position of the dropdown. Similarly {{dinner}} is set to either more_sausage', more_crips' or more_eggs'.
The values for {{image}} have been set as src-values, meaning that the images referenced can be managed by Taxi. The value of {{image}} will be a path the relevant image.
With a multi value dropdown it is not possible to have custom values.
Music: https://www.bensound.com/royalty-free-music
<field type="checkbox" name="" label="" default="false"></field>
These are mostly used with rule attributes. They have a value of true or false, and default to true (you can change this by setting default="false"). If you nest other fields inside a checkbox field, they will only show in the editor once the checkbox is set to "true".
You can add additional control to checkbox fields by making sure only a specified number of them can be turned on at any one time. For example, if one checkbox is turned on then a second checkbox has to be turned off. You can achieve this using the ux-rule attribute and max-selected property (this property is required for a ux-rule). The value of max-selected defines how many checkboxes can be turned on at any one time.
<field name="a" type="checkbox" ux-rule="max-selected:1;" default="true"> </field> <field name="b" type="checkbox" ux-rule="max-selected:1;" default="false"> </field> <field name="c" type="checkbox"></field>
In this example, field 'a' and 'b' are grouped together and if one is turned on the other will be forced off. The defaults are set differently for both fields as you can only have one of them turned on at a time. Field 'c' is completely independent as it does not have the ux-rule attribute.
If you want more than one group of CTAs in a module you can add in the group property.
<field name="a" type="checkbox" ux-rule="max-selected:1;group:a;" default="true"></field>
<field name="b" type="checkbox" ux-rule="max-selected:1;group:a;" default="false"></field>
<field name="c" type="checkbox"></field>
<field name="d" type="checkbox" ux-rule="max-selected:1;group:b;" default="true"></field>
<field name="e" type="checkbox" ux-rule="max-selected:1;group:b;" default="false"></field>
Here, fields a and b are one group and d and e are a second group. Again, c is completely independent. If a is turned on then b will be forced off, and vice versa, but this will have no bearing on d and e. Similarly if d is turned on then e will be forced off, but this will have no bearing on a and b, as they are in separate groups.
The value of the group property can be any character.
If two or more checkboxes are grouped together, they must have the same max-selected value. For example, if field a is set to 1, field b must also be set to 1.
Any grouped checkboxes must be within the same scope. For example, if one checkbox is inside an editable, any checkboxes you want in the same group must also be inside this editable.
<field type="code" name="" label=""></field>
This is used for entering HTML, CSS or email platform specific code.
<field type="colour" name="" label=""></field>
Taxi will display a colour picker, or the user can input a hex colour if they have one to hand. Because Taxi was made in England, you can also specify colour with a u.
You can combine the colour field with <choice> tags, in order to specify a set of colours, rather than give users free choice. This is useful, for example, to lock colour options to just brand colours.
<field name="bgcolor" type="color" allow-custom="true"> <choice label="red" value="#ff0000"></choice> <choice label="green" value="#00ff00"></choice> <choice label="blue" value="#0000ff"></choice> <choice label="yellow" value="#ffff00"></choice> </field>
When specifying choices, you can also add the allow-custom= true attribute, which then allows users to pick from a set of colours, or pick their own (this defaults to false if not added).
<field type="hidden" name="" label=""></field>
Hidden fields are useful to add values that are referenced by Taxi Syntax, but are not editable themselves.
<field type="href" name="" label=""></field>
Using the href field for any link urls makes Taxi aware that the content should be a url. This then means that link tracking and URL checking can be used, as required.
<field type="number" name="" label=""></field>
Using type=number will load the HTML5 number input field.
<field type="rich" name="" label=""></field>
The rich text editor allows editors to format text as bold, italic, a link or add custom style. More details on the rich text editor, including the code required to specify custom styles.
<field type="src" name="" label=""></field>
The user is given a choice between uploading an image or specifying a URL. As well as the src attribute for image tags this can be used for css background properties or the poster element in html5 video tags.
Note that your organisation may have image uploads turned off, in which case you will only be able to specify an image url.
<field type="subject" name="" label=""></field>
Typically you will add this field outside of any modules or modulezones so it appears in document settings within the editor.
If you don't include any field for the subject line then Taxi will create one for you and it will appear in document settings in the editor.
<field type="text" name="" label=""></field>
This gives a multi line textarea field. Once selected, the text area will expand to the height of it's content.
<field type="text-field" name="" label=""></field>
This gives a single line text field. If any un-recognised value is given for the type attribute, this input will be used by default.
See how to apply field content to an area of your Email Design System