Changing button labels

Using JavaScript, you can change the text that appears on various buttons on your Wild Apricot site.

Changing the Login label

Within log in button gadgets

A Login button appears within the log in button gadget.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/KJkdd6GBgJdrKaQbFE920iICurRIk1c9bNVLa7eiAqg/login button label1-gf0.png

You change the text appearing on the button to something else, such as "Sign in".

To change the Login button label on the log in button gadget, follow these steps:

  1. From the Website module, click the Settings option at the top of the screen, then click the Global JavaScript option (under Site settings).
  2. On the Global JavaScript screen that appears, copy and paste the following code:

    For Casefile themes
    <script type="text/javascript">
    jq$(document).ready(function(){
    jq$('.WaGadgetLoginButton .loginContainer.loginContainer .loginLink').html("Sign in");
    });
    </script>
    For all other themes
    <script type="text/javascript">
    jq$(document).ready(function(){
    jq$('.WaGadgetLoginButton .loginBoxLinkContainer .loginBoxLinkButton').html("Sign in");
    });
    </script>
    where Sign in can be changed to whatever label you want.
  3. Click Save.

The button will now appear with the new label you specified.

Within log in form gadgets

A Login button appears within the log in form gadget.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/YsShU1Rv3dfaLKYIZVksIqeURYjqHwfnU0Vp6cKhEWU/log in form gadget-8nE.png

You change the text appearing on the button to something else, such as "Sign in".

To change the Login  button label on the log in form gadget, follow these steps:

  1. From the Website module, click the Settings option at the top of the screen, then click the Global JavaScript option (under Site settings).
  2. On the Global JavaScript screen that appears, copy and paste the appropriate code for your theme.

    For Business Casual themes, copy this code:
    <script type="text/javascript">
    jq$(document).ready(function(){
     jq$('.WaGadgetLoginForm .loginBoxLoginButton').val("Sign in");
    });
    </script>
    For Aurora, Basic, Classic, Clouds, Dark, Glass, Keynote, Memo, Modern, Nature, Notebook, and Transparent themes, copy this code:
    <script type="text/javascript">
    jq$(document).ready(function(){
     jq$('.loginContainer .loginAction INPUT.loginButton').val("Sign in");
    });
    </script>
    For all other themes, copy this code:
    <script type="text/javascript">
    jq$(document).ready(function(){
     jq$('.WaGadgetLoginForm .loginContainerForm .loginAction input.loginButton').val("Sign in");
     jq$('.WaGadgetLoginForm .loginContainerWrapper .loginContainerInnerWrapper .loginLink').html("Sign in");
    });
    </script>

    and change both occurrences of "Sign in" to whatever label you want.
  3. Click Save.

The button will now appear with the new label you specified.

Within the Authorization required system page

Once a member clicks the button to log or sign in, the Authorization required system page appears.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/SCQR3gf9aG9mV0lraufdX4DedO2IsFNXgUDVH4pA9Og/authorization required system page-Qqw.png

To change the Login button that appears on this screen, follow these steps:

  1. From the Website module, click the Settings option at the top of the screen, then click the Global JavaScript option (under Site settings).
  2. On the Global JavaScriptscreen that appears, copy and paste the following code:
    <script type="text/javascript">
    jq$(document).ready(function(){
     jq$('.WaGadgetAuthorizationRequired .loginPageTable #idSubmitBox #idLoginButtonBox span input.loginButton').val("Sign in");
    });
    </script>
    where Sign in can be changed to whatever label you want.
  3. Click Save.

The system page will now display the button using the label you specified.

Changing the Renew button label

You can change the label for the Renew to button that appears within a member's Membership details tab.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/-s8RI-cLEggKDzpBv9W2ENYU94qLUOcBfFxHLI6sB4s/renew to button-74I.png

You can change the label separately for active members and for lapsed members.

To change the Renew to button label, follow these steps:

  1. From the Website module, click the Settings option at the top of the screen, then click the Global JavaScript option (under Site settings).
  2. For active members, copy and paste the following code:
    <script type="text/javascript">
     if (!top.adminpanel) {
     var renewLabel = document.getElementById('FunctionalBlock1_ctl00_ctl00_Membership_RenewalButton');
     if (renewLabel) {
     renewLabel.value = 'Renew now';
     }
     }
    </script>
    For lapsed members, copy and paste the following code:
    <script type="text/javascript">
     if (!top.adminpanel) {
     var renewLabel = document.getElementById('FunctionalBlock1_ctl00_ctl00_Membership_lapsedMessageBox_renewButton');
     if (renewLabel) {
     renewLabel.value = 'Renew Now';
     }
     }
    </script>
    where Renew now can be changed to whatever label you want.
  3. Click Save.

The button will now appear with the new label you specified.

Changing the Register button label

The Register button appears on the events calendar page and on the event details page. Using the Register button, visitors to your site can sign up for events.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/71QLkJTAAGvJLdn-fNGu0Ab1p4iw69fd2h_CXpfrsyk/register button-MVQ.png

You change the text appearing on the button to something else, such as "Sign up".

The code below changes the button label in public view, not admin view.

To change the Register button label on the events calendar page and the event details, follow these steps:

  1. From the Website module, click the Settings option at the top of the screen, then click the Global JavaScript option (under Site settings).
  2. Copy and paste the following code:
    <script type="text/javascript">
    if (!top.adminpanel){
    $(".boxActionContainer").find("input").val("Sign up");
    }
    </script>
    where Sign up can be changed to whatever label you want.
  3. Click Save.

The button will now appear with the new label you specified.

Changing the Registration is closed label

When an event is full, and a waitlist has not been enabled, the Register button will be replaced with a message saying Registration is closed on both the event calendar and the event details page.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/EhXH8sE-6zuTHNBVpb8GoxRenz-h88H3jwogvEDMVZI/registration is closed-6Co.png

To change this message to something else, such as "Sorry, no more room!", follow these steps:

  1. From the Website module, click the Settings option at the top of the screen, then click the Global JavaScript option (under Site settings).
  2. Copy and paste the following code:
    <script type="text/javascript">
    jq$(document).ready(function(){
     jq$('.infoRegistrationIsClosed').html('Sorry, no more room!');
    });
    </script>
    where Sorry, no more room! can be changed to whatever label you want.
  3. Click Save.

The message you specified will now appear in place of Registration is closed.

Changing the Add Guest button label

The Add guest button appears on an event registration form when you enable guest registrations and choose to collect information for each guest.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/sFyl1LRT7aVYvQdB9hl9q6p_j8qnTur_TFrz6xZhzd8/add guest button-UTM.png

You can change the text appearing on the button to something else, like "Add family member".

To change the Add guest button label, follow these steps:

  1. From the Website module, click the Settings option at the top of the screen, then click the Global JavaScript option (under Site settings).
  2. Copy and paste the following code:
    <script type="text/javascript">
     if (!top.adminpanel) { 
     var myPage = document.getElementById('idSectionGuestListContainer');
     if (myPage) {
     myPage.innerHTML = myPage.innerHTML.replace('Add guest', 'Add family member');
     }
     }
    </script>
    where Add family member can be changed to whatever label you want.
  3. Click Save.

The button will now appear with the new label you specified.

Changing the Pay button label

When a visitor to your site chooses to make a donation from a donations page, they click the Pay button.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/y2VtFMYblAucvKkCWKaQF0CuiLZaZFd3gVRfTol7V5I/donation pay button-pV4.png

You can change the text appearing on the Pay button to something else, like "Donate".

To change the Pay button label, follow these steps:

  1. From the Website module, click the Settings option at the top of the screen, then click the Global JavaScript option (under Site settings).
  2. Copy and paste the following code:
    if (!top.adminpanel) {
     var myPage = document.getElementById('FunctionalBlock1_ctl00_donation_ctl00_stepTemplate_next');
     if (myPage) {
     myPage.value = 'Donate';
     }
     }
    where DonationGadgetHTMLID is replaced by the HTML ID of your donation gadget, and Donate can be changed to whatever label you want. For instructions on locating a gadget's HTML ID, click here.
  3. Click Save.

The button will now appear with the new label you specified.

Changing the Send Message button label

From a member directory, visitors can email a member by clicking the Send message button from the member profile screen.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/UkVJCb2G6f8ohc6paeWkgd5ErlwI9gV3TrctRoBFc5E/send message button-TRQ.png

You can change the text appearing on the button to something else, like "Email me".

To change the Send message button label, follow these steps:

  1. From the Website module, click the Settings option at the top of the screen, then click the Global JavaScript option (under Site settings).
  2. Copy and paste the following code:
    <script type="text/javascript">
     if (!top.adminpanel) {
     var sendMessage = document.getElementById('FunctionalBlock1_ctl00_ctl00_memberProfile_profileHeader_idSendEmailButton');
     if (sendMessage) {
     sendMessage.value = 'Email me';
     }
     }
    </script>
    where Email me can be changed to whatever label you want.
  3. Click Save.

The button will now appear with the new label you specified.

Search: WildApricot.com 

About results ( seconds) Sort by: 
Sorry, an error occured when performing search.
Powered by Zendesk