Update feedback form, part 2

[GG]

Further refinements to the feedback form, after working on a common pattern we can (eventually) apply to all of our SUL apps.

Assuming the user is authenticated:

• A: Already done in Earthworks, just noting that eventually we'd like to use this 3px bottom border for the active state of the Feedback link in all apps (I like the way it helps reinforce to the user that they are currently in the Feedback action context).

• B: Wrap the current reporting from message in an alert-primary component, no close affordance.

• C: Remove the accessibility statement currently displayed here. @jvine and I think the Accessibility link in the Stanford footer is sufficient.

• Not in the mockup, but we should add the required attribute to the three input fields (as currently done in Searchworks). We think it makes sense for these fields to be required, and given the context we can get away with not visually indicating they are required, just enforce via the HTML required attribute.

Layout suggestions

I'll leave this up to the developer working on this, but as a general suggestion I think the current Exhibits feedback form layout (in terms of the Bootstrap columns; the other aspects of the Exhibits form are old and not ones we want to copy) works well in terms of form size and responsiveness.

Basically, using col-md-offset-2 col-md-8 to place the form in the middle of the page with 2 empty columns on either side for whitespace. On desktop viewports that provides the right size form fields. Below desktop the form takes full-width, which is what we want.

Within that layout, 3 columns for the labels and 9 for the fields seems right. Again, feel free to ignore these suggestions if you think there's a better way (e.g., flexbox or something) to get the same visual layout.

Ideally the alert box is centered above the form, with the text left-aligned within the alert box. There should be about 20 or 24px vertical space between the alert box and the first input field (a bit more than current). If possible, the alert box might be in its own row above the rest of the form so long URLs could use the full page-width before wrapping. Though I doubt many URLs will be long enough to wrap on desktop with 8 columns.

If the user is not authenticated, the captcha goes ... where is currently is. So no new work required, just noting for reference:

Future related work

In case it's relevant when making the updates, we'd like this form layout to be our basic feedback form model for other SUL applications (some, like Searchworks, will have some minor additions, like the check status link, but otherwise should look very similar).