Jump to content

CSS code to change a few input fields into another language on form

Recommended Posts

Site URL: https://www.limanakistudios.com/gr/kante-kratisi

Hello, 

I would like the ability to change a few of the fields in my form to Greek. 

Specifically the word "Country" under Telephone number (which is written in Greek) to Greek and the dates MM DD YY to Greek as well. 

Also I'd like to change the first field input to First and Last name instead of the one line that it is now - so help with that would be nice as well! 

Thanks

URL: https://www.limanakistudios.com/gr/kante-kratisi

Link to comment

Add the following to Design > Custom CSS.

/* using LESS syntax */

#block-203e5042f22ee7ce9c6e {

  .phone .two-digits .caption-text,
  .date .two-digits .caption-text,
  .date .four-digits .caption-text

    {
  
      display: none;
    
      }

  .phone .two-digits .caption:after {

    content: 'Χώρα';
  
    }

  .date .month .caption:after {

    content: 'Μήνα';
  
    }

  .date .day .caption:after {

    content: 'Ημέρα';
  
    }

  .date .year .caption:after {

    content: 'Έτος';
  
    }
  }

To change Όνομα (Name) to Πρώτο και τελευταίο edit the form field.

1966360916_ScreenShot2020-12-28at1_02_16PM.png.773975f73370c89c276fb96e7fce2ce9.png

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
1 hour ago, creedon said:

Add the following to Design > Custom CSS.



/* using LESS syntax */

#block-203e5042f22ee7ce9c6e {

  .phone .two-digits .caption-text,
  .date .two-digits .caption-text,
  .date .four-digits .caption-text

    {
  
      display: none;
    
      }

  .phone .two-digits .caption:after {

    content: 'Χώρα';
  
    }

  .date .month .caption:after {

    content: 'Μήνα';
  
    }

  .date .day .caption:after {

    content: 'Ημέρα';
  
    }

  .date .year .caption:after {

    content: 'Έτος';
  
    }
  }

To change Όνομα (Name) to Πρώτο και τελευταίο edit the form field.

1966360916_ScreenShot2020-12-28at1_02_16PM.png.773975f73370c89c276fb96e7fce2ce9.png

Let us know how it goes.

Wow! This code worked perfectly! Thank you SO much for the swift response - my client was adamant about changing this ASAP.

Not to mention the perfect Greek, accents and all! 🙂

Link to comment

Hey there @creedon

I have a similar question but I can't seem to figure the code modification to apply it to my website. 

I also have a bilingual website (FR/EN). I am wondering how to change First And Last name to Prénom and Nom. I wanted to add an address field too but I ended up removing it because I just can't figure out how to edit the form. Address for Adresse, remove State for Province, etc. 

 

Here's my website : 

www.lesmenagers.ca/fr/contactez-nous

Password : HelloThere

Thank you so so much ! 

Link to comment
On 1/3/2021 at 3:25 PM, ElieGator said:

I also have a bilingual website (FR/EN). I am wondering how to change First And Last name to Prénom and Nom.

Add the following to Design > Custom CSS.

/*

  begin replace some english with french for FR contact form, using LESS
  syntax
  
  */
  
  #block-a0ec66e2a3de8bc6b96c {
  
    .address1 .caption-text,
    .address2 .caption-text,
    .city .caption-text,
    .country .caption-text,
    .first-name .caption-text,
    .last-name .caption-text,
    .state-province .caption-text
    
      {
      
        display: none;
        
        }
        
    .address1 .caption:after {
    
      content: 'Adresse 1';
      
      }
      
    .address2 .caption:after {
    
      content: 'Adresse 2';
      
      }
      
    .city .caption:after {
    
      content: 'Ville';
      
      }
      
    .country .caption:after {
    
      content: 'Pays';
      
      }
      
    .first-name .caption:after {
    
      content: 'Prénom';
      
      }
      
    .last-name .caption:after {
    
      content: 'Nom';
      
      }
      
    .state-province .caption:after {
    
      content: 'Province';
      
      }
    }
    
  /*
  
    end replace some english with french for FR contact form, using LESS syntax
    
    */

/* replace state/province with province in EN contact form, using LESS syntax */

#block-f1cd08edbf5ea9aab56a {

  .state-province .caption-text {
  
    display: none;
    
    }
    
  .state-province .caption:after {
  
    content: 'Province';
    
    }
  }

Let us know how it goes.

On 1/3/2021 at 3:25 PM, ElieGator said:

I wanted to add an address field too but I ended up removing it because I just can't figure out how to edit the form. Address for Adresse, remove State for Province, etc. 

If you put the address back in for a bit we can take a look at it and then perhaps provide a solution

Edited by creedon
version 2

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
On 1/3/2021 at 11:54 PM, creedon said:

Add the following to Design > Custom CSS.



/* replace some english with french for FR contact form, using LESS syntax */

#block-a0ec66e2a3de8bc6b96c  {

  .first-name .caption-text,
  .last-name .caption-text
  
    {
    
      display: none;
      
      }
      
  .first-name .caption:after {
  
    content: 'Prénom';
    
    }
    
  .last-name .caption:after {
  
    content: 'Nom';
    
    }
  }

Let us know how it goes.

If you put the address back in for a bit we can take a look at it and then perhaps provide a solution

Yay !! This is AMAZING !! Thank you so much !! OMG !! I wish I knew how to write this coding !! I need to take a CSS class !! 

It worked perfectly !! 

If I could do the same for the address it would be eeeepic !!!! 

I'd like to sub : 

Address 1 for Adresse 1

Address 2 for Adresse 2

City for Ville

State/Province for Province (actually if I could sub that on both FR and EN to just have Province, it would be the ultimate best)

Country for Pays

 

I am forever thankful and grateful for your help !! I must learn to do that !!

Edited by ElieGator
added precision
Link to comment
13 hours ago, ElieGator said:

If I could do the same for the address it would be eeeepic !!!! 

I updated my previous code posting.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 5 months later...
On 1/4/2021 at 5:54 AM, creedon said:

Add the following to Design > Custom CSS.

/*

  begin replace some english with french for FR contact form, using LESS
  syntax
  
  */
  
  #block-a0ec66e2a3de8bc6b96c {
  
    .address1 .caption-text,
    .address2 .caption-text,
    .city .caption-text,
    .country .caption-text,
    .first-name .caption-text,
    .last-name .caption-text,
    .state-province .caption-text
    
      {
      
        display: none;
        
        }
        
    .address1 .caption:after {
    
      content: 'Adresse 1';
      
      }
      
    .address2 .caption:after {
    
      content: 'Adresse 2';
      
      }
      
    .city .caption:after {
    
      content: 'Ville';
      
      }
      
    .country .caption:after {
    
      content: 'Pays';
      
      }
      
    .first-name .caption:after {
    
      content: 'Prénom';
      
      }
      
    .last-name .caption:after {
    
      content: 'Nom';
      
      }
      
    .state-province .caption:after {
    
      content: 'Province';
      
      }
    }
    
  /*
  
    end replace some english with french for FR contact form, using LESS syntax
    
    */

/* replace state/province with province in EN contact form, using LESS syntax */

#block-f1cd08edbf5ea9aab56a {

  .state-province .caption-text {
  
    display: none;
    
    }
    
  .state-province .caption:after {
  
    content: 'Province';
    
    }
  }

Let us know how it goes.

If you put the address back in for a bit we can take a look at it and then perhaps provide a solution

Hi Creedon.

It almost works for me too but the english text is still there - any idea why?.

Used this code:

 

/*

  begin replace some english with french for FR contact form, using LESS
  syntax
  
  */
  
 #block-b1105ae3a2021ce69b6e {
  

    .first-name .caption-text,
    .last-name .caption-text,

      
    .caption:after {
    
      content: 'Fornavn';
      
      }
      
    .last-name .caption:after {
    
      content: 'Efternavn';
      
      }
      

    }
 



Untitled-1.jpg.efb97e3fc7657d7f920ef9bbceba6728.jpg

 

Edited by Heidelberg
Link to comment

@Heidelberg

You are missing the first part of the code. The first ruleset in my code is the one that hides the english it is the one with the line.

Quote

display: none;

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
24 minutes ago, creedon said:

@Heidelberg

You are missing the first part of the code. The first ruleset in my code is the one that hides the english it is the one with the line.

Let us know how it goes.

Bingo! Thank you soooo much! 🙂

I have another much greater challenge for you, if you're up for it?. 😉
 😄

Do I just open up a new post and do a @creedon in the subject?.

/Bo

Link to comment
On 7/1/2021 at 11:01 AM, Heidelberg said:

I have another much greater challenge for you, if you're up for it?. 😉 😄

Do I just open up a new post and do a @creedon in the subject?.

If the post is unrelated to this post make a new post. I can't promise I can help as I don't know what the challenge is. If you want to ping me just put @creedon at the top of the body post.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.