Wild Apricot has a terrific system to manage website content, integrated with various membership management, event and ecommerce forms and workflows. In certain situations, it may be necessary to modify a form field label on one or more built-in Wild Apricot forms. These forms have hard-coded field labels as part of the various system pages maintained in Wild Apricot. It is possible to add other gadgets including content to a system page, but it is not easily possible to modify the content, formatting, placement or design of any fields.
One common suggestion is to use theme overrides to fix this problem, but at NewPath, we don’t take kindly to theme overrides. They are not trivial to create and are reserved only for specialized programmers and theme designers. Theme overrides are best for bespoke themes that require pixel-perfect placement of design elements, but for simple label changes and layout changes in system pages, we recommend jQuery.
jQuery is a code library already used by Wild Apricot and loaded by default on every Wild Apricot website. It is a really powerful set of JavaScript functions that can modify any part of a web page, on the fly as soon as a web page loads.
The following code changes the labels on the form behind the “Send Message” button on a Wild Apricot member profile. In order to change the field labels (in the green boxes) we will modify the Email Member system page.
1. Add a Custom HTML gadget anywhere on the page
2. Select the Custom HTML gadget and click the Edit code button and copy and paste the code below into the editor. Click Save.
<script type="text/javascript">
jq$(document).ready(function(){$( ".fieldBody h4" ).text( "Send Referral" );$("#idMessageSubjectContainer .mandatoryLabel").text ("Subject of Referral");$("#idBodyContainer .mandatoryLabel").text ("Referral Information (include type of referral, contact information, and any other important information)");$("#idReplyNameContainer .mandatoryLabel").text ("Name of Referral");$("#idReplyEmailContainer .mandatoryLabel").text ("Email Address of Referral");});</script>
3. The field labels should instantly change. You can now Save the edited system page with the jQuery code snippet. If the labels did not change, check that you copied and pasted the code correctly into the Custom HTML gadget.
Using this technique it is possible to modify any hard-coded piece of text in any system page that is not easily accessible through the website page editor. One of the ideas we are tossing around is to create an easy to install code library that will allow easy customization of all labels and support mutli-lingual for Wild Apricot.
Note that the functionality of the underlying forms does not change in any way at all. Different labels may create alternative ways of thinking about the various functions. Similarly with this function the event registration, member signup and renewal, donations, store and just about all other parts of Wild Apricot can be modified.
