Form

<nav class="au-skip-link" aria-label="skip links navigation">
    <a class="au-skip-link__link" href="#content">Skip to main content</a>
    <a class="au-skip-link__link" href="#nav">Skip to main navigation</a>
</nav>

<div class="health-release-status au-body au-body--dark">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <span class="health-release-status__icon health-release-status__icon--launch">
                    New
                </span>
                <div class="health-release-status--desktop">
                    Welcome to our new website. <a href="#">Learn more about it</a>. This
                    is still a work in progress, so please <a href="#">let us know what you
                        think</a>.
                </div>
                <div class="health-release-status--mobile">
                    Welcome to Health’s new website. <a href="#">Learn more about it</a>.
                </div>
            </div>
        </div>
    </div>
</div>

<div class="au-body">

    <header class="au-header pillars-container" role="banner">
        <div class="container">
            <div id="pillars"></div>
            <div class="row">
                <div class="col-xs-12 col-md-6">
                    <a href="/" title="Home" rel="home" class="au-header__logo">
                        <img src="../../images/logo.svg" alt="Australia Government Department of Health" class="au-header__logo-image au-responsive-media-img" />
                    </a>
                    <div class="au-sronly">
                        <p>Australian Government Department of Health and Aged Care</p>
                    </div>
                </div>
                <div class="col-xs-12 col-md-6">
                    <div class="health-sub-nav text--align-right">
                        <h3 class="au-sronly">Sub menu</h3>
                        <ul class="au-link-list au-link-list--inline">
                            <li><a href="#">Link 1</a></li>
                            <li><a href="#">Link 2</a></li>
                            <li><a href="#">Link 3</a></li>
                        </ul>
                    </div>
                    <div class="health-search health-search--global">
                        <form class="au-form">
                            <div class="health-search__form__input-wrapper">
                                <div class="au-form__item">
                                    <label class="au-sronly" for="search-field">Search</label>
                                    <input placeholder="Search this website" class="health-search__form__input au-text-input au-text-input au-text-input--block ui-autocomplete-input" size="30" type="text" id="search-field" name="funnelback_search_field" value="" maxlength="128" autocomplete="off">
                                </div>
                                <div class="health-loading"></div>
                            </div>
                            <input class="health-search__form__submit au-btn au-btn" type="submit" name="submit" value="Search">
                        </form>
                    </div>

                    <script language="JavaScript">
                        $(document).ready(function() {
                            health.searchAutocomplete('#search-field', dinosaurData);
                        });
                    </script>
                </div>
            </div>
        </div>
    </header>

    <nav class="au-main-nav " aria-label="main">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div id="main-nav-default" class="au-main-nav__content">
                        <button aria-controls="main-nav-default" class="au-main-nav__toggle au-main-nav__toggle--open" onclick="return AU.mainNav.Toggle( this )">
                            <span class="svg-inline--fa fa-fw">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                                    <path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path>
                                </svg>
                            </span>
                            Menu
                        </button>
                        <button class="au-main-nav__toggle au-main-nav__toggle--search au-main-nav__toggle--open">
                            <span class="svg-inline--fa fa-fw au-main-nav__toggle--search__closed">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                    <path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>
                                </svg>
                            </span>
                            <span class="svg-inline--fa fa-fw au-main-nav__toggle--search__open">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512">
                                    <path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path>
                                </svg>
                            </span>
                            Search
                        </button>
                        <div class="au-main-nav__menu">
                            <div class="au-main-nav__menu-inner">
                                <div class="au-main-nav__focus-trap-top"></div>
                                <button aria-controls="main-nav-default" class="au-main-nav__toggle au-main-nav__toggle--close" onclick="return AU.mainNav.Toggle( this )">
                                    <span class="svg-inline--fa fa-fw">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512">
                                            <path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path>
                                        </svg>
                                    </span>
                                    Close
                                </button>
                                <ul class="au-link-list">
                                    <li class="active"><a href="#" aria-current="page">Home</a></li>
                                    <li><a href="#">Dinosaurs</a></li>
                                    <li><a href="#">Interesting facts</a></li>
                                    <li><a href="#">Resources</a></li>
                                </ul>
                                <div class="au-main-nav__focus-trap-bottom"></div>
                            </div>
                        </div>
                        <div class="au-main-nav__overlay" aria-controls="main-nav-default" onclick="return AU.mainNav.Toggle( this )">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <div class="health-sub-header">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-md-8">
                    <nav class="au-breadcrumbs" aria-label="Breadcrumb">
                        <h2 class="au-sronly">You are here</h2>
                        <ol class="au-link-list au-link-list--inline">
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Dinosaurs</a></li>
                            <li><a href="#">Theropods</a></li>
                        </ol>
                    </nav>

                    <div class="health-sub-header__section-title">
                        <a class="au-direction-link au-direction-link--left" href="/about-us">About us</a>
                    </div>
                    <h1>Provide feedback</h1>
                    <p class="au-introduction">
                        Use this form to give us thoughts or feedback on how we can improve the website
                    </p>
                </div>
                <div class="col-xs-12 col-md-4">
                    <div class="health-toolbar">
                        <ul class="health-toolbar__items au-link-list au-link-list--inline">
                            <li>
                                <button id="health-toolbar__listen" href="#" class="au-btn au-btn--tertiary">
                                    <span class="svg-inline--fa fa-fw fa-left">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
                                            <path d="M215.03 71.05L126.06 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-21.46-25.96-31.98-40.97-16.97zm233.32-51.08c-11.17-7.33-26.18-4.24-33.51 6.95-7.34 11.17-4.22 26.18 6.95 33.51 66.27 43.49 105.82 116.6 105.82 195.58 0 78.98-39.55 152.09-105.82 195.58-11.17 7.32-14.29 22.34-6.95 33.5 7.04 10.71 21.93 14.56 33.51 6.95C528.27 439.58 576 351.33 576 256S528.27 72.43 448.35 19.97zM480 256c0-63.53-32.06-121.94-85.77-156.24-11.19-7.14-26.03-3.82-33.12 7.46s-3.78 26.21 7.41 33.36C408.27 165.97 432 209.11 432 256s-23.73 90.03-63.48 115.42c-11.19 7.14-14.5 22.07-7.41 33.36 6.51 10.36 21.12 15.14 33.12 7.46C447.94 377.94 480 319.54 480 256zm-141.77-76.87c-11.58-6.33-26.19-2.16-32.61 9.45-6.39 11.61-2.16 26.2 9.45 32.61C327.98 228.28 336 241.63 336 256c0 14.38-8.02 27.72-20.92 34.81-11.61 6.41-15.84 21-9.45 32.61 6.43 11.66 21.05 15.8 32.61 9.45 28.23-15.55 45.77-45 45.77-76.88s-17.54-61.32-45.78-76.86z">
                                            </path>
                                        </svg>
                                    </span>Listen
                                </button>
                            </li>
                            <li>
                                <button id="health-toolbar__print" class="au-btn au-btn--tertiary">
                                    <span class="svg-inline--fa fa-fw fa-left">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                            <path d="M448 192V77.25c0-8.49-3.37-16.62-9.37-22.63L393.37 9.37c-6-6-14.14-9.37-22.63-9.37H96C78.33 0 64 14.33 64 32v160c-35.35 0-64 28.65-64 64v112c0 8.84 7.16 16 16 16h48v96c0 17.67 14.33 32 32 32h320c17.67 0 32-14.33 32-32v-96h48c8.84 0 16-7.16 16-16V256c0-35.35-28.65-64-64-64zm-64 256H128v-96h256v96zm0-224H128V64h192v48c0 8.84 7.16 16 16 16h48v96zm48 72c-13.25 0-24-10.75-24-24 0-13.26 10.75-24 24-24s24 10.74 24 24c0 13.25-10.75 24-24 24z">
                                            </path>
                                        </svg>
                                    </span>Print
                                </button>
                            </li>
                            <li>
                                <button id="health-toolbar__share" class="au-btn au-btn--tertiary">
                                    <span class="svg-inline--fa fa-fw fa-left">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                                            <path d="M352 320c-22.608 0-43.387 7.819-59.79 20.895l-102.486-64.054a96.551 96.551 0 0 0 0-41.683l102.486-64.054C308.613 184.181 329.392 192 352 192c53.019 0 96-42.981 96-96S405.019 0 352 0s-96 42.981-96 96c0 7.158.79 14.13 2.276 20.841L155.79 180.895C139.387 167.819 118.608 160 96 160c-53.019 0-96 42.981-96 96s42.981 96 96 96c22.608 0 43.387-7.819 59.79-20.895l102.486 64.054A96.301 96.301 0 0 0 256 416c0 53.019 42.981 96 96 96s96-42.981 96-96-42.981-96-96-96z">
                                            </path>
                                        </svg>
                                    </span>Share
                                </button>
                                <div id="health-share-menu">
                                    <ul class="au-link-list">
                                        <li>
                                            <span class="svg-inline--fa fa-fw"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                                    <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z">
                                                    </path>
                                                </svg></span>
                                            <a href="#">Twitter</a>
                                        </li>
                                        <li>
                                            <span class="svg-inline--fa fa-fw"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
                                                    <path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z">
                                                    </path>
                                                </svg></span>
                                            <a href="#">Facebook</a>
                                        </li>
                                        <li>
                                            <span class="svg-inline--fa fa-fw"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                                    <path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z">
                                                    </path>
                                                </svg></span>
                                            <a href="#">Email</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>

                    <script language="JavaScript">
                        $(document).ready(function() {
                            health.tooltip('#health-toolbar__share', {
                                html: document.getElementById("health-share-menu"),
                                trigger: 'click',
                                appendTo: $("#health-toolbar__share").parent('li')[0]
                            });
                        });
                    </script>
                </div>
            </div>
        </div>
    </div>
    <div class="container not-full-width">

        <div class="row">

            <div class="col-sm-8">
                <p>Your feedback comments are covered by our privacy policy.</p>

                <form class="au-form">

                    <div class="au-form__item">
                        <label for="is-this-feedback-for">
                            Is this feedback for:
                            <span class="form-required">(mandatory)</span> </label>
                        <div id="is-this-feedback-for" class="form-radios">
                            <div class="au-form__item-type--radio">
                                <div class="au-control-input">
                                    <input required="required" type="radio" id="is-this-feedback-for-1" name="submitted[is_this_feedback_for]" value="The whole website" class="au-control-input__input" />
                                    <label class="au-control-input__text" for="is-this-feedback-for-1">
                                        The whole website
                                    </label>
                                </div>
                            </div>
                            <div class="au-form__item-type--radio">
                                <div class="au-control-input">
                                    <input required="required" type="radio" id="is-this-feedback-for-2" name="submitted[is_this_feedback_for]" value="The page you were just on" class="au-control-input__input" />
                                    <label class="au-control-input__text" for="is-this-feedback-for-2">
                                        The page you were just on
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="au-form__item">
                        <label for="is-this-feedback-for">
                            My favourite animals are:
                            <span class="form-required">(mandatory)</span> </label>
                        <div class="au-form__item-description">
                            Check all that apply
                        </div>
                        <div id="interested-in" class="form-checkboxes">
                            <div class="au-form__item-type--checkbox">
                                <div class="au-control-input">
                                    <input required="required" type="checkbox" id="interested-in-1" name="submitted[is_this_feedback_for]" value="Dinosaurs" class="au-control-input__input" />
                                    <label class="au-control-input__text" for="interested-in-1">
                                        Dinosaurs
                                    </label>
                                </div>
                            </div>

                            <div class="au-form__item-type--checkbox">
                                <div class="au-control-input">
                                    <input required="required" type="checkbox" id="interested-in-2" name="submitted[is_this_feedback_for]" value="Birds" class="au-control-input__input" />
                                    <label class="au-control-input__text" for="interested-in-2">
                                        Birds
                                    </label>
                                </div>
                            </div>

                            <div class="au-form__item-type--checkbox">
                                <div class="au-control-input">
                                    <input required="required" type="checkbox" id="interested-in-2" name="submitted[is_this_feedback_for]" value="Mammals" class="au-control-input__input" />
                                    <label class="au-control-input__text" for="interested-in-2">
                                        Mammals
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="au-form__item">
                        <label for="favourite">
                            My least favourite animal is:
                            <span class="form-required">(mandatory)</span> </label>
                        <select class="au-select" id="favourite">
                            <option>Dinosaurs</option>
                            <option>Birds</option>
                            <option>Mammals</option>
                        </select>
                    </div>
                    <div class="au-form__item">
                        <label for="email">
                            Feedback
                            <span class="form-required">(mandatory)</span> </label>
                        <div class="au-form__item-description">
                            Please do not include any personal or financial information
                        </div>
                        <textarea class="au-text-input au-text-input--block" id="description" name="description" maxlength="1200"></textarea>
                    </div>

                    <script language="JavaScript">
                        $(document).ready(function() {
                            health.fieldLengthCounter('#description');
                        });
                    </script>

                    <div class="au-form__item">
                        <label for="email">
                            Email address
                            <span class="form-required">(mandatory)</span> </label>
                        <div class="au-form__item-description">
                            Health will not share this email. It will only be used to contact you regarding your feedback.
                        </div>
                        <input class="au-text-input au-text-input--block" type="email" id="email" name="email" maxlength="50">
                    </div>

                    <script language="JavaScript">
                        $(document).ready(function() {
                            health.fieldLengthCounter('#email');
                        });
                    </script>

                    <div class="au-form__item">
                        <button class="au-btn">Submit</button>
                    </div>

                </form>
            </div>

        </div>
    </div>
</div>

<footer class="au-footer au-footer--dark au-body au-body--dark" role="contentinfo">
    <div class="container">
        <nav class="au-footer__navigation row" aria-label="footer">
            <div class="col-sm-6 col-md-3 au-footer__navigation-section">
                <h3>About Dinosaurs</h3>
                <ul class="au-link-list">
                    <li><a href="#">About us</a></li>
                    <li><a href="#">Careers</a></li>
                    <li><a href="#">Corporate reporting</a></li>
                    <li><a href="#">Portfolio agencies</a></li>
                    <li><a href="#">Contact us</a></li>
                </ul>
            </div>
            <div class="col-sm-6 col-md-3 au-footer__navigation-section">
                <h3>Using our websites</h3>
                <ul class="au-link-list">
                    <li><a href="#">About our website</a></li>
                    <li><a href="#">Accessibility</a></li>
                    <li><a href="#">Copyright</a></li>
                    <li><a href="#">Disclaimer</a></li>
                    <li><a href="#">Privacy</a></li>
                    <li><a href="#">Social media</a></li>
                    <li><a href="#">RSS feed</a></li>
                </ul>
            </div>
            <div class="col-sm-6 col-md-3 au-footer__navigation-section">
                <h3>Follow us</h3>
                <ul class="au-link-list">
                    <li><a href="#">Media centre</a></li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Facebook</a></li>
                    <li><a href="#">LinkedIn</a></li>
                    <li><a href="#">Twitter</a></li>
                    <li><a href="#">Youtube</a></li>
                </ul>
            </div>
            <div class="col-sm-6 col-md-3 au-footer__navigation-section">
                <h3>Help us improve</h3>
                <p>We are always looking for ways to improve our website.</p>
                <a href="#" class="au-btn au-btn--secondary au-btn--dark standard-gap">Provide feedback</a>
            </div>
        </nav>
        <div class="au-footer__end">
            <div class="row">
                <div class="col-xs-12">
                    <p><small>© Commonwealth of Australia</small></p>
                </div>
            </div>
        </div>
    </div>
</footer>

<button class="health-back-to-top ">
    <a class="au-btn au-btn--secondary" href="#">
        <span class="svg-inline--fa fa-fw">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                <path d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z"></path>
            </svg>
        </span>
        Back to top
    </a>
</button>