Dynamic translation of Squarespace form error messages

More in Plugins, Scripting and Styling

Squarespace websites don't currently support localisation into non-English languages.

There are workarounds, using code injection and/or custom css that make it possible to localise a lot of the interface but, until now, there was no published solution for translating Squarespace form error messages.

Need expert help with Squarespace language localisation?

Get expert help with your Squarespace language localisation issues

The problem

When you load a Squarespace page that has a form on it, the error messages are not a part of the document. Instead, they are dynamically loaded by a validation script that runs when the form's submit button is pressed. 

This means that a simple script that runs on page load can't perform the translations, as the error messages are not yet a part of the page. 

The solution   

I wrote a script that fires off a listener when the Submit button is clicked.

This script checks every 100 milliseconds to see if an error field has become visible on the page.

If the script finds a visible error message  it steps through every error message on the page and swaps its English error message for the translated version. 

---

Demo 1 - Embedded form

Click submit without filling in the following form and you'll see the modified error messages.

---

Demo 2 - Lightbox form

Open the form then click submit without filling any fields and you'll see the modified error messages.

Open Form

Lightbox form

---

The Code

Code samples may be reused subject to certain conditions.

Notes -

1. The code will work to translate the error messages for this form in this Squarespace template. It's probable that other templates have different error messages that would require a script modification for the translations to be applied.  

2. Only the error messages are being translated here -the other form elements remain in English. 

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript">

var formposted=0;

// Form error message translation. 
// Enter your English error messages here (don't forget full stop at end of message)
var errorEN = [
'Your form has encountered a problem. Please scroll down to review.',
'Your form has encountered a problem. Please scroll up to review.',
'Name is required.',
'Emailaddress is required.',
'Subject is required.',
'Message is required.'
];


//Enter your translated error messages here in the same order as above
var errorTR = [
'Voilà! - Your form has encountered a problem. Please scroll down to review.',
'Voilà! - Your form has encountered a problem. Please scroll up to review.',
'Quel con! - Name is required.',
'Bof! - Email Address is required.',
'Quel Con! - Subject is required.',
'Bof! - Message is required.'
];


$(document).ready(function(){
    $('input.button, .lightbox-handle').click(function() {
        formposted=0;
        window.setInterval(errTranslate, 100);
    });
});

function errTranslate(){
    if(($(".field-error").is(':visible')) && (formposted==0)){
        $( ".field-error" ).each(function() {
            var errorText = $( this ).text();
            var numItems =  errorTR.length;
            for ( var i = 0; i < numItems; i++ ) {
                if (errorText == errorEN[i]) {$( this).text(errorTR[i] )};
            }
        });
        formposted = 1; 
    }
};

</script>

---

Need Help With Localising Your Squarespace Site?

Squarespace site localisation is a service I offer.  

Use the form above to find out how I can help. 

---