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.

Checkbox

<field type="checkbox" name="" label="" default="false"></field>

These are mostly used with rule attributes, which we will discuss later. They have a value of true or false, and default to true (you can change this by setting default="false")

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