Translate Auto-Inserted Form Field Labels in Contact Form

Hi there,

I'm hoping to create a Spanish language version of a form and to localize some of the English-language text Squarespace automatically adds to form field labels (see attached). I read @paul2009's excellent answer from 2021, but wonder if Squarespace's architecture has changed since then, because I've tried variations (.innerHTML, .innerText, .createTextNode and .appendChild, putting the script in the header, footer, code block) and for the life of me I can't get it to work.

The localized form, definitely a work in progress, is at https://wearegoodmedicine.org/comparte-su-historia.
 

Thanks in advance for your help,

Prescott

On 7/11/2023 at 10:57 PM, HeyItsPrescott said:

I'm hoping to create a Spanish language version of a form. I...wonder if Squarespace's architecture has changed since then, because I've tried variations...and for the life of me I can't get it to work.

In May 2023, Squarespace replaced the Form Block with a new version. The selectors are now very different.

On 7/14/2023 at 1:52 PM, paul2009 said:

In May 2023, Squarespace replaced the Form Block with a new version. 

Hello,

Do you happen to know the new selectors ? It seems like they're hidden, because the translation with javascript does not work when using the selectors that the 'inspect' function of my brower gives me. 

18 hours ago, Greg_pns said:

Do you happen to know the new selectors?

Please see my post in this thread about some of the changes. 

Did this help? Please give feedback by clicking an icon below  ⬇️

On 9/28/2023 at 11:35 AM, Greg_pns said:

the translation with javascript does not work when using the selectors that the 'inspect' function of my brower gives me

@paul2009 I'm experiencing what Greg mentioned as well. No matter where and how I add this code, or any script attempting to translate these fields (specifically First Name and Last Name), it doesn't work. I've tried several solutions including yours, and read all your information about the updated classes; still no go.

Page I'm working on is here: https://lavender-disc-ta5j.squarespace.com/fr/contact-us

17 hours ago, Inscape said:

@Greg_pns and @HeyItsPrescott, I ended up solving this by using a CSS pseudo-element instead of a script. In custom CSS, added:

.field.first-name .caption-text {visibility:hidden}
.field.first-name .caption-text::before {content:"Prénom"; display:inline-block !important; visibility:visible !important;}

.field.last-name .caption-text {visibility:hidden}
.field.last-name .caption-text::before {content:"Nom de famille"; display:inline-block !important; visibility:visible !important;}

.description.required {visibility:hidden}
.description.required::before {content:"(requis)"; display:inline-block; visibility:visible}

Hope this helps!

Thanks for your reply ! 

I ended up asking chatgpt to write me a javascript snippet that detects if there is "fr" in the URL, and then change the fields through css - as I have a multilingual website. 

Here it is if it can help someone else : 

<script>
  // Get the current URL
  var currentUrl = window.location.href;

  // Check if the URL contains "/fr/"
  if (currentUrl.includes("/fr/")) {
    // Create a new style element
    var style = document.createElement('style');
    style.type = 'text/css';

    // Define the CSS rules with !important
    var css = `
/* First name - for /fr/ */
.field.first-name .caption-text {
visibility: hidden !important;
}
.field.first-name .caption-text:before {
visibility: visible !important;
content: "Prénom" !important;
}

/* Last name - for /fr/ */
.field.last-name .caption-text {
visibility: hidden !important;
}
.field.last-name .caption-text:before {
visibility: visible !important;
content: "Nom" !important;
}
`;

    // Add the CSS rules to the style element
    if (style.styleSheet) {
      style.styleSheet.cssText = css;
    } else {
      style.appendChild(document.createTextNode(css));
    }

    // Append the style element to the document's head
    document.head.appendChild(style);
  }
</script>

On 10/3/2023 at 7:46 AM, Greg_pns said:

javascript snippet that detects if there is "fr" in the URL, and then change the fields through css

That's great @Greg_pns! Looks like the same principle as my solution (using CSS pseudo-elements), with the ability to automatically detect whether the page is French. In my solution, I had previously added a class to all French pages which allowed me to target them in Custom CSS.

Success!! Thanks, @Inscape and @Greg_pns! Whether by CSS or JavaScript, both seem to do the trick ... thanks! | merci! | ¡gracias!