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

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

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.

Let us know how it goes.

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.

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! 🙂

1 hour ago, melina said:

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

Your are welcome. Thank goodness for language translators on the web! 🙂

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 ! 

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

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 !!

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.

@creedon Dude !! Thank you SO much !! I am forever grateful !! 

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';
      
      }
      

    }
 

@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.

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

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.