Update example of a single checkbox to use the new style

- Rename the snippet
- Remove the text about large hit areas, as this is contradictory

app/views/guide_form_elements.html

@@ -234,21 +234,19 @@ <h4 class="heading-small">Stacked checkboxes</h4>
 </code>
 </pre>
 
-  <h4 class="heading-small">Inline checkboxes</h4>
-  <ul class="list list-bullet text">
-    <li>large hit areas aren’t always appropriate</li>
-    <li>only pre-select options if there’s a strong, user-centred reason to</li>
-  </ul>
+  <p>
+    Only pre-select options if there’s a strong, user-centred reason to.
+  </p>
 
   <div class="example">
     <form>
-      {% include "snippets/form_checkbox_native.html" %}
+      {% include "snippets/form_checkbox.html" %}
     </form>
   </div>
 
 <pre>
 <code class="language-markup">
-  {% include "snippets/encoded/form_checkbox_native.html" %}
+  {% include "snippets/encoded/form_checkbox.html" %}
 </code>
 </pre>
 

app/views/snippets/form_checkbox.html

@@ -0,0 +1,8 @@
+<div class="form-group">
+  <label class="form-label" for="telephone-number">Enter your telephone number</label>
+  <input class="form-control" id="telephone-number" name="telephone-number" type="text">
+</div>
+<label class="block-label selection-button-checkbox" for="checkbox-telephone-number">
+  <input id="checkbox-telephone-number" name="contact-by-text-phone" type="checkbox" value="true">
+  I need to be contacted using a text phone
+</label>