Placement

The <field> tag can be used anywhere inside the document, not just inside editable. The position of a field in the document hierarchy affects:

  • Where it gets rendered in the editor
  • How it is referenced in the template

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.

Types of Field

There are different types of field to allow different kinds of input. The type of field is specified with the type= attribute.

Align

<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.

Dropdown field (single value)

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 at template upload.

<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.

Dropdown field (multi value)

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.

Checkbox

<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".

Code

<field type="code" name="" label=""></field>

This is used for entering HTML, CSS or email platform specific code.

Color/colour

<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).

Hidden

<field type="hidden" name="" label=""></field>

Hidden fields are useful to add values that are referenced by Taxi Syntax, but are not editable themselves.

Href

<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.

Number

<field type="number" name="" label=""></field>

Using type=number will load the HTML5 number input field.

Rich

<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.

Src

<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.

Subject

<field type="subject" name="" label=""></field>

Taxi will automatically add a field for the subject line, but sometimes you may wish to add more than one field, or move the subject line field to another module. 

Text

<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.

Text-field (default)

<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 template