Text replacement using custom CSS not working

On a payment form, I am trying to replace the text "Payment Methods" with "Pay with debit or credit card". To do this, I am using custom CSS that was given to me by a Jotform support agent for another form:

label#label_85 {
 font-size: 14px; /* optional, style it if you like */
 visibility: hidden; /* hide the original text but keep the label element */
 position: relative;
}

label#label_85::after {
 content: "Pay with credit or debit card";
 visibility: visible;
 position: absolute;
 top: 0;
 left: 0;
}

This solution works perfectly on the build screen - I can see the text substitution. However, on the preview screen and on the live form, the text still appears as "Payment Methods".

Please advise how I can fix this - thanks!

Sara

PS The standard text here used to be "Pay with Credit Card" - it still appears that way on my older forms that were created before Jotform changed it. But the new text "Payment Methods" doesn't make any sense unless we are accepting multiple payment methods, which we don't want to do.

Hi Sara,

Thanks for reaching back out to Jotform Support. I'll be happy to assist you.

I understand you're having issues with the custom CSS styling code you were provided by one of our support agents previously. I can confirm what you're seeing on my end, as well, where the CSS code is able to change the "Payment Methods" header to "Pay with debit or credit card" when viewed in the builder, but upon previewing the form, it actually reverts back to "Payment Methods". Let's see if I can provide a modified version of the CSS code to get it working properly.

I added some slight modifications to your original CSS code below:

Original CSS code:

label#label_85 {

 visibility: hidden;

 position: relative;

}

label#label_85::after {

 content: "Pay with credit or debit card";

 visibility: visible;

 position: absolute;

 top: 0;

 left: 0;

}

Modified CSS code:

#label_85 {

 position: relative;

 font-size: 0 !important;  /* hides original words but keeps the label space */

}

#label_85::after {

 content: "Pay with debit or credit card";

 font-size: 14px;

 font-weight: 600;

 display: inline-block;

}

I updated the CSS so the original “Payment Methods” text is hidden by setting its font size to zero instead of using visibility settings. This keeps the label element visible for styling, so the replacement text reliably shows on the live form as well as in the builder.

I've tested this on my end and it looks like it works the way you intended it. Could you go back into your form and preview it yourself to confirm?

That did the trick - thank you so much!

I will save this snippet for future forms, but in the meantime, I hope you will escalate this issue to your design team. This bit of text either needs to be more appropriate for all payment options, or else needs to be editable by the person making the form without having to write code. I also know from my other forms that this element is not translatable on bilingual forms using the built-in translation tool.

Thanks again!

Sara

Thanks for confirming, Sara. Glad to hear it worked!

And I will definitely be bringing this to the necessary teams as a feature request as I absolutely see the hurdles and inconveniences that came with this solution.

If there is anything else you need assistance with, don't hesitate to reach back out.