In the previous lesson we learnt how to control the colour of our text with a colour picker. If you have specific brand colours you want to choose from then this can be achieved with a colour dropdown.
Here is the previous colour field we set up.
<field type="colour" name="text_colour" label="Text Colour"></field>
As you can see the closing field tag comes directly after the opening one. To make this a dropdown of choices you need to include choice tags inside the field tag. These will give you the different options in the dropdown in the editor. They must have a value attribute and a label attribute is optional but recommended.
Change your colour field to the below, with the choice tags in the field. Feel free to use your own brand colours, you can include as many choices as you need!
<field type="colour" name="text_colour" label="Text Colour"> <choice value="#ff0000" label="Red"/> <choice value="#F7FF00" label="Yellow"/> <choice value="#04FF00" label="Green"/> <choice value="#003AFF" label="Blue"/> </field>
This means, instead of having a colour picker to choose any hex code for the text colour, the person creating the email will be able to choose from the specific colours that you have defined.
You also won't need to do anything where the field is referenced in the replace-style attribute. It is still linked to the same field, it's just the type of field that has changed.
Here we used type="colour" to give a dropdown of colours to pick from. Dropdowns can be used with any part of your HTML if you want to give predefined choices. For example, a dropdown of font sizes, fonts or even images. The main difference is that for colour dropdowns you use type="colour" and for other dropdowns you use type="dropdown".
Let's upload this Email Design with our new colour dropdown and see how it behaves now. Here's a video showing how they work in Taxi if you don't have access to an account.
