7TK Posted September 15 Share Posted September 15 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 Lesum Posted September 15 Solution Share Posted September 15 @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! Taylor_Design and 7TK 1 1 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
7TK Posted September 16 Author Share Posted September 16 (edited) 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 September 16 by 7TK Link to comment
Lesum Posted September 16 Share Posted September 16 @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)"; } } 7TK and Taylor_Design 1 1 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
7TK Posted September 16 Author Share Posted September 16 Amazing! Thank you again, Lesum!! 👍 Lesum 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment