diff --git a/plugins/october/demo/components/todo/default.htm b/plugins/october/demo/components/todo/default.htm
index 24429ec47..e30428c8e 100644
--- a/plugins/october/demo/components/todo/default.htm
+++ b/plugins/october/demo/components/todo/default.htm
@@ -1,16 +1,15 @@
-<form
-    role="form"
-    data-request="{{ __SELF__ }}::onAddItem"
-    data-request-update="'{{ __SELF__ }}::list': '#result'"
-    data-request-success="$('#input-item').val('')"
-    data-request-flash>
+{{ form_ajax(__SELF__ ~ '::onAddItem', {
+    update: "'" ~ __SELF__ ~ "::list': '#result'",
+    success: "$('#input-item').val('')",
+    'data-request-flash': ''
+}) }}
     <div class="panel panel-default">
         <div class="panel-heading">
             <h3 class="panel-title">To Do List</h3>
         </div>
         <div class="panel-body">
             <div class="input-group">
-                <input type="text" id="input-item" class="form-control" value="" name="newItem" placeholder="What needs to be done?"> 
+                <input type="text" id="input-item" class="form-control" value="" name="newItem" placeholder="What needs to be done?">
                 <span class="input-group-btn">
                     <button type="submit" class="btn btn btn-primary" data-attach-loading>Add</button>
                 </span>
@@ -19,4 +18,4 @@
         <ul class="list-group" id="result">
         </ul>
     </div>
-</form>
+{{ form_close() }}