How can I change or delete the captions First Name and Last Name in forms?

The Squarespace code for the newsletter block has changed considerably since this question was originally posted in 2013 and many of the comments were added.

You'll find the latest solution (April 2019) for renaming (translating) the name labels here:

Translate the Squarespace Newsletter Block

-Paul

Squarespace Expert & Professional Developer

Contributors to this forum voluntarily give their time to help you. If we correctly answer your question, please accept the answer by clicking Accept below it (you'll see it when you're logged on). If an answer doesn't help, feel free to ask for more help or wait for other forum users to add their comments and/or answers.

Whenever an accepted answer helps you, please vote it up using the up arrow on the right. This helps other forum users by giving them confidence in an answer.

I’m not a developer, but this works for me. You need to inject code, though:

1. Go to the page where your form is located.
2. Open the Settings.
3. Click the Advanced tab.
4. Place the following code in the Page Header Code Injection area:

   <script>function addLoadEvent(func) { var oldonload = window.onload;if (typeof window.onload != 'function') {window.onload = func;} else {window.onload = function() {  if (oldonload) {    oldonload();  }  func();}}} addLoadEvent(function() {sqsFirstName = document.getElementsByClassName("caption")[0].innerHTML;myFirstName = sqsFirstName.replace("First Name", "Nombre");document.getElementsByClassName("caption")[0].innerHTML = myFirstName; sqsLastName = document.getElementsByClassName("caption")[1].innerHTML;myLastName = sqsLastName.replace("Last Name", "Apellidos");document.getElementsByClassName("caption")[1].innerHTML = myLastName;});</script>

Notes:

You need to replace YOURTAGFORFIRSTNAME and YOURTAGFORLASTNAME with your own text.

Since the script will only run “after” the page has been loaded, there will be a short period of time when you will be able to see the old tags, but they will be replaced immediately with the new ones.

Hope this saves time to other people. It’s been a nightmare.

Cheers.

I’ve come up with a much better option. This replaces all the different values (at least the ones I’m aware of) in your language. The example is in Spanish, but you can change it for any other values. Put this code in your code injection area (Footer) and link to jQuery. That’s all you need. Hope it helps.

<script>
function addLoadEvent(func) {
 var oldonload = window.onload;
 if (typeof window.onload != 'function') {
   window.onload = func;
 } else {
   window.onload = function() {
     if (oldonload) {
       oldonload();
     }
     func();
   }
 }
}

addLoadEvent(function() {

 $('.caption').each(function(i, el) {
   if($(el).html() != "" ) {
     $(el).html($(el).html().replace(/First Name/ig, "Nombre"));
   }
 });

 $('.caption').each(function(i, el) {
   if($(el).html() != "" ) {
     $(el).html($(el).html().replace(/Last Name/ig, "Apellidos"));
   }
 });

 $('.pagination').each(function(i, el) {
   if($(el).html() != "" ) {
     $(el).html($(el).html().replace(/Newer/ig, "Más recientes"));
   }
 });

 $('.pagination').each(function(i, el) {
   if($(el).html() != "" ) {
     $(el).html($(el).html().replace(/Older/ig, "Más antiguas"));
   }
 });

 $('.tags-cats').each(function(i, el) {
   if($(el).html() != "" ) {
     $(el).html($(el).html().replace(/tags/ig, "etiquetas"));
   }
 });

 $('.excerpt').each(function(i, el) {
   if($(el).html() != "" ) {
     $(el).html($(el).html().replace(/Read More/ig, "Leer más"));
   }
 });

 $('.sqs-comment-link.sqs-disqus-comment-link').each(function(i, el) {
   if($(el).html() != "" ) {
     $(el).html($(el).html().replace(/Comment/ig, "Comentario"));
   }
 });

 $('.post-meta.author-date').each(function(i, el) {
   if($(el).html() != "" ) {
     $(el).html($(el).html().replace(/January/ig, "Enero"));
   }
 });
 $('.post-meta.author-date').each(function(i, el) {
   if($(el).html() != "" ) {
     $(el).html($(el).html().replace(/February/ig, "Febrero"));
   }
 });
 $('.post-meta.author-date').each(function(i, el) {
   if($(el).html() != "" ) {
     $(el).html($(el).html().replace(/March/ig, "Marzo"));
   }
 });
 $('.post-meta.author-date').each(function(i, el) {
   if($(el).html() != "" ) {
     $(el).html($(el).html().replace(/April/ig, "Abril"));
   }
 });
 $('.post-meta.author-date').each(function(i, el) {
   if($(el).html() != "" ) {
     $(el).html($(el).html().replace(/May/ig, "Mayo"));
   }
 });
 $('.post-meta.author-date').each(function(i, el) {
   if($(el).html() != "" ) {
     $(el).html($(el).html().replace(/June/ig, "Junio"));
   }
 });
 $('.post-meta.author-date').each(function(i, el) {
   if($(el).html() != "" ) {
     $(el).html($(el).html().replace(/July/ig, "Julio"));
   }
 });
 $('.post-meta.author-date').each(function(i, el) {
   if($(el).html() != "" ) {
     $(el).html($(el).html().replace(/August/ig, "Agosto"));
   }
 });
 $('.post-meta.author-date').each(function(i, el) {
   if($(el).html() != "" ) {
     $(el).html($(el).html().replace(/September/ig, "Septiembre"));
   }
 });
 $('.post-meta.author-date').each(function(i, el) {
   if($(el).html() != "" ) {
     $(el).html($(el).html().replace(/October/ig, "Octubre"));
   }
 });
 $('.post-meta.author-date').each(function(i, el) {
   if($(el).html() != "" ) {
     $(el).html($(el).html().replace(/November/ig, "Noviembre"));
   }
 });
 $('.post-meta.author-date').each(function(i, el) {
   if($(el).html() != "" ) {
     $(el).html($(el).html().replace(/December/ig, "Diciembre"));
   }
 });

 $('.icon-comments').attr('title', 'Comentarios');

 $('.icon-share').attr('title', 'Compartir');

 $('.search-input.hover-effect').attr('placeholder', 'Buscar');

});
</script>

I don’t know if this will help you, because I don’t do the commerce thing.

After I changed the Last Name First Name in the Contact Form, I then realized that I ran into the same problem in a survey form, I needed to translate the Agree/Disagree choices.

Not being a coder, @groundcontact’s answer from August 24 was too complex, so I played with the August 19 answer and changed the LastName/First Name as I had done in my Contact Form, pasting the code to handle the response translations.

By looking for the ClassName in the page source, I then changed it to the class name I had found for the survey, and also changed the numbers in each “paragraph”.Notice that each class name starts in numbering from 0 and then continues on, when you move onto the next class name, you start re-numbering from 0, for example (classes and numbers are bolded):

sqsFirstName = document.getElementsByClassName("caption")[0].innerHTML;[ … ]document.getElementsByClassName("caption")[0].innerHTML = myFirstName; sqsLastName = document.getElementsByClassName("caption")[1].innerHTML;[ … ]document.getElementsByClassName("caption")[1].innerHTML = myLastName; [ We are now targeting a different class, "option",  so the numbering begins from "0" ]sqsRadio = document.getElementsByClassName("option")[0].innerHTML;[ … ]document.getElementsByClassName("option")[0].innerHTML = myRadio;

The result worked like a charm, hope it works for you.

1. Go to the page where your form is located.
2. Open the Settings > Advanced tab.
3. Paste the following code in the Page Header Code Injection area:

<script>
function addLoadEvent(func) {
 var oldonload = window.onload;
 if (typeof window.onload != 'function') {
   window.onload = func;
 } else {
   window.onload = function() {
     if (oldonload) {
       oldonload();
     }
     func();
   }
 }
} 
addLoadEvent(function() {  
 sqsFirstName = document.getElementsByClassName("caption")[0].innerHTML;
 myFirstName = sqsFirstName.replace("First Name", "Prénom");
 document.getElementsByClassName("caption")[0].innerHTML = myFirstName;

 sqsLastName = document.getElementsByClassName("caption")[1].innerHTML;
 myLastName = sqsLastName.replace("Last Name", "Nom");
 document.getElementsByClassName("caption")[1].innerHTML = myLastName;

 sqsRadio = document.getElementsByClassName("option")[0].innerHTML;
 myRadio = sqsRadio.replace("Strongly Disagree", "Fortement Désaccord");
 document.getElementsByClassName("option")[0].innerHTML = myRadio;

 sqsRadio = document.getElementsByClassName("option")[1].innerHTML;
 myRadio = sqsRadio.replace("Disagree", "Désaccord");
 document.getElementsByClassName("option")[1].innerHTML = myRadio;

 sqsRadio = document.getElementsByClassName("option")[2].innerHTML;
 myRadio = sqsRadio.replace("Neutral", "Neutre");
 document.getElementsByClassName("option")[2].innerHTML = myRadio;

 sqsRadio = document.getElementsByClassName("option")[3].innerHTML;
 myRadio = sqsRadio.replace("Agree", "d'Accord");
 document.getElementsByClassName("option")[3].innerHTML = myRadio;

 sqsRadio = document.getElementsByClassName("option")[4].innerHTML;
 myRadio = sqsRadio.replace("Strongly Agree", "Fortement d'Accord");
 document.getElementsByClassName("option")[4].innerHTML = myRadio;  
});
</script>

Hi,

How can I change the captions adress 1 and Adress 2, City, Zip Code, telephone in forms, I want to change language?

thanks

WOW! -- THANK YOU SO MUCH !!!!! It worked like a charm. I substituted the Spanish for Prénom and Nom in French. At first I had copy pasted into WORD to transfer to a second profile on my computer, and that did not work, so I copy pasted into NOTEPAD, saved it, switched profiles, and copy pasted from NOTEPAD into the Code injection area.

I seem to remember other pages that have "un-editable" areas, and will try to modify this script to adapt those.

Thanks again !!!! - Cragg

I don't know why I was unable to put all the code lines in the answer formatted as code, so half of the lines look like plain text, and the rest like code...sorry for that. Glad it worked for you. It took me a very long time to figure out :)

The first block of code formatting was getting swallowed up by the list that proceeds it. It must be a bug in the Markdown parser.

There’s a couple of workarounds. Manually enter the list tags (<ol><li>Item 1</li>…) – as I did with your answer.

Downside: Lots of markup!

Alternatively, start a newline at the end of the list, then another, add a non-breaking space ( ), two spaces and another newline. Now you can add a formatted code.

Downside: There’s now a big gap between the end of the list and the code.

Thank you for fixing it

Thank you. Been busy so had no time to reply.

Not being a programmer, I don’t know why this is better, since the Last Name First Name were corrected with your first solution, HOWEVER. this appears to be attacking the second area where I need to change the un-changeable, and that’s on a BLOG page where the publish date appears.

I tried using your first solution, and instead of using “caption” I used “published” and invented sqsdate and mydate instead of names. I used 0,1,2. It works on the first date only. Problem is in French I need to change May 1 2014 to “le 1 mai 2014” Does new code fix?

This is how the entry for the 2nd date looks like after I tried modifying your first code from the Last/FirstName:

sqsDate1 = document.getElementsByClassName("published")[1].innerHTML;
   myDate1 = sqsDate1.replace("August 7, 2014", "le 7 aout, 2014");
   document.getElementsByClassName("published")[1].innerHTML = myDate1;

IT WORKED, but only on first entry (the [0])

I thought that I could just keep adding a [1] [2] [3] etc. each time I published.

Does your new code address this? (By now it must be obvious that I am not a programmer!)

Thanks

I noticed if i click the “x” to exit the form and then reopen it, that text changes back to English. If I refresh the page and try to open the form it’s back in my language. And if i repeat and click the “x” again to exit the form and then open it again it’s back to English.

So this is a temporary solution, but I don’t see it as a problem since the form is opened once and then it’s filled and sent.

But I would love a permanent solution, so that if you click x to exit the form and then open it again the words wouldn’t change back to original.

Thanks!
Luka

@groundcontact – I’ve found an even easier way to fix funny formatting and edge cases with Markdown, just add in your own <pre><code> tags (and close them at the end).

What about the same thing but in the Checkout Page? I can change any form except this one. Believe it or not, I have customers having trouble to translate “Last Name” or “Shipping”.

Thanks!

@Cragg, I’ve put the <script> tags back in, formatted the code in your answer and added detail of where to add it. To format code, just highlight the lines of code and use the 5th button in the toolbar:

Hello,

Thanks for all this help for the contact form:)

I still find a problem to translate the text that appears when all the fields have not been filled,for example:"Your form has encountered a problem. Please scroll down to review.""Adresse Email is required.""Sujet is required.""Message is required."

If someone has an answer.... :)Thanks a lot:)Stella

Hi everybody!

I need some help.I don't know how to "link to jquery".I really need to fix this problem

Thanks in advance!okta

Hi everybody!

I need some help.I don't know how to "link to jquery".I really need to fix this problem

Thanks in advance!okta

Go to settings > advanced > Code Injection and in the Header section write the specific link from Google Developers Hosted Libraries:

https://developers.google.com/speed/libraries/

Thanks! worked like a charm

Thanks! worked like a charm

For some reasion that only changes the values of the first line - the next questions in the survey contain again the "strongly disagree" etc. options.

It worked for me too, but there is only another problem :-pWhen you click the "sending" button, the button transforms to "submitting" instead of the translated word. (there's no way to change the word "submitting" into the language you want)

Should this code worked to newsletter form too? It didn't work for me. :(

HiI have been able to get your (Cragg's) script working on my form for first name and second, but now would ideally like to use similar code on my events page.

How do you find out the ClassName of an object? When I inspect the page in chrome I do not see the same class names that you have used for first and last name! 'field first-name' vs 'sqsFirstName'. I'm probably looking at the wrong thing!

Specifcally on my events page I would like to change the displayed date as well as the linked text to 'view event' and 'map'.

Thanks :)

wow thanksbest solution i found, and it's already in french!now i just need to find a similar solution for the adress block (and i'm useless at programming)

many thanks!cheeers.f