Skip to content

Commit 5e6d062

Browse files
frankierobertofrankieroberto
authored
Replace contact details with a form (#528)
This could be integrated with a back end service like ServiceNow. Notes: * when logged in, the user’s name, email and organisation (ODS code) will be automatically sent with the API request * for the logged out screen, the organisation field would be an autocomplete based on the ODS API (same as we already do in a few places, eg regional interface) * the file upload field is based on this, which will be added to NHS frontend early next year: nhsuk/nhsuk-frontend#1556 ## Screenshots ### Logged in <img width="2132" height="3806" alt="localhost_3000_contact-us" src="https://github.com/user-attachments/assets/61ca9860-cced-4749-9413-4c1c1e49b8f7" /> ### Logged out <img width="2132" height="4390" alt="localhost_3000_contact-us (1)" src="https://github.com/user-attachments/assets/ed63d3b0-2b38-4a00-a95c-bd549cb7ca9a" /> ### Confirmation <img width="2132" height="3806" alt="localhost_3000_contact-us" src="https://github.com/user-attachments/assets/0b0306f2-6a54-4376-a7de-9732e60b8b0b" />
1 parent 6bcb61a commit 5e6d062

File tree

3 files changed

+146
-6
lines changed

3 files changed

+146
-6
lines changed

‎app/views/contact-us-confirmation.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{% extends 'layout.html' %}
2+
3+
{% set pageName = "Vaccination saved" %}
4+
5+
{% block content %}
6+
<div class="nhsuk-grid-row">
7+
<div class="nhsuk-grid-column-two-thirds">
8+
9+
{% set panelHtml %}
10+
11+
{% endset %}
12+
13+
{{ panel({
14+
titleText: "Message sent",
15+
text: "You will receive a confirmation email"
16+
}) }}
17+
18+
<p>If you need to send additional information, you can reply to the email.</p>
19+
20+
<p>If you need help with a different issue, <a href="/contact-us">contact us again</a>.</p>
21+
22+
</div>
23+
</div>
24+
25+
{% endblock %}
26+

‎app/views/contact-us.html‎

Lines changed: 119 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,132 @@
11
{% extends 'layout.html' %}
22

3-
{% set pageName = "Contact us" %}
3+
{% set pageName = "Help and support" %}
44

55

66
{% block content %}
77
<div class="nhsuk-grid-row">
88
<div class="nhsuk-grid-column-two-thirds">
99

10-
<h1 class="nhsuk-heading-xl">{{ pageName }}</h1>
10+
<h1 class="nhsuk-heading-l">{{ pageName }}</h1>
1111

12-
<p>Telephone: <b>0121 611 0187</b> (select option 3)<br>
13-
Email: <a href="#">[email protected]</a></p>
12+
<p>Before contacting us, check our guidance on:</p>
1413

15-
<p>Monday to Friday: 8am to 6pm<br>Weekends: 8am to 4pm</p>
14+
<ul>
15+
<li><a href="https://guide.ravs.england.nhs.uk/record-vaccinations/">Recording a vaccination</a></li>
16+
<li><a href="https://guide.ravs.england.nhs.uk/managing-vaccines/">Managing vaccine batches</a></li>
17+
<li><a href="https://guide.ravs.england.nhs.uk/managing-users/">Managing users</a></li>
18+
<li><a href="https://guide.ravs.england.nhs.uk/records/">Editing and deleting records</a></li>
19+
<li><a href="https://guide.ravs.england.nhs.uk/reporting/">Reports</a></li>
20+
</ul>
21+
22+
<h2 class="nhsuk-heading-m">Contact us</h2>
23+
24+
25+
{% if not currentUser %}
26+
{{ input({
27+
label: {
28+
text: "Name",
29+
classes: "nhsuk-label--s"
30+
}
31+
}) }}
32+
33+
{{ input({
34+
label: {
35+
text: "Email",
36+
classes: "nhsuk-label--s"
37+
}
38+
}) }}
39+
40+
{% set options = [] %}
41+
{% set items = [{ text: "", value: ""}] %}
42+
43+
{% for organisation in data.allOrganisations | sort(false, false, "name") %}
44+
{% if organisation.type == "Community pharmacy" %}
45+
{% set items = (items.push({
46+
text: organisation.name + ", " + organisation.address + ", " + (organisation.address.postcode | upper) + " (" + organisation.id + ")",
47+
value: organisation.id,
48+
selected: (organisation.id === data.organisationId)
49+
}), items) %}
50+
{% endif %}
51+
{% endfor %}
52+
53+
{{ select({
54+
id: "organisation-id",
55+
name: "organisationId",
56+
label: {
57+
text: "Organisation (optional)",
58+
size: "s"
59+
},
60+
hint: {
61+
text: "Search by name or ODS code"
62+
},
63+
items: items,
64+
errorMessage: {
65+
text: (errors | first).text
66+
} if (errors | length)
67+
}) }}
68+
69+
{% endif %}
70+
71+
{% set options = [
72+
"Logging in",
73+
"Recording a vaccination",
74+
"Managing users",
75+
"Managing vaccines and batches",
76+
"Editing or deleting records",
77+
"Reports",
78+
"Payments",
79+
"Something else"
80+
] %}
81+
82+
{% set items = [] %}
83+
84+
{% for option in options %}
85+
{% set items = (items.push({text: option, value: option}), items) %}
86+
{% endfor %}
87+
88+
{{ radios({
89+
name: "supportTopic",
90+
fieldset: {
91+
legend: {
92+
text: "What do you need help with?",
93+
classes: "nhsuk-fieldset__legend--s"
94+
}
95+
},
96+
items: items
97+
}) }}
98+
99+
{{ textarea({
100+
name: "supportQuery",
101+
label: {
102+
text: "Details",
103+
classes: "nhsuk-label--s"
104+
},
105+
hint: {
106+
text: "Tell us more about the issue"
107+
}
108+
}) }}
109+
110+
111+
<label class="nhsuk-label nhsuk-label--s">Attachment (optional)</label>
112+
<div class="nhsuk-hint nhsuk-u-margin-bottom-3">For example, a screenshot</div>
113+
114+
<div style="background-color: #f0f4f5; border: 2px solid #768692; border-style: dashed; padding: 26px 26px 0 26px; margin-bottom: 40px;">
115+
<p class="nhsuk-body" style="background-color: rgba(216,221,224,.5); color: #212b32; margin-bottom: 16px; padding: 16px;">No file chosen</p>
116+
<div class="nhsuk-button-group">
117+
{{ button({
118+
text: "Choose file",
119+
classes: "nhsuk-button--secondary"
120+
}) }}
121+
<p>or drop file</p>
122+
</div>
123+
</div>
124+
125+
126+
{{ button({
127+
text: "Send message",
128+
href: "/contact-us-confirmation"
129+
}) }}
16130

17131
</div>
18132
</div>

‎app/views/layout.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
items: [
3333
{
3434
href: "/contact-us",
35-
text: "Contact us"
35+
text: "Help and support"
3636
},
3737
{
3838
href: "https://guide.ravs.england.nhs.uk/guide/",

0 commit comments

Comments
 (0)