10/18/2018

Modifying Text Labels on Wild Apricot Form Fields

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.

Email member system page

1. Add a Custom HTML gadget anywhere on the page

Custom html gadget

 

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>

Jquery code for email members

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.

Changed email members system page
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.

Comments

Verify your Comment

Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

Post a comment