Example Twig code for all default Craft CMS field types.
- Probably necessary
- Improved usability
The input fields below are only examples. As long as
you are submitting valid data, alternative input types and
custom css or js may work better for your situation.
General Fields
|
Single-Tag
|
Loop |
Conditional
|
Front-end
Input
|
Requires CSS
|
Requires JS
|
| Plain Text |
{{ entry.plainTextField }}
|
{# Basic Plain Text Field #}
<input type="text" name="fields[fieldHandle]" value="lorem">
{# Multi-line Plain Text Field #}
<textarea name="fields[fieldHandle]">Lorem ipsum</textarea>
|
|
|
| Rich Text |
{{ entry.richTextField }}
|
<textarea name="fields[fieldHandle]">Lorem ipsum</textarea>
|
|
|
| Color |
{{ entry.colorField }}
|
<input type="color" name="fields[fieldHandle]" value="#da5a47">
|
|
|
| Number |
{{ entry.numberField }}
|
<input type="text" size="5" name="fields[fieldHandle]" value="42">
|
|
|
| Date |
{{ entry.dateField|date('M j, Y') }}
|
<input type="text" size="10" name="fields[fieldHandle][date]" value="10/15/2012">
<input type="text" size="10" name="fields[fieldHandle][time]" value="6:12 PM">
|
|
|
| Lightswitch |
{{ user.lightswitchField }}
|
<input type="hidden" name="fields[fieldHandle]" value="1">
|
|
|
Single Choice Fields
|
Single-Tag
|
Loop |
Conditional
|
Front-end
Input
|
Requires CSS
|
Requires JS
|
| Dropdown |
{{ entry.dropdownField }}
|
{% for option in entry.dropdownField.options %}
{{ option }}
{% endfor %}
|
{% if option.selected %}
...
{% endif %}
|
<select name="fields[fieldHandle]">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
|
|
|
| Radio Buttons |
{{ entry.radioField }}
|
{% for option in entry.radioField.options %}
{{ option }}
{% endfor %}
|
{% if option.selected %}
...
{% endif %}
|
<label><input type="radio" value="One" name="fields[fieldHandle]">One</label>
<label><input type="radio" value="Two" name="fields[fieldHandle]">Two</label>
<label><input type="radio" value="Three" name="fields[fieldHandle]">Three</label>
|
|
|
| Position Select |
{{ entry.positionSelectFieldHandle }}
|
|
{% switch entry.positionSelectFieldHandle %}
{% case 'left' %}
...
{% case 'right' %}
...
{% case 'center' %}
...
{% endswitch %}
|
<select name="fields[fieldHandle]">
<option value="left">Left</option>
<option value="right">Right</option>
<option value="center">Center</option>
</select>
|
|
|
Multiple Choice Fields
|
Single-Tag
|
Loop |
Conditional
|
Front-end
Input
|
Requires CSS
|
Requires JS
|
| Checkboxes |
|
{% for option in entry.checkboxField %}
{{ option }}
{% endfor %}
{% for option in entry.checkboxField.options %}
{{ option }}
{% endfor %}
|
{% if option.selected %}
...
{% endif %}
|
<input type="hidden" name="fields[fieldHandle]" value="">
<input type="checkbox" value="One" name="fields[fieldHandle][]"><label>One</label>
<input type="checkbox" value="two" name="fields[fieldHandle][]"><label>Two</label>
<input type="checkbox" value="Three" name="fields[fieldHandle][]"><label>Three</label>
|
|
|
| Muti-select |
|
{% for option in entry.multiselectField %}
{{ option }}
{% endfor %}
{% for option in entry.multiselectField.options %}
{{ option }}
{% endfor %}
|
{% if option.selected %}
...
{% endif %}
|
<select multiple name="fields[fieldHandle][]">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
|
|
|
Relations
|
Single-Tag
|
Loop |
Conditional
|
Front-end
Input
|
Requires CSS
|
Requires JS
|
| Assets |
|
{% for asset in entry.assetsField %}
{{ asset.url }}
{% endfor %}
|
{% if entry.assetsField|length %}
...
{% endif %}
|
<select multiple name="fields[fieldHandle][]">
<option value="13">Filename One</option>
<option value="42">Filename Two</option>
<option value="144">Filename Three</option>
</select>
|
|
|
| Categories (Single-Level) |
|
{% for category in entry.categoriesField %}
{{ entry.title }}
{% endfor %}
|
{% if entry.categoriesField|length %}
...
{% endif %}
|
<select multiple name="fields[fieldHandle][]">
<option value="13">Category Name One</option>
<option value="42">Category Name Two</option>
<option value="144">Category Name Three</option>
</select>
|
|
|
| Entries |
|
{% for entry in entry.entriesField %}
{{ entry.title }}
{% endfor %}
|
{% if entry.entriesField|length %}
...
{% endif %}
|
<select multiple name="fields[fieldHandle][]">
<option value="13">Entry Title One</option>
<option value="42">Entry Title Two</option>
<option value="144">Entry Title Three</option>
</select>
|
|
|
| Tags |
|
{% for tag in entry.tagsField %}
{{ tag.name }}
{% endfor %}
|
{% if entry.tagsField|length %}
...
{% endif %}
|
<select multiple name="fields[fieldHandle][]">
<option value="13">Tag Name One</option>
<option value="42">Tag Name Two</option>
<option value="144">Tag Name Three</option>
</select>
|
|
|
| Users |
|
{% for user in entry.usersField %}
{{ user.firstName }} {{ user.lastName }}
{% endfor %}
|
{% if entry.usersField|length %}
...
{% endif %}
|
<select multiple name="fields[fieldHandle][]">
<option value="13">Username One</option>
<option value="42">Username Two</option>
<option value="144">Username Three</option>
</select>
|
|
|
Structured Relations
|
Single-Tag
|
Loop |
Conditional
|
Front-end
Input
|
Requires CSS
|
Requires JS
|
| Categories (Multi-Level) |
|
<ul>
{% nav category in entry.categoriesField %}
<li>
{{ category.title }}
{% ifchildren %}
<ul>
{% children %}
</ul>
{% endifchildren %}
</li>
{% endnav %}
</ul>
|
{% if entry.categoriesField|length %}
...
{% endif %}
|
<select multiple name="fields[fieldHandle][]">
<option value="13">Category Name One</option>
<option value="42">Category Name Two</option>
<option value="144">Category Name Three</option>
</select>
|
|
|
| Entries (Structures) |
|
<ul>
{% nav entry in entry.entriesField %}
<li>
{{ entry.title }}
{% ifchildren %}
<ul>
{% children %}
</ul>
{% endifchildren %}
</li>
{% endnav %}
</ul>
|
{% if entry.entriesField|length %}
...
{% endif %}
|
<select multiple name="fields[fieldHandle][]">
<option value="13">Entry Title One</option>
<option value="42">Entry Title Two</option>
<option value="144">Entry Title Three</option>
</select>
|
|
|
Rows and Columns
|
Single-Tag
|
Loop |
Conditional
|
Front-end
Input
|
Requires CSS
|
Requires JS
|
| Table |
|
<table>
{% for row in entry.tableField %}
<tr>
<td>{{ row.fieldOne }}</td>
<td>{{ row.fieldTwo }}</td>
</tr>
{% endfor %}
</table>
|
{% if entry.tableField|length %}
...
{% endif %}
|
<input type="hidden" name="fields[fieldHandle]" value="">
<textarea name="fields[fieldHandle][0][col1]" rows="1"></textarea>
<textarea name="fields[fieldHandle][0][col2]" rows="1"></textarea>
<textarea name="fields[fieldHandle][0][col3]" rows="1"></textarea>
<input type="hidden" name="fields[fieldHandle][0][col4]">
<input type="checkbox" name="fields[fieldHandle][0][col4]" value="1">
<textarea name="fields[fieldHandle][1][col1]" rows="1"></textarea>
<textarea name="fields[fieldHandle][1][col2]" rows="1"></textarea>
<textarea name="fields[fieldHandle][1][col3]" rows="1"></textarea>
<input type="hidden" name="fields[fieldHandle][1][col4]">
<input type="checkbox" name="fields[fieldHandle][1][col4]" value="1">
|
|
|
| Matrix |
|
{% for block in entry.matrixField %}
...
{% endfor %}
|
{% if entry.matrixField|length %}
...
{% endif %}
{% if block.type == "heading" %}
<h3>{{ block.heading }}</h3>
{% else %}
{{ block.body }}
{% endif %}
|
{# You need to include the 'type' input to identify the matrix block type you are submitting #}
<input type="hidden" name="fields[fieldHandle][new1][type]" value="contacts">
{# All of your custom fields must be within a 'fields' array. #}
<input type="text" name="fields[fieldHandle][new1][fields][field1Handle]">
<input type="text" name="fields[fieldHandle][new1][fields][field2Handle]" >
<input type="text" name="fields[fieldHandle][new1][fields][field3Handle]" >
{# For New Entries, you'll want to use the naming convention
'new1', 'new2', 'new3' for each of your blocks. For existing entries you
can update those values to be the block IDs #}
<input type="text" name="fields[fieldHandle][new2][fields][field1Handle]">
<input type="text" name="fields[fieldHandle][new2][fields][field2Handle]" >
<input type="text" name="fields[fieldHandle][new2][fields][field3Handle]" >
|
|
|