I have a contribution form page that is primarily used by folks who want to sign up for membership, which in many cases does not require payment. I would like the button on the bottom, which currently shows a checkmark and the word "CONTRIBUTE", to say "SUBMIT". I have tried putting that as a Word Replacement, both with all lowercase and all uppercase, but without impact.

In fact, I am not sure Word replacements are working at all. They didn't work on a word I used in the body of a form, as a test, but that's not necessary, I can edit the word itself.

Any ideas? If Word Replacement will never work, can anyone point me to where the 'CONTRIBUTE" button text can be edited directly? Thanks! (Using CiviCRM with WordPress, current versions.)

2 Answers 2


Yes, Word Replacements does work for this. I replicated your issue as it is case sensitive. The helper text says:

IMPORTANT: Replacements are case-sensitive whether 'Exact Match' is checked or not.

To get it to work you need to enter it as Contribute in Propercase.

I referenced the value of it below as custom CSS styling could differ from the value: enter image description here

  • Of course! I tested with all upper and all lower; it didn't occur to me to test with Title Case (or "propercase") Thanks very much! . Commented Apr 11, 2020 at 0:32
  • Just be aware that this will replace all instances of 'Contribute' in CiviCRM including some that you may want to keep as they are. This can be quite unexpected e.g. you may end up with the likes of 'CiviSubmit'! Commented May 18, 2020 at 16:24

Here is an example of a CSS alternative that I am using. Colors and positioning will vary depending on your theme.

/* Change text color to background color of button to make original text invisible, and set button line height */
.crm-contribution-page-id-3 #_qf_Main_upload-bottom { color: #a3ce1e; line-height: 5px; } 
/* Add new text, format and reposition over original text */
.crm-contribution-page-id-3 #_qf_Main_upload-bottom:after { content: "Join"; text-indent: 0; display: block; color: #ffffff; position: relative; top: -9px; } 
/* Change text color of the check mark back to be visible */
.crm-contribution-page-id-3 .fa-check { color: #ffffff; }
/* Change original text color on hover to also be invisible */
.crm-contribution-page-id-3 #_qf_Main_upload-bottom:hover { color: #7ebb45; } 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.