Jump to content

Translate First Namen and Last Name in contact form

Go to solution Solved by paul2009,

Recommended Posts

Hi, 
I'm using square space for the first time and I have never coded before so I hope you guys can help me.  I'm trying to translate the hard coded labels in the contact form on our web page https://padelakersberga.com/kontakt-1

I tried with this code, but it didnt work:

<script>  
  if (document.querySelector("#name-yui_3_17_2_1_1553888888520_3744")) {
    document.querySelector('.field-element field-control[name="fname"]').placeholder = 'Förnamn';
    document.querySelector('.field-element field-control[name="lname"]').placeholder = 'Efternamn';    
  }
</script>

Maybe I'm way off here, the code could be totally wrong, but I found some similar code while searching for answers so this is what I came up with. 

BR
Ted

Link to comment
  • Solution

Good attempt! Try adding this to Settings > Advanced > Code Injection > Footer instead:

<script>  
  if (document.querySelector('.form-item.fields.name')) {
    document.querySelector('.field.first-name .caption .caption-text').innerText = 'Förnamn';
    document.querySelector('.field.last-name .caption .caption-text').innerText = 'Efternamn'; 
  }
</script>

Note that like most answers, this is a simplified example and will only modify the captions on the first name field within a form.

  If this helps you, please click "Like" below  ⬇️

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 3 months later...

Hello @paul2009,

I have placed this version code

<script>  
  if (document.querySelector("#name-yui_3_17_2_1_1559593002966_3555")) {
    document.querySelector('.field.first-name .caption .caption-text').innerText = 'First name';
    document.querySelector('.field.last-name .caption .caption-text').innerText = 'Last name'; 
  }
</script>

in the PAGE HEADER CODE INJECTION of a certain page in order to only change it there, but nothing happened. Then I went on and put it onto the global footer code injection and then it change BUT unfortunately for all pages. I would like to have it only on my English contanct form.

Do you know how I can accomplish that? I am working on stelviopartners.com

thank you in advance for any kind of help, cris

Link to comment
33 minutes ago, Xbal said:

I would like to have it only on my English contact form. Do you know how I can accomplish that?

There are a number of ways to do this. The simplest way should be to add a Code Block to this page, placing it below the Form Block. Add the code to the Code Block instead. 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
46 minutes ago, Xbal said:

Which are the other ways if I may ask?

You can limit to the page by checking the collection ID or the page URL slug.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.