Form styles should be attached to <form> tag, not <fieldset>

[rhyslawry]

Expected behaviour

-Design system should automatically apply form styles to <form>element, rather than <fieldset> -Style should be applied to CMS form questions regardless of whether they're wrapped in a "Form Section" or just standalone questions.

Actual behaviour

Currently the DS styling is attached to the <fieldset> tag, instead of the <form> tag. Jason mentioned this should probably be changed. Form fields are appearing unstyled unless they're wrapped in a "Form section" asset, which only then adds the <fieldset> tag Currently the CMS only adds the <fieldset> tag to "form sections", which is causes problems with standalone form questions not nested in a form section. See example here of a live form containing both styled and unstyled elements: https://cms.unimelb.edu.au/controlled-environment/commercial/hawthorn/venues-for-hire/venue-enquiry-form/_nocache (Only the last question is styled because it's in a form section - except for the datepicker which is appearing styled because of a hack/override I think) Dragging and moving the questions under a form section in the backend doesn't work - meaning these forms have to be recreated from scratch inside a form section if it's not fixed.

Steps to reproduce

https://cms.unimelb.edu.au/controlled-environment/commercial/hawthorn/venues-for-hire/venue-enquiry-form/_nocache

[axelboc]

Yeah sorry you still have to deal with these sorts of issues. A big overhaul of the forms is in the pipeline.

[dkevey]

Current CSS over-rides for forms is quite extensive. Need to build a sample form (default style) in CMS.

/* correcting issues with styles when using native Matrix form builder */
.uomcontent legend.sq-form-section-title {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.0625rem;
    line-height: 1.5rem;
    text-transform: uppercase;
    padding-top: 10px;
}
.sq-form-question.sq-form-question-error input.sq-form-field,
.sq-form-error.sq-captcha-error {
    background-color: #fff;
    border-color: #fb6a7b;
    color: #fb6a7b;
}
.sq-form-question.sq-form-question-error p.sq-form-error,
.sq-form-error.sq-captcha-error {
    font-size: 0.875rem;
    padding: 0.3125rem 0;
    -webkit-animation: flash 0.4s 0.1s 1 ease-in-out;
    animation: flash 0.4s 0.1s 1 ease-in-out;
    color: #df0620;
    display: block;
    font-style: italic;
    margin: 0;
    text-transform: none
}

.uomcontent fieldset div.sq-form-question-answer div.styled-select { margin-top: 0.3125rem; }
.uomcontent span#sq_normal_captcha input[type="text"]:hover {border-color: #adb8c1}
.uomcontent span#sq_normal_captcha input[type="text"] {
    font-size: 1.25rem;
    background-color: #f6f6f6;
    border: 1px solid #d3d3d3;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
    padding: 0.5rem 0.625rem;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-weight: 300;
    margin-top: 0.3125rem;
    border-radius: 0.1875rem;
}
div.sq-form-captcha {
    border-bottom: 1px solid #e9e9e9;
    border-top: 1px solid #e9e9e9;
    padding-top: 3rem;
    padding-bottom: 48px;
    padding-bottom: 3rem;
}
.uomcontent ul.sq-form-summary-semantic {
    padding-top: 48px;
    padding-top: 3rem;
    padding-bottom: 48px;
    padding-bottom: 3rem;
}
.uomcontent ul.sq-form-summary-semantic li {
    list-style-type: none;
}
.uomcontent ul.sq-form-summary-semantic li dl {
    font-size: 16px;
    overflow: hidden;
}

/*overrides for checkbox, radio button and file upload */
    .uomcontent .sq-form-question-title[for] {
        cursor: pointer;
    }

    .uomcontent .sq-form-question-answer li {
        position: relative;
        margin-left: 0;
        list-style-type: none;
    }

    .uomcontent .sq-form-question-answer input[type="checkbox"],
    .uomcontent .sq-form-question-answer input[type="radio"] {
        left: 0;
        top: 0;
        clip: auto;
    }

    .uomcontent .sq-form-question-answer input[type="checkbox"] + label:after,
    .uomcontent .sq-form-question-answer input[type="radio"] + label:after {
        content: none;
    }

    .uomcontent .sq-form-question-answer input[type="file"] {
        padding: 8px;
        padding: .5rem;
        margin-top: 5px;
        margin-top: .3125rem;
        width: 100%;
        background-color: #f6f6f6;
        border: 1px solid #d3d3d3;
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);
        border-radius: 3px;
        font-size: 16px;
        font-size: 1rem;
        font-weight: 300;
        cursor: pointer;
        color: #000;
    }

    .uomcontent .sq-form-question-answer input[type="file"]:hover {
        border-color: #adb8c1;
        text-decoration: underline;
    }

/* 21/10/16 unstyled form overrides for checkboxes to work */
.uomcontent#top form:not(.unstyled-controls):not(.filtered-listing-select) fieldset input[type=checkbox]:not(.unstyled),
.uomcontent#top form:not(.unstyled-controls):not(.filtered-listing-select) fieldset input[type=radio]:not(.unstyled) {
  position: static !important;
}

.uomcontent#top form:not(.unstyled-controls):not(.filtered-listing-select) fieldset input[type=checkbox]:not(.unstyled)+label,
.uomcontent#top form:not(.unstyled-controls):not(.filtered-listing-select) fieldset input[type=radio]:not(.unstyled)+label {
  display: inline;
}

.uomcontent#top form:not(.unstyled-controls):not(.filtered-listing-select) fieldset input[type=checkbox]:not(.unstyled)+label:after,
.uomcontent#top form:not(.unstyled-controls):not(.filtered-listing-select) fieldset input[type=radio]:not(.unstyled)+label:after {
  display: none;
}

/* 7/11/16 additional css to get checkboxes to work again */
#top.uomcontent form:not(.unstyled-controls):not(.filtered-listing-select) {
  padding-left: 0;
  padding-right: 0;
}

#top.uomcontent form:not(.unstyled-controls):not(.filtered-listing-select) fieldset input[type="checkbox"]:not(.unstyled),
#top.uomcontent form:not(.unstyled-controls):not(.filtered-listing-select) fieldset input[type="radio"]:not(.unstyled) {
  position: static !important;
}

/* 16/11/16 remove double boxes on checklist styles and display tick*/
#top.uomcontent form:not(.unstyled-controls):not(.filtered-listing-select) fieldset ul.checklist input[type="checkbox"]:not(.unstyled) {
  position: absolute!important;
}
.uomcontent#top form:not(.unstyled-controls):not(.filtered-listing-select) fieldset ul.checklist input[type=checkbox]:not(.unstyled)+label,
.uomcontent#top form:not(.unstyled-controls):not(.filtered-listing-select) fieldset ul.checklist input[type=checkbox]:not(.unstyled)+label:after,
.uomcontent#top form:not(.unstyled-controls):not(.filtered-listing-select) fieldset ul.checklist input[type=radio]:not(.unstyled)+label,
.uomcontent#top form:not(.unstyled-controls):not(.filtered-listing-select) fieldset ul.checklist input[type=radio]:not(.unstyled)+label:after {
  display: block;
}

[dkevey]

Forms causing issues like this when not wrapped in FORM tag http://law.unimelb.edu.au/centres/iilah/news-and-events/2017-events/early-career-workshop