Have you ever wanted to modify a CiviCRM contribution or event registration page?  Taken a look at those Smarty templates?  Doesn't look pretty does it.

In the article I describe how to easily add JQuery/javascript to any form you want and modify the page.

First, and hardest of all, is create a basic CiviCRM extension.  There is a program that will generate a basic extension that integrates with CiviCRM but doesn't yet add functionality.

Create an Extension

Visit the CiviCRM Wiki page for how to create a base Module Extension. http://wiki.civicrm.org/confluence/display/CRMDOC43/Create+a+Module+Extension

Once you have created your extension, you need to implement one CiviCRM hook to add your javascript file to the page of your choice.

I created an extension called com.skvare.testextend. The main php file to edit in this case is testextend.php.

CiviCRM hooks that you implement will start with the last part of the name: testextend

The function below implements hook_civicrmbuildForm. Notice the call to the function addScriptFile. This code will add the javascript file my_alter_contribform.js to any contribution page with an id of 2. The 'com.skvare.testextend' is the name of the extension I created.

function tctaextend_civicrm_buildForm($formName, &$form) { if($formName=='CRM_Contribute_Form_Contribution_Main'){ if($form->_id==2 ){ CRM_Core_Resources::singleton()->addScriptFile('com.skvare.testextend', 'my_alter_contribform.js'); } }

Thats all it takes to add javascript/jquery modifications to a CiviCRM form.

Here's an example of the javascript file with some simple modifications. Put your javascript file in the base directory of the extension, the same place where you see [youmodulename].php. In my case it was the directory with testextend in it.

This function changes the default text for the 'Other Amount' text field when you enable contributions on a contribution form. It also changes the text of the "Conbribute" button based on the membership section fieldset. The value for this fieldset label is set on the settings page for the contribution as the 'Title - New Membership' and 'Title - Renewals' fields on the Memberships tab. So if the user if getting a membership for the first time the button says "Join Now!". If the user is returning to the form to renew their membership the button says "Renew Now!" File my_alter_contribform.js:

/** * This is our closure - all of our code goes inside it * * This style of closure is provided by jquery and automatically * waits for document.ready. It also provides us with a local * alias of jQuery as $. * * ES5 specifies that the first line inside our closure * should be 'use strict'; */ /*jslint indent: 2 */ /*global CRM, cj, ts */ cj(function ($) { 'use strict'; // Variables declared here will be globally available within this closure //Change Other amount text box label $('.other_amount-section label').text("Other donation amount (optional)"); //Change Contribute button text to Join or Renew //for New Active Membership version of page if($('.membership-group #priceset legend').text()=="New Active Membership") { $('#_qf_Main_upload-bottom').attr('value', 'Join now!'); } // for Renew Active Membership version of page if($('.membership-group #priceset legend').text()=="Renewing Active Membership") { $('#_qf_Main_upload-bottom').attr('value', 'Renew now!'); } } });//end cj

Use your JQuery magical powers to your hearts content without having to mess with Smarty templates!