Craft CMS Field Guide

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

Front-end Input Requires CSS Requires JS
Plain Text
{# 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
<textarea name="fields[fieldHandle]">Lorem ipsum</textarea>
Color
<input type="color" name="fields[fieldHandle]" value="#da5a47">
Number
<input type="text" size="5" name="fields[fieldHandle]" value="42">
Date
<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
<input type="hidden" name="fields[fieldHandle]" value="1">

Single Choice Fields

Front-end Input Requires CSS Requires JS
Dropdown
<select name="fields[fieldHandle]">
  <option value="One">One</option>
  <option value="Two">Two</option>
  <option value="Three">Three</option>
</select>
Radio Buttons
<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
<select name="fields[fieldHandle]">
  <option value="left">Left</option>
  <option value="right">Right</option>
  <option value="center">Center</option>
</select>

Multiple Choice Fields

Front-end Input Requires CSS Requires JS
Checkboxes
<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
<select multiple name="fields[fieldHandle][]">
  <option value="One">One</option>
  <option value="Two">Two</option>
  <option value="Three">Three</option>
</select>

Relations

Front-end Input Requires CSS Requires JS
Assets
<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)
<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
<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
<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
<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

Front-end Input Requires CSS Requires JS
Categories (Multi-Level)
<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)
<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

Front-end Input Requires CSS Requires JS
Table
<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
{# 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]" >

Don't miss any Craft tips, tricks, and community updates