How can I populate a dropdown via Globals?

Question

I have a registration form that has a dropdown that allows the user to choose a color. This form input will be the same across all pages that allow a user to register.

So, I thought using a Global to populate that dropdown would make sense as the client could manage the color choices. In essence, this is what I'm trying to do:

{% if colorOptions.color | length %}
    <div class="form-group">
        <label for="colorOption">Color Option</label>
        <select id="colorOption" class="form-control">
            <option value=""> Select</option>
            {% for option in colorOptions.color %}
                <option value="{{ option }}">{{ option }}</option>
            {% endfor %}
        </select>
    </div>
{% endif %}

But I'm struggling with what kind of field type color needs/should/could be within the colorOptions group.

Answer 1

You could always just use a Table field, you could then just add a colour to each row, this allows you to give a descriptive name to each colour but also keep the value as the hex or whatever format your colours are in...

Then its easy to loop like:

{% for option in colorOptions.color %}
   <option value="{{ option.value }}">{{ option.name }}</option>
{% endfor %}

Of course you dont have to have two columns, you could just have the one and loop over the HEX values or whatever, it's totally up to you and how you want to do it. But personally I think the table field is a solid way to go!