{{ aspExample({ code: &quot;&lt;div class=\&quot;form__page-heading\&quot;&gt;<br />
  &lt;h1 class=\&quot;form__page-title\&quot;&gt;Form Title&lt;/h1&gt;<br />
  &lt;p class=\&quot;form__page-subtitle\&quot;&gt;All fields are required unless specified otherwise.&lt;/p&gt;<br />
&lt;/div&gt;<br />
&lt;fieldset class=\&quot;form__fieldset form__group\&quot;&gt;<br />
    &hellip;form content&hellip;<br />
&lt;/fieldset&gt;&quot;, nunjucks: &quot;&quot;, title: &quot;&quot;, id: &quot;65a92c9399119&quot;, url: &quot;&quot; }) }}


<h2 class="wp-block-heading" id="form-with-errors">Form with errors</h2>



<p>Place at the top of the page. WIP &#8212; above div.form__page-heading</p>



<p>Links should go to the question id, placed on fieldset.form__fieldset if question is wrapped in a fieldset or div.form__group.form__group&#8211;error if question is not wrapped in a fieldset</p>



<p>Give an example of a link to the field with an error?</p>


 {{ aspExample({ code: &quot;&lt;div class=\&quot;form__errors\&quot; id=\&quot;errors-example-1\&quot; role=\&quot;group\&quot;&gt;  <br />
  &lt;h2 class=\&quot;form__errors-heading\&quot;&gt;Please fix the following issue before continuing&lt;/h2&gt;  <br />
  &lt;ul class=\&quot;form__errors-list\&quot;&gt;  <br />
    &lt;li&gt;&lt;a href=\&quot;#\&quot; class=\&quot;form__errors-list-item\&quot;&gt;Full name is required&lt;/a&gt;&lt;/li&gt;<br />
  &lt;/ul&gt;  <br />
&lt;/div&gt;&quot;, nunjucks: &quot;&quot;, title: &quot;&quot;, id: &quot;65a92c93991eb&quot;, url: &quot;&quot; }) }}


<h2 class="wp-block-heading" id="form-with-multiple-errors">Form with multiple errors</h2>



<p>Give an example of a link to the fields with errors?</p>


 {{ aspExample({ code: &quot;&lt;div class=\&quot;form__errors\&quot; id=\&quot;errors-example-2\&quot; role=\&quot;group\&quot;&gt;  <br />
  &lt;h2 class=\&quot;form__errors-heading\&quot;&gt;Please fix the following issues before continuing&lt;/h2&gt;  <br />
  &lt;ul class=\&quot;form__errors-list\&quot;&gt;  <br />
    &lt;li&gt;&lt;a href=\&quot;#\&quot; class=\&quot;form__errors-list-item\&quot;&gt;Your response to Full name is not valid&lt;/a&gt;&lt;/li&gt;  <br />
    &lt;li&gt;&lt;a href=\&quot;#\&quot; class=\&quot;form__errors-list-item\&quot;&gt;A selection is required&lt;/a&gt;&lt;/li&gt;  <br />
    &lt;li&gt;&lt;a href=\&quot;#\&quot; class=\&quot;form__errors-list-item\&quot;&gt;Occurrence type is required&lt;/a&gt;&lt;/li&gt;  <br />
  &lt;/ul&gt;  <br />
&lt;/div&gt;&quot;, nunjucks: &quot;&quot;, title: &quot;&quot;, id: &quot;65a92c9399221&quot;, url: &quot;&quot; }) }}


<p>WIP &#8211; We use HTML5 attributes (e.g. required) on child elements within conditional content. BUT do not use it on parent elements</p>



<p>JavaScript countdown</p>