Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Prevent empty heading in contact form #1515

Merged
merged 6 commits into from Mar 29, 2022
Merged

Prevent empty heading in contact form #1515

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b6f3609
Only render contact heading if not empty
kmeleta Mar 21, 2022
d7e03f6
Add fallback form heading
kmeleta Mar 24, 2022
1a6f10e
Move title string
kmeleta Mar 24, 2022
696ad7c
Update 21 translation files
translation-platform[bot] Mar 25, 2022
330db87
Update 3 translation files
translation-platform[bot] Mar 25, 2022
7616c28
Update 6 translation files
translation-platform[bot] Mar 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 2 additions & 1 deletion locales/bg-BG.json
View file
Open in desktop
Expand Up @@ -206,7 +206,8 @@
"send": "Изпрати",
"post_success": "Благодарим, че се свързахте с нас. Ще се свържем с вас възможно най-скоро.",
"error_heading": "Коригирайте следното:",
"phone": "Телефонен номер"
"phone": "Телефонен номер",
"title": "Формуляр за контакт"
}
},
"404": {
Expand Down
3 changes: 2 additions & 1 deletion locales/cs.json
View file
Open in desktop
Expand Up @@ -218,7 +218,8 @@
"comment": "Komentář",
"send": "Odeslat",
"post_success": "Děkujeme, že jste nás kontaktovali. Ozveme se vám co možná nejdříve.",
"error_heading": "Upravte prosím následující informace:"
"error_heading": "Upravte prosím následující informace:",
"title": "Kontaktní formulář"
}
},
"404": {
Expand Down
3 changes: 2 additions & 1 deletion locales/da.json
View file
Open in desktop
Expand Up @@ -206,7 +206,8 @@
"comment": "Kommentar",
"send": "Send",
"post_success": "Tak for din henvendelse. Vi kontakter dig hurtigst muligt.",
"error_heading": "Juster følgende:"
"error_heading": "Juster følgende:",
"title": "Kontaktformular"
}
},
"404": {
Expand Down
3 changes: 2 additions & 1 deletion locales/de.json
View file
Open in desktop
Expand Up @@ -206,7 +206,8 @@
"comment": "Kommentar",
"send": "Senden",
"post_success": "Danke, dass du uns kontaktiert hast. Wir werden uns so schnell wie möglich bei dir melden.",
"error_heading": "Bitte passe Folgendes an:"
"error_heading": "Bitte passe Folgendes an:",
"title": "Kontaktformular"
}
},
"404": {
Expand Down
3 changes: 2 additions & 1 deletion locales/el.json
View file
Open in desktop
Expand Up @@ -206,7 +206,8 @@
"comment": "Σχόλιο",
"send": "Αποστολή",
"post_success": "Ευχαριστούμε που επικοινωνήσατε μαζί μας. Θα σας απαντήσουμε το συντομότερο δυνατόν.",
"error_heading": "Προσαρμόστε τα παρακάτω:"
"error_heading": "Προσαρμόστε τα παρακάτω:",
"title": "Φόρμα επικοινωνίας"
}
},
"404": {
Expand Down
1 change: 1 addition & 0 deletions locales/en.default.json
View file
Open in desktop
Expand Up @@ -200,6 +200,7 @@
},
"contact": {
"form": {
"title": "Contact form",
"name": "Name",
"email": "Email",
"phone": "Phone number",
Expand Down
3 changes: 2 additions & 1 deletion locales/es.json
View file
Open in desktop
Expand Up @@ -206,7 +206,8 @@
"comment": "Comentario",
"send": "Enviar",
"post_success": "Gracias por contactarnos. Te responderemos lo antes posible.",
"error_heading": "Por favor, ajusta lo siguiente:"
"error_heading": "Por favor, ajusta lo siguiente:",
"title": "Formulario de contacto"
}
},
"404": {
Expand Down
3 changes: 2 additions & 1 deletion locales/fi.json
View file
Open in desktop
Expand Up @@ -206,7 +206,8 @@
"comment": "Kommentti",
"send": "Lähetä",
"post_success": "Kiitos, että otit yhteyttä. Palaamme asiaan mahdollisimman pian.",
"error_heading": "Mukauta seuraavat:"
"error_heading": "Mukauta seuraavat:",
"title": "Yhteydenottolomake"
}
},
"404": {
Expand Down
3 changes: 2 additions & 1 deletion locales/fr.json
View file
Open in desktop
Expand Up @@ -206,7 +206,8 @@
"comment": "Commentaire",
"send": "Envoyer",
"post_success": "Merci de nous avoir contactés. Nous vous répondrons dès que possible.",
"error_heading": "Veuillez ajuster les éléments suivants :"
"error_heading": "Veuillez ajuster les éléments suivants :",
"title": "Formulaire de contact"
}
},
"404": {
Expand Down
3 changes: 2 additions & 1 deletion locales/hr-HR.json
View file
Open in desktop
Expand Up @@ -212,7 +212,8 @@
"comment": "Komentar",
"send": "Pošalji",
"post_success": "Hvala vam na javljanju. Odgovorit ćemo vam u najkraćem mogućem roku.",
"error_heading": "Prilagodite sljedeće:"
"error_heading": "Prilagodite sljedeće:",
"title": "Obrazac za kontakt"
}
},
"404": {
Expand Down
3 changes: 2 additions & 1 deletion locales/hu.json
View file
Open in desktop
Expand Up @@ -206,7 +206,8 @@
"comment": "Hozzászólás",
"send": "Küldés",
"post_success": "Köszönjük, hogy írtál nekünk. A lehető legrövidebb időn belül válaszolni fogunk.",
"error_heading": "Kérjük, helyesbítsd a következőket:"
"error_heading": "Kérjük, helyesbítsd a következőket:",
"title": "Kapcsolattartói űrlap"
}
},
"404": {
Expand Down
3 changes: 2 additions & 1 deletion locales/id.json
View file
Open in desktop
Expand Up @@ -206,7 +206,8 @@
"comment": "Komentar",
"send": "Kirim",
"post_success": "Terima kasih sudah menghubungi kami. Kami akan segera menghubungi Anda.",
"error_heading": "Mohon sesuaikan:"
"error_heading": "Mohon sesuaikan:",
"title": "Formulir kontak"
}
},
"404": {
Expand Down
3 changes: 2 additions & 1 deletion locales/it.json
View file
Open in desktop
Expand Up @@ -206,7 +206,8 @@
"comment": "Commenta",
"send": "Invia",
"post_success": "Grazie per averci contattato. Risponderemo il prima possibile.",
"error_heading": "Correggi gli errori seguenti:"
"error_heading": "Correggi gli errori seguenti:",
"title": "Modulo di contatto"
}
},
"404": {
Expand Down
3 changes: 2 additions & 1 deletion locales/ja.json
View file
Open in desktop
Expand Up @@ -206,7 +206,8 @@
"comment": "コメント",
"send": "送信する",
"post_success": "お問い合わせいただきありがとうございます。早急に返信いたします。",
"error_heading": "以下を確認してください。"
"error_heading": "以下を確認してください。",
"title": "お問い合わせフォーム"
}
},
"404": {
Expand Down
3 changes: 2 additions & 1 deletion locales/ko.json
View file
Open in desktop
Expand Up @@ -206,7 +206,8 @@
"comment": "댓글",
"send": "보내기",
"post_success": "문의해 주셔서 감사드립니다. 최대한 빨리 답변드리겠습니다.",
"error_heading": "다음을 조정하십시오."
"error_heading": "다음을 조정하십시오.",
"title": "연락처 양식"
}
},
"404": {
Expand Down
3 changes: 2 additions & 1 deletion locales/lt-LT.json
View file
Open in desktop
Expand Up @@ -218,7 +218,8 @@
"comment": "Komentuoti",
"send": "Siųsti",
"post_success": "Dėkojame, kad su mumis susisiekėte. Atsakysime kaip galėdami greičiau.",
"error_heading": "Pakoreguokite toliau pateiktą informaciją."
"error_heading": "Pakoreguokite toliau pateiktą informaciją.",
"title": "Kontaktinė forma"
}
},
"404": {
Expand Down
3 changes: 2 additions & 1 deletion locales/nb.json
View file
Open in desktop
Expand Up @@ -206,7 +206,8 @@
"comment": "Kommentar",
"send": "Send",
"post_success": "Takk for at du kontaktet oss. Vi vil svare deg så snart som mulig.",
"error_heading": "Juster følgende:"
"error_heading": "Juster følgende:",
"title": "Kontaktskjema"
}
},
"404": {
Expand Down
3 changes: 2 additions & 1 deletion locales/nl.json
View file
Open in desktop
Expand Up @@ -206,7 +206,8 @@
"comment": "Reactie",
"send": "Sturen",
"post_success": "Bedankt dat je contact met ons hebt opgenomen. Je hoort zo snel mogelijk van ons.",
"error_heading": "Pas het volgende aan:"
"error_heading": "Pas het volgende aan:",
"title": "Contactformulier"
}
},
"404": {
Expand Down
3 changes: 2 additions & 1 deletion locales/pl.json
View file
Open in desktop
Expand Up @@ -218,7 +218,8 @@
"comment": "Komentarz",
"send": "Wyślij",
"post_success": "Dziękujemy za skontaktowanie się z nami. Skontaktujemy się z Tobą tak szybko, jak to możliwe.",
"error_heading": "Dostosuj następujące dane:"
"error_heading": "Dostosuj następujące dane:",
"title": "Formularz kontaktowy"
}
},
"404": {
Expand Down
3 changes: 2 additions & 1 deletion locales/pt-BR.json
View file
Open in desktop
Expand Up @@ -206,7 +206,8 @@
"comment": "Comentário",
"send": "Enviar",
"post_success": "Agradecemos seu contato. Retornaremos o mais rápido possível.",
"error_heading": "Ajuste o seguinte:"
"error_heading": "Ajuste o seguinte:",
"title": "Formulário de contato"
}
},
"404": {
Expand Down
3 changes: 2 additions & 1 deletion locales/pt-PT.json
View file
Open in desktop
Expand Up @@ -206,7 +206,8 @@
"comment": "Comentário",
"send": "Enviar",
"post_success": "Obrigado por entrar em contacto connosco. Responder-lhe-emos logo que possível.",
"error_heading": "Ajuste o seguinte:"
"error_heading": "Ajuste o seguinte:",
"title": "Formulário de contacto"
}
},
"404": {
Expand Down
3 changes: 2 additions & 1 deletion locales/ro-RO.json
View file
Open in desktop
Expand Up @@ -212,7 +212,8 @@
"comment": "Comentariu",
"send": "Trimiteți",
"post_success": "Vă mulțumim că ne-ați contactat. Vom lua legătura cu dvs. cât mai curând posibil.",
"error_heading": "Vă rugăm să ajustați următoarele:"
"error_heading": "Vă rugăm să ajustați următoarele:",
"title": "Formular de contact"
}
},
"404": {
Expand Down
3 changes: 2 additions & 1 deletion locales/ru.json
View file
Open in desktop
Expand Up @@ -218,7 +218,8 @@
"comment": "Комментарий",
"send": "Отправить",
"post_success": "Спасибо за обращение. Мы свяжемся с вами как можно скорее.",
"error_heading": "Измените следующие элементы:"
"error_heading": "Измените следующие элементы:",
"title": "Форма для связи"
}
},
"404": {
Expand Down
3 changes: 2 additions & 1 deletion locales/sk-SK.json
View file
Open in desktop
Expand Up @@ -218,7 +218,8 @@
"comment": "Komentár",
"send": "Odoslať",
"post_success": "Ďakujeme, že ste nás kontaktovali. Budeme sa vám venovať čo najskôr.",
"error_heading": "Upravte tieto údaje:"
"error_heading": "Upravte tieto údaje:",
"title": "Kontaktný formulár"
}
},
"404": {
Expand Down
3 changes: 2 additions & 1 deletion locales/sl-SI.json
View file
Open in desktop
Expand Up @@ -218,7 +218,8 @@
"comment": "Komentar",
"send": "Pošlji",
"post_success": "Hvala za vaše sporočilo. Z vami bomo v stiku takoj, ko bo mogoče.",
"error_heading": "Prilagodite naslednje:"
"error_heading": "Prilagodite naslednje:",
"title": "Obrazec za stik"
}
},
"404": {
Expand Down
3 changes: 2 additions & 1 deletion locales/sv.json
View file
Open in desktop
Expand Up @@ -206,7 +206,8 @@
"comment": "Kommentar",
"send": "Skicka",
"post_success": "Tack för att du kontaktar oss. Vi återkommer till dig så snart som möjligt.",
"error_heading": "Justera följande:"
"error_heading": "Justera följande:",
"title": "Kontaktformulär"
}
},
"404": {
Expand Down
3 changes: 2 additions & 1 deletion locales/th.json
View file
Open in desktop
Expand Up @@ -206,7 +206,8 @@
"comment": "ความคิดเห็น",
"send": "ส่ง",
"post_success": "ขอขอบคุณที่ติดต่อเรา เราจะติดต่อกลับไปหาคุณโดยเร็วที่สุด",
"error_heading": "โปรดแก้ไขข้อมูลดังต่อไปนี้:"
"error_heading": "โปรดแก้ไขข้อมูลดังต่อไปนี้:",
"title": "แบบฟอร์มการติดต่อ"
}
},
"404": {
Expand Down
3 changes: 2 additions & 1 deletion locales/tr.json
View file
Open in desktop
Expand Up @@ -206,7 +206,8 @@
"comment": "Yorum",
"send": "Gönder",
"post_success": "Bizimle iletişime geçtiğiniz için teşekkür ederiz. Mümkün olan en kısa sürede size dönüş yapacağız.",
"error_heading": "Lütfen aşağıdakileri düzenleyin:"
"error_heading": "Lütfen aşağıdakileri düzenleyin:",
"title": "İletişim formu"
}
},
"404": {
Expand Down
3 changes: 2 additions & 1 deletion locales/vi.json
View file
Open in desktop
Expand Up @@ -206,7 +206,8 @@
"comment": "Bình luận",
"send": "Gửi",
"post_success": "Cảm ơn đã liên hệ với chúng tôi. Chúng tôi sẽ liên hệ lại với bạn trong thời gian sớm nhất.",
"error_heading": "Vui lòng điều chỉnh các mục sau:"
"error_heading": "Vui lòng điều chỉnh các mục sau:",
"title": "Biểu mẫu liên hệ"
}
},
"404": {
Expand Down
3 changes: 2 additions & 1 deletion locales/zh-CN.json
View file
Open in desktop
Expand Up @@ -206,7 +206,8 @@
"comment": "评论",
"send": "发送",
"post_success": "感谢您联系我们。我们会尽快回复您。",
"error_heading": "请调整以下内容："
"error_heading": "请调整以下内容：",
"title": "联系表"
}
},
"404": {
Expand Down
3 changes: 2 additions & 1 deletion locales/zh-TW.json
View file
Open in desktop
Expand Up @@ -206,7 +206,8 @@
"comment": "留言",
"send": "傳送",
"post_success": "感謝您聯絡我們。我們會盡快回覆您。",
"error_heading": "請調整以下內容："
"error_heading": "請調整以下內容：",
"title": "聯絡表單"
}
},
"404": {
Expand Down
6 changes: 5 additions & 1 deletion sections/contact-form.liquid
View file
Open in desktop
Expand Up @@ -16,7 +16,11 @@

<div class="color-{{ section.settings.color_scheme }} gradient">
<div class="contact page-width page-width--narrow section-{{ section.id }}-padding">
<h2 class="title title-wrapper--no-top-margin {{ section.settings.heading_size }}">{{ section.settings.heading | escape }}</h2>
{%- if section.settings.heading != blank -%}
<h2 class="title title-wrapper--no-top-margin {{ section.settings.heading_size }}">{{ section.settings.heading | escape }}</h2>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On "Contact Us" templates only, remove the empty h2 element from the DOM. Keep the heading for "Contact Us" sections.

This contact-form.liquid file is used for the contact form section and the contact page template.
Adding this condition will remove the heading for sections and for page templates.

Something to consider is that there is no guarantee that a merchant will use the Contact us Title for the contact us page. The contact us template can also be assigned to multiple pages, other than the contact us page.

We could consider using a hidden h2 for sections when a merchant doesn't include a heading for the section.

<h2 class="visually-hidden">Contact us</h2>

^ This may be more verbose for a Contact us page assigned to the the contact us template. That said, this section can be added to other templates, unrelated to the contact us page, and it could be useful to add the hidden h2 to make the purpose of the form clearer.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could consider using a hidden h2 for sections when a merchant doesn't include a heading for the section.

Agreed. As is the same solution suggested in #1457.

Copy link
Contributor Author

@kmeleta kmeleta Mar 21, 2022 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see, yeah that makes sense. Would "Contact form" be acceptable language? I think this already exists as a translated string, where as "Contact us" does not, far as I'm aware.

edit: I'm wrong. I'd need to add one anyway.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could consider using a hidden h2 for sections when a merchant doesn't include a heading for the section.

Scott, just to clarify for Ken: you are aligned with always including the hidden h2 on templates and sections if no heading is included?

So instead of:

{%- if section.settings.heading != blank -%}
      <h2 class="title title-wrapper--no-top-margin {{ section.settings.heading_size }}">{{ section.settings.heading | escape }}</h2>
{%- endif -%}

We would use something like:

{% assign heading = section.settings.heading | default: "Contact us" %}
 <h2 class="{% if section.settings.heading %}title title-wrapper--no-top-margin {{ section.settings.heading_size }{% else %}visually-hidden{% endif %}">
  {{ heading | escape }}
</h2>

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The verbosity concern is fair. Is there a way to detect section vs template? If not no worries. I feel the need for a visually hidden h2 when a section title is empty outweighs the duplicate h1&h2 text on the contact page. It may be a little confusing at first but this also resolves the empty heading error detected.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

detect section vs template

Short answer: Yes.
We know that the contact-us.liquid is a section. It will always be used as a section.

We can check if a template is a page. For example, request.page_type can tell us that the template is a page. We can also check the template name with template.name --> page.contact. However, because the contact us page template can be assigned to multiple pages, I would recommend the duplicate heading, instead of conditionally removing it for this page template (Contact us).

If we use Contact form as the heading (as Ken suggested), there is less likely to be exactly the same heading as the page title, and would be useful in other template contexts. It's not ideal, but like you said "the need for a visually hidden h2 when a section title is empty outweighs the duplicate h1&h2 text on the contact page".

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we use Contact form as the heading (as Ken suggested), there is less likely to be exactly the same heading as the page title, and would be useful in other template contexts.

Good point. Let's roll with this.

{%- else -%}
<h2 class="visually-hidden">{{ 'templates.contact.form.title' | t }}</h2>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@martinamarien Is templates.contact.form the expected place for this to live? Being a a11y specific string I wasn't sure if it should go in the accessibility object instead (seen here d7e03f6)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Templates is perfectly fine.
I personally view the a11y strings are ones that are repurposed elsewhere in the theme.
For example: preview, next, close, skip, etc.

{%- endif -%}
{%- form 'contact', id: 'ContactForm', class: 'isolate' -%}
{%- if form.posted_successfully? -%}
<div class="form-status form-status-list form__message" tabindex="-1" autofocus>{% render 'icon-success' %} {{ 'templates.contact.form.post_success' | t }}</div>
Expand Down