Translate the Squarespace Newsletter Block

A fully translated Newsletter Block in Spanish

A fully translated Newsletter Block in Spanish

Need a tutorial to translate a Squarespace Newsletter Block?

Welcome! This tutorial uses the Google Chrome browser (it’s free) and a set of (free) web development tools, called Chrome DevTools, that are built into Google Chrome. If you don’t already use Chrome, I recommend you download it before you continue. You can use any browser, but my guide may not be as easy to follow, especially if you are new to HTML. Fear not, once you have downloaded these tools, I’ll guide you through the process.

Introduction

Squarespace supports several languages including English, French, German, Italian, Portuguese and Spanish which makes it much easier to build a single-language website in these languages. However, this doesn’t help you build a multilingual Squarespace site, or a site in an unsupported language like Swedish or Dutch. In such circumstances, you’ll need to manually translate some of the fixed phrases used on the site.

Newsletter Block Settings - Title, Description and Disclaimer

Newsletter Block Settings - Title, Description and Disclaimer

When you’re adding a Newsletter Block, some many of the settings can be controlled in the Settings. For example, the Title, Description and the Disclaimer can easily be translated on the Display tab.

Advanced Settings including Submit Button Label and Post-Submit Message

Advanced Settings including Submit Button Label and Post-Submit Message

The Submit Button label and the Post-Submit Message can also be configured using the settings on the Advanced tab.

How can I change the fixed text?

As you’ve probably found, there are some aspects that you can’t control - the placeholder text in the text boxes, and the error message (if the mandatory email address field is blank). Your spanish form will look something like this:

newsletter-block-english-with-spanish-text.png

Of course this won’t happen if you’ve selected Spanish as the visitor language in Settings > Language & Region but if you want a multilingual site, or you want an unsupported language, read on. You’ll need to add some code to your site. If you need help, you can book a developer to help you.

Step-by-step

Here are the step-by-step instructions. The video below shows steps 1 to 4 being followed.

how-to-find-ID-of-newsletter-block.gif

1. Open the Chrome browser and navigate to the page of your website that contains the Newsletter Block.

2. Right-click the title of your Newsletter Block. If your Newsletter Block doesn’t have a title, right-click somewhere towards the top of the block.

3. The Developer Tools will appear, showing the code behind the elements on the page and the Newsletter Title will be highlighted. Scroll up though the code slightly to find a div element with the class newsletter-block. For example, on my page it looks like this:

<div class="sqs-block newsletter-block sqs-block-newsletter rendered"
 data-block-type="51" id="block-yui_3_17_2_1_1555416752596_3795">

4. Just below the newsletter-block class you will see an ID that is prefixed with block-yui. Copy the ID within the quote marks to the clipboard, or make a note of it. You’ll need it in step 8 below.

5. Close the Developer Tools window by clicking the X in the top-right corner (see screenshot below).

How to close Developer Tools

How to close Developer Tools

6. Navigate to Settings > Advanced > Code Injection. You’ll see several areas where code can be added. Ignore the first one called Header, and scroll to the next box labelled Footer.

7. In the Footer box, paste the following code:

<!--- Translate Newsletter Block ------------------------------------------>
<!--- Copyright SF Digital. Posting this code is illegal ------------------>
<script>
  // If Newsletter Block is on this page with ID 
  if (document.querySelector("#block-yui_here")) {
    // Translate the first name placeholder
    document.querySelector('.newsletter-form-field-element[name="fname"]').placeholder = 'Nombre';
    // Translate the second name placeholder
    document.querySelector('.newsletter-form-field-element[name="lname"]').placeholder = 'Apellido';
    // Translate the email address placeholder
    document.querySelector('.newsletter-form-field-element[name="email"]').placeholder='Correo Electrónico';    
  }
</script>  

8. Line 5 checks to see if this page is the one with the Newsletter Block that you want to translate, so you need to customise this for your page on your website. On the fifth line, substitute block-yui_here (the text within the double quotes) with the ID that you copied down earlier. It is important that you leave the # character inside the quotes. For example, if your ID was block-yui_3_17_2_1_1555416752596_3795 then instead of #block-yui_here you will now have #block-yui_3_17_2_1_1555416752596_3795 (without any breaks) like this:

if (document.querySelector("#block-yui_3_17_2_1_1555416752596_3795")) {

9. On line 6, change 'Nombre' to the translation you require. Note that to see this in the code above, you may need to scroll to the right.

10. On line 8, change 'Apellido' to the translation you require.

11. On line 10, change 'Correo Electrónico' to the translation you require for Email Address.

12. Save the changes. When you reload the page, the placeholders on the Newsletter Block should be correctly translated. That just leaves the error message to deal with.

Completed Newsletter Block when error message has been changed

Completed Newsletter Block when error message has been changed

To change the error message follow these steps.

1. Navigate to Design > Custom CSS.

2. Paste the following CSS into the Editor.

/* Newsletter Block Customisation */
#block-yui_here.newsletter-block .newsletter-form-field-wrapper.form-item.field.email.required.error .field-error {
  font-size: 0px;
}
#block-yui_here.newsletter-block .newsletter-form-field-wrapper.form-item.field.email.required.error .field-error:before {
  font-size: 12px;
  content: 'Your error message here.';
}

3. Edit both block_yui IDs so that they are the same as your block ID.

4. Edit the content in the penultimate line, changing 'Correo Electrónico es necessario.' to your preferred translation of ‘Email Address required.’ For example, on my site the CSS looks like this showing the block IDs and the new error message:

/* Newsletter Block Customisation */
#block-yui_3_17_2_1_1555416752596_3795.newsletter-block .newsletter-form-field-wrapper.form-item.field.email.required.error .field-error {
  font-size: 0px;
}
#block-yui_3_17_2_1_1555416752596_3795.newsletter-block .newsletter-form-field-wrapper.form-item.field.email.required.error .field-error:before {
  font-size: 12px;
  content: 'Correo Electrónico es necessario.';
}

5. Save your changes. Your Newsletter Block should now be translated.