Custom CSS for Form captions no longer working

I have had Custom CSS changing the words on my Form's captions/headings for several months without issues. Now, the custom CSS code no longer seems to work. 

Here's what I currently have in my Custom CSS:

/* First name */
.field.first-name span.caption-text {
    visibility: hidden;
}
.field.first-name span.caption-text:before {
    visibility: visible;
    content: "First Name*";
}
/* last name */
.field.last-name span.caption-text {
    visibility: hidden;
}
.field.last-name span.caption-text:before {
    visibility: visible;
    content: "Zip Code*" !important;
}

I've even tried inserting/injecting it into the Header and Footer without help. Thanks in advance for your help

Hi,
Please share your website URL.

Best,
Leopold

https://calliope-beige-fae5.squarespace.com/

On 9/21/2023 at 11:06 AM, IXStudio said:

Hi,
Please share your website URL.

Best,
Leopold

https://calliope-beige-fae5.squarespace.com

Thanks in advance for your help!

On 9/26/2023 at 7:26 PM, trutinel said:

https://calliope-beige-fae5.squarespace.com

 

Thanks in advance for your help!

You can use this CSS code

.field.first-name .caption-text:after {
    content: 'Primeiro nome';
    font-size: 15px;
}
.field.last-name .caption-text:after {
    content: 'Sobrenome';
    font-size: 15px;
}
.caption-text, .sqs-block-form .field-list .description, .email .xHXC4uuk1CR_E981Erer {
    font-size: 0px !important;
}
span.description.required:after {
    content: '(obrigatória)';
    font-size: 15px !important;
    font: inherit;
}
.email .xHXC4uuk1CR_E981Erer:before {
    content: 'E-mail';
    font-size: 15px !important;
    font: inherit;
    padding-right: 1ex
}
form.react-form-contents > div .field-list p:after {
    content: 'Falha no envio do formulário. Revise as seguintes informações: Nome, Email, Telemóvel e Mensagem.';
    font-size: 14px !important;
    font: inherit;
    line-height: 21px
}

On 9/30/2023 at 7:34 PM, tuanphan said:

You can use this CSS code

.field.first-name .caption-text:after {
    content: 'Primeiro nome';
    font-size: 15px;
}
.field.last-name .caption-text:after {
    content: 'Sobrenome';
    font-size: 15px;
}
.caption-text, .sqs-block-form .field-list .description, .email .xHXC4uuk1CR_E981Erer {
    font-size: 0px !important;
}
span.description.required:after {
    content: '(obrigatória)';
    font-size: 15px !important;
    font: inherit;
}
.email .xHXC4uuk1CR_E981Erer:before {
    content: 'E-mail';
    font-size: 15px !important;
    font: inherit;
    padding-right: 1ex
}
form.react-form-contents > div .field-list p:after {
    content: 'Falha no envio do formulário. Revise as seguintes informações: Nome, Email, Telemóvel e Mensagem.';
    font-size: 14px !important;
    font: inherit;
    line-height: 21px
}

 

How do I replace the words "Last Name" instead of just adding words after those words?

On 10/6/2023 at 7:06 PM, trutinel said:

How do I replace the words "Last Name" instead of just adding words after those words?

Use this

.field.first-name .caption-text, .field.last-name .caption-text {
    visibility: hidden;
}
.field.first-name .caption-text:before, .field.last-name .caption-text:before {
    visibility: visible;
}
.field.first-name .caption-text:before {
    content: 'Primeiro nome';
    font-size: 15px;
}
.field.last-name .caption-text:before {
    content: 'Sobrenome';
    font-size: 15px;
}