Jump to content

Changing Input Headings on Lightbox Forms to Different Language

Go to solution Solved by Lesum,

Recommended Posts

Hello,

I need to change some of my form field input headings from English to Spanish. I was able to change some of them directly, using the "Edit Form Fields" feature, but there are some headings like "First Name" and "Last Name" which don't appear to be changeable, and I'm hoping this can be done with CSS code.

As an example, here's a page which contains two Lightbox forms: https://www.frjohnharvey.com/cofradia

If you scroll down to the first button that says "Abrir el formulario", you'll see it opens up a Lightbox form which has some fields that still need to be changed from English into Spanish. 

Can anyone advise me how to change those remaining form field headings from English into Spanish?

Thanks in advance for any help that can be provided! 🙂

(Note: Some of the other forms on my site are in English and are meant to remain in English)

Link to comment
  • Solution

@7TK You can try adding this code snippet under Custom CSS panel:

#collection-64f79ac25b5b893aaa092e3a {
.field.first-name .caption-text {
    visibility: hidden;
}
.field.first-name .caption-text:before {
    visibility: visible;
    content: "Nombre";
}
.field.last-name .caption-text {
    visibility: hidden;
}
.field.last-name .caption-text:before {
    visibility: visible;
    content: "Apellidos";
}

.address .field:nth-child(n+1) .caption-text {
      visibility: hidden;
}
.address .field:nth-child(2) .caption-text:before {
    visibility: visible;
    content: "País";
}
.address .field:nth-child(4) .caption-text:before {
    visibility: visible;
    content: "Dirección Línea 1 (required)";
}
.address .field:nth-child(6) .caption-text:before {
    visibility: visible;
    content: "Dirección Línea 2";
}
.address .field:nth-child(8) .caption-text:after {
    visibility: visible;
    content: "Ciudad (required)";
}
.address .field:nth-child(9) .caption-text:after {
    visibility: visible;
    content: "Provincia (required)";
}
.address .field:nth-child(10) .caption-text:after {
    visibility: visible;
    content: "Código Postal (required)";
}
}

This code will convert the form field input labels (first name, last name, country, address line 1, address line 2, city, state, and zip) from English to Spanish, but it will only affect the page you shared in your post.

Let me know how it goes. Thanks! 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

Thank you soooo much, Lesum! That worked! 😊🙏

I changed the word "required" to "obligatorio" in the code you posted, just so all the wording would be in Spanish.

Is there a way of changing "required" to "obligatorio" in every instance on the form? There are still a couple of places where the English word "required" appears (for example, beside the word "Nombre", "Direccion", etc.)

Thank you again for your assistance! 


 

Edited by 7TK
Link to comment

@7TK Great! Here's the updated code. You can remove the previous code and add this one:

#collection-64f79ac25b5b893aaa092e3a {
.field.first-name .caption-text {
    visibility: hidden;
}
.field.first-name .caption-text:before {
    visibility: visible;
    content: "Nombre";
}
.field.last-name .caption-text {
    visibility: hidden;
}
.field.last-name .caption-text:before {
    visibility: visible;
    content: "Apellidos";
}

.address .field:nth-child(n+1) .caption-text {
      visibility: hidden;
}
.address .field:nth-child(2) .caption-text:before {
    visibility: visible;
    content: "País";
}
.address .field:nth-child(4) .caption-text:before {
    visibility: visible;
    content: "Dirección Línea 1";
}
.address .field:nth-child(6) .caption-text:before {
    visibility: visible;
    content: "Dirección Línea 2";
}
.address .field:nth-child(8) .caption-text:after {
    visibility: visible;
    content: "Ciudad";
}
.address .field:nth-child(9) .caption-text:after {
    visibility: visible;
    content: "Provincia";
}
.address .field:nth-child(10) .caption-text:after {
    visibility: visible;
    content: "Código Postal";
}
span.description.required {
    visibility: hidden;
}
span.description.required:before {
    visibility: visible;
    content: "(obligatorio)";
}
}

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? 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.