1

I have a contribution page set up for users to sign up for memberships. There are several ways in which the presentation could be better. To give some examples:

  • Users have the option of contributing in addition to membership. This is currently labeled "additional contribution" and I would like to change the title to reflect the fund they are contributing to.
  • Users have the option for auto-renewal. This auto-renewal box is currently under the "additional contribution" which makes it appear to the user that they will be billed the additional amount each month as well. I'd like to moveh te box to make it clearer.
  • We are using CiviDiscount, and I'd like to change the placement on the page and the language used for this as well.

Is all this customization something that can be done? How would you go about it? I'm in Drupal 7, and if there's a way to do this in webform I'm happy to, but I'm not sure how to include the discounts...thoughts?

  • 1
    Hey Naomi - I've tried to explain the recipe below - you definitively can't use webform_civicrm for this just yet (I see one of your tags is recurring-payments) - and can't do that yet in webform_civicrm. You currently also can't do a negative contribution amount (a discount) in webform_civicrm. Both of these I hope to be working on during the upcoming CiviCON sprint. – KarinG - Semper IT May 20 '16 at 1:11
5

We have some examples of how to customize Contribution forms in our iATS Payments extension. Essentially the recipe involves: buildForm hooks, custom templates and JavaScript. I'll try and explain below how they all tie together:

  1. buildForm hook

https://github.com/iATSPayments/com.iatspayments.civicrm/blob/master/iats.php#L285

Here we check what form we're on (event, contribution, backend, frontend, etc.). For the main contribution page we're:

case 'CRM_Contribute_Form_Contribution_Main':
  $fname = 'iats_civicrm_buildForm_Contribution_Frontend';
  1. function iats_civicrm_buildForm_Contribution_Frontend(&$form) {

https://github.com/iATSPayments/com.iatspayments.civicrm/blob/master/iats.php#L781

Let's say we have ACHEFT (debit) payment processor and currency is CAD - and we want to customize the contribution form - to use Canadian language for direct debit, display Canadian instructions and help the user fill out the fields by displaying a Canadian cheque image.

if (!empty($acheft[$form->_paymentProcessor['id']])){  
  iats_acheft_form_customize($form);
  1. function iats_acheft_form_customize($form) {

https://github.com/iATSPayments/com.iatspayments.civicrm/blob/master/iats.php#L612

$fname = 'iats_acheft_form_customize_'.$currency;
  1. function iats_acheft_form_customize_CAD($form) {

https://github.com/iATSPayments/com.iatspayments.civicrm/blob/master/iats.php#L660

Here we addElement-s, addRule-s; setLabel-s:

 $form->addElement('text', 'cad_bank_number', ts('Bank Number (3 digits)'));
 $form->addRule('cad_bank_number', ts('%1 must be of length 3.', array(1 => ts('Bank Number'))), 'rangelength', array(3,3));
 $element->setLabel(ts('Bank Number + Transit Number'));

and inject the CAD template:

CRM_Core_Region::instance('billing-block')->add(array(
    'template' => 'CRM/iATS/BillingBlockDirectDebitExtra_CAD.tpl'
  ));
  1. In that https://github.com/iATSPayments/com.iatspayments.civicrm/blob/master/templates/CRM/iATS/BillingBlockDirectDebitExtra_CAD.tpl

We load js (to move the fields around):

<script type="text/javascript" src="{crmResURL ext=com.iatspayments.civicrm file=js/dd_acheft.js}"></script>

<script type="text/javascript" src="{crmResURL ext=com.iatspayments.civicrm file=js/dd_cad.js}"></script>

We inject a CAD Cheque image:

<div class="content"><img width=500 height=303 src="{crmResURL ext=com.iatspayments.civicrm file=templates/CRM/iATS/CDN_cheque_500x.jpg}"></div>

and render the fields we just created - e.g.:

  <div class="crm-section cad-transit-number-section">
  <div class="label">{$form.cad_transit_number.label}</div>
  <div class="content">{$form.cad_transit_number.html}</div>

The js files are located here:

https://github.com/iATSPayments/com.iatspayments.civicrm/blob/master/js/dd_acheft.js
https://github.com/iATSPayments/com.iatspayments.civicrm/blob/master/js/dd_cad.js

In them you we do quite a few things - like move fields around and run some validations on the bank number and the transit numbers that were entered.

Hopefully these examples will be useful to you! I realize it's probably more than you bargained for! But once you get these techniques under control - you'll be able to gain full control over all your CiviCRM form pages.

End result for this example: enter image description here

  • Thank you for this detailed explanation! I'll definitely give it a shot though it's a good deal more "under the hood" than I've done before. – naomisl May 20 '16 at 1:24
  • Hey Naomi - I realize it's probably more than you bargained for! Don't hesitate to get back to us if you need a nudge. Very patient CiviCRM developers have shown me how this all puzzles together - happy to pay it fwd. – KarinG - Semper IT May 20 '16 at 1:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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