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/service-settings/branding/email-options.html

@@ -2,6 +2,7 @@
 {% from "components/radios.html" import radio %}
 {% 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 %}
   Email branding
@@ -11,7 +12,7 @@
 
   <h1 class="heading-large">Email branding</h1>
 
-  <form method="post">
+  {% call form_wrapper() %}
     <fieldset class="form-group {% if form.options.errors %}form-group-error{% endif %} top-gutter">
       <legend class="bottom-gutter-2-3">
         Choose the branding you’d like on your emails.
@@ -41,6 +42,6 @@
       destructive=destructive,
       back_link=url_for('.service_settings', service_id=current_service.id)
     ) }}
-  </form>
+  {% endcall %}
 
 {% endblock %}

app/templates/views/service-settings/confirm.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 %}
   {{ heading }}
@@ -13,14 +14,14 @@
   <div class="grid-row">
     <div class="column-three-quarters">
 
-    <form autocomplete="off" method="post">
+    {% call form_wrapper() %}
       {{ textbox(form.password) }}
       {{ page_footer(
         'Confirm',
         destructive=destructive,
         back_link=url_for('.service_settings', service_id=current_service.id)
       ) }}
-    </form>
+    {% endcall %}
     </div>
   </div>
 

app/templates/views/service-settings/contact_link.html

@@ -2,6 +2,7 @@
 {% from "components/textbox.html" import textbox %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/radios.html" import radio, radios_wrapper %}
+{% from "components/form.html" import form_wrapper %}
 
 {% block service_page_title %}
   {{ 'Change' if 'upload_document' in current_service.permissions else 'Add' }} contact details for ‘Download your document’ page
@@ -18,7 +19,7 @@
         on the download page. This is so users can contact you if there’s a problem (for example,
         if the link to download the document has expired).
       </p>
-      <form method="post" novalidate>
+      {% call form_wrapper() %}
 
         {% call radios_wrapper(form.contact_details_type, hide_legend=true) %}
           {% for option in form.contact_details_type %}
@@ -36,7 +37,7 @@
           back_link=url_for('.service_settings', service_id=current_service.id),
           back_link_text='Back to settings'
         ) }}
-      </form>
+      {% endcall %}
     </div>
   </div>
 {% endblock %}

app/templates/views/service-settings/data-retention/add.html

@@ -1,7 +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 %}
 {% from "components/radios.html" import radios %}
 
 {% block service_page_title %}
@@ -12,7 +12,7 @@
 
 
   <h1 class="heading-large">Set data retention</h1>
-    <form method="post">
+    {% call form_wrapper() %}
       {{ radios(form.notification_type) }}
       {{  textbox(form.days_of_retention) }}
       {{ page_footer(
@@ -20,6 +20,6 @@
       back_link=url_for('.add_data_retention', service_id=current_service.id),
       back_link_text='Back'
     ) }}
-    </form>
+    {% endcall %}
 
-{% endblock %}
+{% endblock %}

app/templates/views/service-settings/data-retention/edit.html

@@ -1,7 +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 %}
 {% from "components/radios.html" import radios %}
 
 {% block service_page_title %}
@@ -12,7 +12,7 @@
 
 
   <h1 class="heading-large">Set data retention</h1>
-    <form method="post">
+    {% call form_wrapper() %}
       {{ notification_type | capitalize}}
       {{  textbox(form.days_of_retention) }}
       {{ page_footer(
@@ -20,6 +20,6 @@
       back_link=url_for('.edit_data_retention', service_id=current_service.id, data_retention_id=data_retention_id),
       back_link_text='Back'
     ) }}
-    </form>
+    {% endcall %}
 
-{% endblock %}
+{% endblock %}

app/templates/views/service-settings/delete.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/page-footer.html" import page_footer %}
+{% from "components/form.html" import form_wrapper %}
 
 {% block service_page_title %}
   Delete service
@@ -33,13 +34,13 @@
         </li>
       </ul>
 
-      <form method="post">
+      {% call form_wrapper() %}
         {{ page_footer(
           'Yes, delete ‘{}’'.format(current_service.name),
           destructive=True,
           back_link=url_for('.service_settings', service_id=current_service.id)
         ) }}
-      </form>
+      {% endcall %}
 
     </div>
   </div>

app/templates/views/service-settings/email-reply-to/add.html

@@ -2,6 +2,7 @@
 {% from "components/textbox.html" import textbox %}
 {% from "components/checkbox.html" import checkbox %}
 {% from "components/page-footer.html" import page_footer %}
+{% from "components/form.html" import form_wrapper %}
 
 {% block service_page_title %}
   Add email reply-to address
@@ -12,7 +13,7 @@
   <h1 class="heading-large">
     Add email reply-to address
   </h1>
-  <form method="post" novalidate>
+  {% call form_wrapper() %}
     {{ textbox(
       form.email_address,
       width='2-3',
@@ -28,6 +29,6 @@
       back_link=url_for('.service_email_reply_to', service_id=current_service.id),
       back_link_text='Back'
     ) }}
-  </form>
+  {% endcall %}
 
 {% endblock %}

app/templates/views/service-settings/email-reply-to/edit.html

@@ -3,6 +3,7 @@
 {% from "components/textbox.html" import textbox %}
 {% from "components/checkbox.html" import checkbox %}
 {% from "components/page-footer.html" import page_footer %}
+{% from "components/form.html" import form_wrapper %}
 
 {% block service_page_title %}
  Edit email reply to address
@@ -24,7 +25,7 @@
       Edit email reply to address
     </h1>
   {% endif %}
-  <form method="post">
+  {% call form_wrapper() %}
     {{ textbox(
       form.email_address,
       width='2-3',
@@ -51,6 +52,6 @@
         delete_link_text='Delete'
       ) }}
     {% endif %}
-  </form>
+  {% endcall %}
 
 {% endblock %}

app/templates/views/service-settings/letter-contact/add.html

@@ -2,6 +2,7 @@
 {% from "components/textbox.html" import textbox %}
 {% from "components/checkbox.html" import checkbox %}
 {% from "components/page-footer.html" import page_footer %}
+{% from "components/form.html" import form_wrapper %}
 
 {% block service_page_title %}
   Add a new address
@@ -13,7 +14,7 @@
     Add a new address
   </h1>
   <div class="grid-row">
-    <form method="post" class="column-half" novalidate>
+    {% call form_wrapper() %}
       {{ textbox(
           form.letter_contact_block,
           label='This will appear as the ‘sender’ address on your letters.'|safe,
@@ -32,7 +33,7 @@
         back_link=None if request.args.get('from_template') else url_for('.service_letter_contact_details', service_id=current_service.id),
         back_link_text='Back'
       ) }}
-    </form>
+    {% endcall %}
   </div>
 
 {% endblock %}

app/templates/views/service-settings/letter-contact/edit.html

@@ -2,6 +2,7 @@
 {% from "components/textbox.html" import textbox %}
 {% from "components/checkbox.html" import checkbox %}
 {% from "components/page-footer.html" import page_footer %}
+{% from "components/form.html" import form_wrapper %}
 
 {% block service_page_title %}
   Edit an address
@@ -13,7 +14,7 @@
     Edit an address
   </h1>
   <div class="grid-row">
-    <form method="post" class="column-half">
+    {% call form_wrapper() %}
       {{ textbox(
         form.letter_contact_block,
         label='This will appear as the ‘sender’ address on your letters.'|safe,
@@ -36,7 +37,7 @@
         back_link=None if request.args.get('from_template') else url_for('.service_letter_contact_details', service_id=current_service.id),
         back_link_text='Back to settings'
       ) }}
-    </form>
+    {% endcall %}
   </div>
 
 {% endblock %}

app/templates/views/service-settings/link-service-to-organisation.html

@@ -1,6 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/radios.html" import radios %}
 {% from "components/page-footer.html" import page_footer %}
+{% from "components/form.html" import form_wrapper %}
 
 {% block service_page_title %}
   Link service to organisation
@@ -13,7 +14,7 @@
       <h1 class="heading-large">
         Link service to organisation
       </h1>
-      <form method="post">
+      {% call form_wrapper() %}
         {% if has_organisations %}
           {{ radios(form.organisations) }}
         {% else %}
@@ -24,7 +25,7 @@
           back_link=url_for('.service_settings', service_id=current_service.id),
           back_link_text='Back to settings'
         ) }}
-      </form>
+      {% endcall %}
     </div>
   </div>
 {% endblock %}

app/templates/views/service-settings/name.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 %}
   Change your service name
@@ -22,13 +23,13 @@
     {% endif %}
   </div>
 
-  <form method="post">
+  {% call form_wrapper() %}
     {{ textbox(form.name) }}
     {{ page_footer(
       'Save',
       back_link=url_for('.service_settings', service_id=current_service.id),
       back_link_text='Back to settings'
     ) }}
-  </form>
+  {% endcall %}
 
 {% endblock %}

app/templates/views/service-settings/preview-email-branding.html

@@ -1,5 +1,5 @@
 {% extends "views/platform-admin/_base_template.html" %}
-
+{% from "components/form.html" import form_wrapper %}
 {% block service_page_title %}
   Preview email branding
 {% endblock %}
@@ -10,7 +10,7 @@
   <div class="grid-row">
     <div class="column-full">
       <iframe src="{{ url_for('main.email_template', branding_style=form.branding_style.data) }}" class="email-branding-preview"></iframe>
-      <form method="post" action="{{ action }}">
+      {% call form_wrapper(action=action) %}
         <div class="form-group">
           {{ form.hidden_tag() }}
           <div class="page-footer">
@@ -18,7 +18,7 @@
             <a class="page-footer-back-link" href="{{ url_for('main.service_settings', service_id=service_id) }}">Back to service settings</a>
           </div>
         </div>
-      </form>
+      {% endcall %}
     </div>
   </div>
 {% endblock %}

app/templates/views/service-settings/set-email-branding.html

@@ -2,6 +2,7 @@
 {% from "components/radios.html" import radios %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/live-search.html" import live_search %}
+{% from "components/form.html" import form_wrapper %}
 
 {% block service_page_title %}
   Set email branding
@@ -10,7 +11,7 @@
 {% block maincolumn_content %}
 
   <h1 class="heading-large">Set email branding</h1>
-  <form method="post" novalidate autocomplete="off">
+  {% call form_wrapper() %}
     <div class="grid-row">
       <div class="column-full preview-pane">
       </div>
@@ -30,6 +31,6 @@
         ) }}
       </div>
     </div>
-  </form>
+  {% endcall %}
 
 {% endblock %}

app/templates/views/service-settings/set-free-sms-allowance.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 %}
   Emails
@@ -8,7 +9,7 @@
 
 {% block maincolumn_content %}
 
-  <form method="post">
+  {% call form_wrapper() %}
     <h1 class="heading-large">Free text message allowance</h1>
     {{ textbox(form.free_sms_allowance) }}
     {{ page_footer(
@@ -16,6 +17,6 @@
       back_link=url_for('.service_settings', service_id=current_service.id),
       back_link_text='Back to settings'
     ) }}
-  </form>
+  {% endcall %}
 
 {% endblock %}

app/templates/views/service-settings/set-inbound-number.html

@@ -22,14 +22,14 @@
 	    back_link_text='Back to settings'
 	  ) }}
     {% else %}
-    <form method="post">
+    {% call form_wrapper() %}
 	    {{ radios(form.inbound_number) }}
 	    {{ page_footer(
 		    'Save',
 		    back_link=url_for('.service_settings', service_id=current_service.id),
 		    back_link_text='Back'
-	 	) }}
-	</form>
+  	 	) }}
+  	{% endcall %}
 	{% endif %}
 
-{% endblock %}
+{% endblock %}

app/templates/views/service-settings/set-international-sms.html

@@ -1,6 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/radios.html" import radios %}
 {% from "components/page-footer.html" import page_footer %}
+{% from "components/form.html" import form_wrapper %}
 
 {% block service_page_title %}
   International text messages
@@ -18,14 +19,14 @@
         See <a href="{{ url_for(".pricing") }}">pricing</a> for the list
         of rates.
       </p>
-      <form method="post">
+      {% call form_wrapper() %}
         {{ radios(form.enabled) }}
         {{ page_footer(
           button_text="Save",
           back_link=url_for('.service_settings', service_id=current_service.id),
           back_link_text='Back to settings'
         ) }}
-      </form>
+      {% endcall %}
     </div>
   </div>
 

app/templates/views/service-settings/set-letter-branding.html

@@ -1,6 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/radios.html" import radios %}
 {% from "components/page-footer.html" import page_footer %}
+{% from "components/form.html" import form_wrapper %}
 
 {% block service_page_title %}
   Set letter branding
@@ -11,14 +12,14 @@
   <h1 class="heading-large">Set letter branding</h1>
   <div class="grid-row">
     <div class="column-three-quarters">
-      <form method="post">
+      {% call form_wrapper() %}
         {{ radios(form.dvla_org_id) }}
         {{ page_footer(
           'Save',
           back_link=url_for('.service_settings', service_id=current_service.id),
           back_link_text='Back to settings'
         ) }}
-      </form>
+      {% endcall %}
     </div>
   </div>
 

app/templates/views/service-settings/set-letter-contact-block.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 %}
   Letter contact details
@@ -12,7 +13,7 @@
     Letter contact details
   </h1>
   <div class="grid-row">
-    <form method="post" class="column-half">
+    {% call form_wrapper(class="column-half") %}
       {{ textbox(
         form.letter_contact_block,
         label='How should users contact your service?<br>This applies to all the letters you send.'|safe,
@@ -26,7 +27,7 @@
         back_link=None if request.args.get('from_template') else url_for('.service_settings', service_id=current_service.id),
         back_link_text='Back to settings'
       ) }}
-    </form>
+    {% endcall %}
   </div>
 
 {% endblock %}

app/templates/views/service-settings/set-letters.html

@@ -1,6 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/radios.html" import radios %}
 {% from "components/page-footer.html" import page_footer %}
+{% from "components/form.html" import form_wrapper %}
 
 {% block service_page_title %}
   Send letters
@@ -18,14 +19,14 @@
         See <a href="{{ url_for(".pricing", _anchor="letters") }}">pricing</a> for the list
         of rates.
       </p>
-      <form method="post">
+      {% call form_wrapper() %}
         {{ radios(form.enabled) }}
         {{ page_footer(
           'Save',
           back_link=url_for('.service_settings', service_id=current_service.id),
           back_link_text='Back to settings'
         ) }}
-      </form>
+      {% endcall %}
     </div>
   </div>
 

app/templates/views/service-settings/set-organisation-type.html

@@ -1,6 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/radios.html" import radios %}
 {% from "components/page-footer.html" import page_footer %}
+{% from "components/form.html" import form_wrapper %}
 
 {% block service_page_title %}
   Set branding and organisation
@@ -9,14 +10,14 @@
 {% block maincolumn_content %}
 
   <h1 class="heading-large">Set organisation type</h1>
-    <form method="post">
+    {% call form_wrapper() %}
       {{ radios(form.organisation_type) }}
       {{ page_footer(
         'Save',
         back_link=url_for('.service_settings', service_id=current_service.id),
         back_link_text='Back to settings'
       ) }}
-    </form>
+    {% endcall %}
   </div>
 
 {% endblock %}

app/templates/views/service-settings/set-reply-to-email.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 %}
   Email reply-to address
@@ -26,7 +27,7 @@
       Your service can’t go live until you’ve done this.
     </p>
   {% endif %}
-  <form method="post">
+  {% call form () %}
     {{ textbox(
       form.email_address,
       width='2-3',
@@ -36,7 +37,7 @@
       'Save',
       back_link=url_for('.service_settings', service_id=current_service.id),
       back_link_text='Back to settings'
-  ) }}
-  </form>
+    ) }}
+  {% endcall %}
 
 {% endblock %}

app/templates/views/service-settings/sms-prefix.html

@@ -1,6 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/radios.html" import radios %}
 {% from "components/page-footer.html" import page_footer %}
+{% from "components/form.html" import form_wrapper %}
 
 {% block service_page_title %}
   Text messages start with service name
@@ -9,13 +10,13 @@
 {% block maincolumn_content %}
 
   <h1 class="heading-large">Text messages start with service name</h1>
-  <form method="post">
+  {% call form_wrapper() %}
     {{ radios(form.enabled) }}
     {{ page_footer(
       button_text="Save",
       back_link=url_for('.service_settings', service_id=current_service.id),
       back_link_text='Back to settings'
     ) }}
-  </form>
+  {% endcall %}
 
 {% endblock %}

app/templates/views/service-settings/sms-sender/add.html

@@ -2,6 +2,7 @@
 {% from "components/textbox.html" import textbox %}
 {% from "components/checkbox.html" import checkbox %}
 {% from "components/page-footer.html" import page_footer %}
+{% from "components/form.html" import form_wrapper %}
 
 {% block service_page_title %}
   Add text message sender
@@ -10,7 +11,7 @@
 {% block maincolumn_content %}
 
   <h1 class="heading-large">Add text message sender</h1>
-  <form method="post">
+  {% call form_wrapper() %}
     {{ textbox(
       form.sms_sender,
       width='1-4',
@@ -25,7 +26,7 @@
       'Save',
       back_link=url_for('.service_sms_senders', service_id=current_service.id),
       back_link_text='Back'
-  ) }}
-  </form>
+    ) }}
+  {% endcall %}
 
-{% endblock %}
+{% endblock %}

app/templates/views/service-settings/sms-sender/edit.html

@@ -3,6 +3,7 @@
 {% from "components/textbox.html" import textbox %}
 {% from "components/checkbox.html" import checkbox %}
 {% from "components/page-footer.html" import page_footer %}
+{% from "components/form.html" import form_wrapper %}
 
 {% block service_page_title %}
   Edit text message sender
@@ -24,7 +25,7 @@
       Edit text message sender
     </h1>
   {% endif %}
-  <form method="post">
+  {% call form_wrapper() %}
     {% if inbound_number %}
       <p>
         <span class="bottom-gutter-1-3"> {{ sms_sender.sms_sender }} </span>
@@ -66,6 +67,6 @@
         ) }}
       {% endif %}
     {% endif %}
-  </form>
+  {% endcall %}
 
 {% endblock %}

app/templates/views/service-settings/submit-request-to-go-live.html

@@ -4,6 +4,7 @@
 {% from "components/radios.html" import radios %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/banner.html" import banner_wrapper %}
+{% from "components/form.html" import form_wrapper %}
 
 {% block service_page_title %}
   Request to go live
@@ -13,7 +14,7 @@
 
       <h1 class="heading-large">Request to go live</h1>
 
-      <form method="post" autocomplete="off" novalidate>
+      {% call form_wrapper() %}
         <div class="form-group">
           {{ textbox(form.volume_email, width='1-2', hint='For example, 1,000,000') }}
           {{ textbox(form.volume_sms, width='1-2', hint='For example, 500,000') }}
@@ -29,6 +30,6 @@
           By requesting to go live you’re agreeing to our <a href="{{ url_for('.terms') }}">terms of use</a>.
         </p>
         {{ page_footer('Request to go live') }}
-      </form>
+      {% endcall %}
 
 {% endblock %}