Use a macro for form tags

This will stop us repeatedly forgetting to add `novalidate` and
`autocomplete='off'` to our forms (which is how most of them are set
up).

It uses sensible defaults, based on how we most-commonly configure
forms:
- most of our forms are `post`ed (but this can be overridden)
- `autocomplete` should only be enabled where it makes sense, otherwise
  it’s more annoying than useful (but this can be overriden)
- we should never be using HTML5 form validation because our own error
  styles and messages are better

app/templates/views/api/callbacks/delivery-status-callback.html

@@ -1,6 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
 {% from "components/page-footer.html" import page_footer %}
+{% from "components/form.html" import form_wrapper %}
 
 {% block service_page_title %}
   Callbacks for delivery receipts
@@ -15,7 +16,7 @@
         Check the <a href="{{ url_for('.callbacks') }}"> callback documentation </a> for more information.
       </p>
 
-      <form method="post">
+      {% call form_wrapper() %}
         {{ textbox(
           form.url,
           width='1-1',
@@ -27,12 +28,12 @@
           hint='At least 10 characters',
           autocomplete='new-password'
         ) }}
-          {{ page_footer(
+        {{ page_footer(
           'Save',
           back_link=url_for(back_link, service_id=current_service.id),
           back_link_text='Back to settings'
-      ) }}
-      </form>
+        ) }}
+      {% endcall %}
     </div>
   </div>
 

app/templates/views/api/callbacks/received-text-messages-callback.html

@@ -1,6 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
 {% from "components/page-footer.html" import page_footer %}
+{% from "components/form.html" import form_wrapper %}
 
 {% block service_page_title %}
   Callbacks for received text messages
@@ -15,7 +16,7 @@
         Check the <a href="{{ url_for('.callbacks') }}"> callback documentation </a> for more information.
       </p>
 
-      <form method="post">
+      {% call form_wrapper() %}
         {{ textbox(
           form.url,
           width='1-1',
@@ -27,12 +28,12 @@
           hint='At least 10 characters',
           autocomplete='new-password'
         ) }}
-          {{ page_footer(
+        {{ page_footer(
           'Save',
           back_link=url_for('.api_callbacks', service_id=current_service.id),
           back_link_text='Back to settings'
-      ) }}
-      </form>
+        ) }}
+      {% endcall %}
     </div>
   </div>
 

app/templates/views/api/keys/create.html

@@ -3,6 +3,7 @@
 {% from "components/textbox.html" import textbox %}
 {% from "components/radios.html" import radios %}
 {% from "components/banner.html" import banner_wrapper %}
+{% from "components/form.html" import form_wrapper %}
 
 {% block service_page_title %}
   Create an API key
@@ -14,10 +15,10 @@
     Create an API key
   </h1>
 
-  <form method="post">
+  {% call form_wrapper() %}
     {{ textbox(form.key_name, label='Name for this key') }}
     {{ radios(form.key_type, disable=disabled_options, option_hints=option_hints) }}
     {{ page_footer('Continue') }}
-  </form>
+  {% endcall %}
 
 {% endblock %}

app/templates/views/api/whitelist.html

@@ -4,6 +4,7 @@
 {% from "components/api-key.html" import api_key %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/list-entry.html" import list_entry %}
+{% from "components/form.html" import form_wrapper %}
 
 {% block service_page_title %}
   Whitelist
@@ -42,7 +43,7 @@
     are included in the whitelist automatically.
   </p>
 
-  <form method="post" autocomplete="off" novalidate>
+  {% call form_wrapper() %}
 
     <div class="grid-row">
       <div class="column-two-thirds">
@@ -68,6 +69,6 @@
       secondary_link_text='Back to API integration'
     ) }}
 
-  </form>
+  {% endcall %}
 
 {% endblock %}