Change email form tooltip text

[Emi5]

Good afternoon, 

I am trying to change the tooltip text for the email form (newsletter signup) specifically. My store language is Norwegian, but for some reason this specific tooltip is not translated. 

I've checked in the language editor (Online store -> Themes -> ... -> Edit default theme content), but I am not able to find this specific tooltip. I've also done some searching in the theme code without any luck. 

For some reason it feels like the solution is probably right in front of my nose, but I'm unable to see it. Hopefully some of you awesome forum wizards can show me!

This is how the tooltip looks in my store, which is Craft theme with minimal changes, when I hover over the input field:

And this is how it looks when I try to submit the form without any contents:

As you see, the text "Please fill out this field." is in English. I want to translate it to Norwegian.

[Emi5]

Thank you so much for being willing to help me with this, Digibuzz!

I am only using the default email signup form provided by Shopify in the Craft template, no other platforms or apps. If relevant, I only have the apps Inbox (for chat), Avada cookie consent (for cookie pop-up message) and Judge.me reviews (for customer product reviews) installed. I don't think any of them should do any changes regarding to the newsletter signup form.

[ThePrimeWeb · Accepted solution]

Hey @Emi5,

I am testing this on Dawn theme, so I don't know if you are on the same theme.

Change 1

Look for newsletter.liquid in your code files. Then look for the part that says

<input id="NewsletterForm--{{ section.id }}"

Mine is at line 58.

Then add the part as shown in the screenshot below and change the parts where it says "Enter whatever..." within the quotes

title="Enter whatever you want here for the hover part"
oninvalid="this.setCustomValidity('Enter whatever you want here for when you hit enter')"

Change 2

If this is the newsletter in the footer. Then look for footer.liquid

Again, look for the same

<input id="NewsletterForm--{{ section.id }}"

and add the part as shown in the screenshot below and change the parts where it says "Enter whatever..." within the quotes

title="Enter whatever you want here for the hover part"
oninvalid="this.setCustomValidity('Enter whatever you want here for when you hit enter')"

[Emi5]

It works! And what a fast reply! Thank you so much, ThePrimeWeb! 😄

[BrewBrains]

Hi @Emi5 ,

In order to change the text on hover and add custom text follow the steps below:

1) Edit code > newsletter.liquid 

2) add title="Custom text" (you can put whatever text you want to display) as shown in the screenshot below. 

 

But if you want it dynamic then some customization is required in the code.  You can add it to the Locales json file and use it like in screenshot below. 

Below is the screenshot for reference:

If you need any further assistance or have any queries, feel free to contact me. 

Was my reply helpful? Click Like to let me know!

Was your question answered? Mark it as an Accepted Solution and click like.