From f922c4ba2919b697150ecf0c0e5a55328b116ee7 Mon Sep 17 00:00:00 2001 From: Peter Crane Date: Wed, 8 Nov 2023 10:10:00 -0500 Subject: [PATCH] Update report-problem.md --- common-design-patterns/report-problem.md | 405 ++++++++--------------- 1 file changed, 144 insertions(+), 261 deletions(-) diff --git a/common-design-patterns/report-problem.md b/common-design-patterns/report-problem.md index 1a250b16db..f5370f4739 100644 --- a/common-design-patterns/report-problem.md +++ b/common-design-patterns/report-problem.md @@ -1,266 +1,156 @@ --- altLangPage: https://conception.canada.ca/configurations-conception-communes/signaler-probleme.html -date: null -dateModified: '2023-10-03' -description: null -title: Report a problem +date: 2023-10-03 +dateModified: 2023-10-03 +description: "We are decommissioning the Report a Problem pattern. We do not recommend adding this pattern to your pages." +title: "Report a problem" --- -
+

We are decommissioning the Report a Problem pattern. We do not recommend adding this pattern to your pages.

-

If you would like to collect feedback for specific web pages you can use the Page Feedback Tool (PFT) pattern. You should only add the PFT to pages where you plan to actively monitor and action feedback.

+

If you would like to collect feedback for specific web pages you can use the Page Feedback Tool (PFT) pattern. You should only add the PFT to pages where you plan to actively monitor and action feedback.

- -
-
+
+
-
-

- The Report a problem pattern allows people to provide feedback via a form for any problems they experience with the - web page they are on. -

-

- This pattern enables page-level feedback. When people click on the Report a problem button on this page, they are - presented with common issues to select using checkboxes. If none of these issues are applicable, they may select - “Other” to provide more details. -

-
-

- On this page -

- -
-
-

- When to use -

-

- Use this pattern to enable page-level feedback. -

-
-
-

- What to avoid -

-

- Ensure that the feedback you receive is actionable. If you can, avoid implementing a form where people cannot - give details on the issues they are experiencing. -

-
-
-

- How to implement -

-

- The button, label, placement and privacy statement are mandatory: -

-
    -
  • - the pattern is presented as a button using the - - button component styled for secondary - actions - - , which triggers a feedback form to expand when clicked -
    • -
  • - the label reads: “Report a problem on this page” -
    • -
  • - placement: positioned directly below the main content area, left-aligned -
    • -
  • - privacy statement: positioned within a dismissible overlay -
    • -
-

- The pattern for the contents of the feedback form is recommended. If meaningful data is not being received, a - mailto link can be used as an alternative. -

-

- - Sending the form: - - Make sure to replace the "#" placeholder in the form action line with whatever your - institution uses to collect the data from the form. Consider sending the form to a generic email inbox if you - don't have a server set up to handle this type of form. -

-
+
+

The Report a problem pattern allows people to provide feedback via a form for any problems they experience with the + web page they are on.

+

This pattern enables page-level feedback. When people click on the Report a problem button on this page, they are + presented with common issues to select using checkboxes. If none of these issues are applicable, they may select + “Other” to provide more details.

+
+

On this page

+ +
+
+

When to use

+

Use this pattern to enable page-level feedback.

+
+
+

What to avoid

+

Ensure that the feedback you receive is actionable. If you can, avoid implementing a form where people cannot + give details on the issues they are experiencing.

+
+
+

How to implement

+

The button, label, placement and privacy statement are mandatory:

+
    +
  • the pattern is presented as a button using the button component styled for secondary + actions , which triggers a feedback form to expand when clicked
    • +
  • the label reads: “Report a problem on this page”
    • +
  • placement: positioned directly below the main content area, left-aligned
    • +
  • privacy statement: positioned within a dismissible overlay
    • +
+

The pattern for the contents of the feedback form is recommended. If meaningful data is not being received, a + mailto link can be used as an alternative.

+

Sending the form: Make sure to replace the "#" placeholder in the form action line with whatever your + institution uses to collect the data from the form. Consider sending the form to a generic email inbox if you + don't have a server set up to handle this type of form.

+
-
-
- - Report a problem on this page - -
-
-
-
-
- - - Please select all that apply: - - -
- -
-
- - -
-
- -
-
- - -
-
- -
-
- - -
-
- +
+
+ Report a problem on this page +
+
+
+ +
+ Please select all that apply: +
+ +
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+

Privacy statement

+
+
+

Privacy statement

+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo + urna.

+
+
+ + +
+
+

Thank you for your help!

+

You will not receive a reply. For enquiries, please contact us.

+
-
- - -
-
- -
-
- - -
-
- -
-
- - -
-
-

- - Privacy statement - -

-
-
-

- Privacy statement -

-
-
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo - urna. -

-
-
- - -
-
-

- Thank you for your help! -

-

- You will not receive a reply. For enquiries, please - - contact us - - . -

-
-
-
-
-
+
+ +
-
-
- - Code - + +
+ Code 
<div class="row">
 	 <div class="col-sm-6 col-md-5 col-lg-4">
 	  <details class="brdr-0" open="">
@@ -326,12 +216,5 @@ title: Report a problem
 	  </details>
 	 </div>
 	</div>
-
-
- -

- - - - - + +