Answers.Body: <p>We have some examples of how to customize Contribution forms in our iATS Payments extension. Essentially the recipe involves: <code>buildForm hooks</code>, custom templates and <code>JavaScript</code>. I'll try and explain below how they all tie together:</p>
  
  <ol>
  <li><code>buildForm</code> hook</li>
  </ol>
  
  <p><a href="https://github.com/iATSPayments/com.iatspayments.civicrm/blob/master/iats.php#L285" rel="nofollow noreferrer">https://github.com/iATSPayments/com.iatspayments.civicrm/blob/master/iats.php#L285</a></p>
  
  <p>Here we check what form we're on (event, contribution, backend, frontend, etc.). For the main contribution page we're:</p>
  
  <pre><code>case 'CRM_Contribute_Form_Contribution_Main':
    $fname = 'iats_civicrm_buildForm_Contribution_Frontend';
  </code></pre>
  
  <ol start="2">
  <li><code>function iats_civicrm_buildForm_Contribution_Frontend(&amp;$form) {</code></li>
  </ol>
  
  <p><a href="https://github.com/iATSPayments/com.iatspayments.civicrm/blob/master/iats.php#L781" rel="nofollow noreferrer">https://github.com/iATSPayments/com.iatspayments.civicrm/blob/master/iats.php#L781</a></p>
  
  <p>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. </p>
  
  <pre><code>if (!empty($acheft[$form-&gt;_paymentProcessor['id']])){  
    iats_acheft_form_customize($form);
  </code></pre>
  
  <ol start="3">
  <li><code>function iats_acheft_form_customize($form) {</code></li>
  </ol>
  
  <p><a href="https://github.com/iATSPayments/com.iatspayments.civicrm/blob/master/iats.php#L612" rel="nofollow noreferrer">https://github.com/iATSPayments/com.iatspayments.civicrm/blob/master/iats.php#L612</a></p>
  
  <pre><code>$fname = 'iats_acheft_form_customize_'.$currency;
  </code></pre>
  
  <ol start="4">
  <li><code>function iats_acheft_form_customize_CAD($form) {</code></li>
  </ol>
  
  <p><a href="https://github.com/iATSPayments/com.iatspayments.civicrm/blob/master/iats.php#L660" rel="nofollow noreferrer">https://github.com/iATSPayments/com.iatspayments.civicrm/blob/master/iats.php#L660</a></p>
  
  <p>Here we addElement-s, addRule-s; setLabel-s:</p>
  
  <pre><code> $form-&gt;addElement('text', 'cad_bank_number', ts('Bank Number (3 digits)'));
   $form-&gt;addRule('cad_bank_number', ts('%1 must be of length 3.', array(1 =&gt; ts('Bank Number'))), 'rangelength', array(3,3));
   $element-&gt;setLabel(ts('Bank Number + Transit Number'));
  </code></pre>
  
  <p>and inject the CAD template:  </p>
  
  <pre><code>CRM_Core_Region::instance('billing-block')-&gt;add(array(
      'template' =&gt; 'CRM/iATS/BillingBlockDirectDebitExtra_CAD.tpl'
    ));
  </code></pre>
  
  <ol start="5">
  <li>In that <a href="https://github.com/iATSPayments/com.iatspayments.civicrm/blob/master/templates/CRM/iATS/BillingBlockDirectDebitExtra_CAD.tpl" rel="nofollow noreferrer">https://github.com/iATSPayments/com.iatspayments.civicrm/blob/master/templates/CRM/iATS/BillingBlockDirectDebitExtra_CAD.tpl</a></li>
  </ol>
  
  <p>We load js (to move the fields around):</p>
  
  <pre><code>&lt;script type="text/javascript" src="{crmResURL ext=com.iatspayments.civicrm file=js/dd_acheft.js}"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript" src="{crmResURL ext=com.iatspayments.civicrm file=js/dd_cad.js}"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>We inject a CAD Cheque image:  </p>
  
  <pre><code>&lt;div class="content"&gt;&lt;img width=500 height=303 src="{crmResURL ext=com.iatspayments.civicrm file=templates/CRM/iATS/CDN_cheque_500x.jpg}"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and render the fields we just created - e.g.:</p>
  
  <pre><code>  &lt;div class="crm-section cad-transit-number-section"&gt;
    &lt;div class="label"&gt;{$form.cad_transit_number.label}&lt;/div&gt;
    &lt;div class="content"&gt;{$form.cad_transit_number.html}&lt;/div&gt;
  </code></pre>
  
  <p>The js files are located here:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>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. </p>
  
  <p>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. </p>
  
  <p>End result for this example:
  <a href="https://i.sstatic.net/n4ALw.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/n4ALw.png" alt="enter image description here"></a></p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-05-20T01:24:33.773Z
Answers.Text: 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.
Answers.UserDisplayName: naomisl
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-05-20T01:37:03.897Z
Answers.Text: 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.
Answers.UserDisplayName: KarinG - Semper IT
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-05-20T00:18:14.240Z
Answers.LastActivityDate: 2016-05-20T01:34:25.897Z
Answers.LastEditDate: 2016-05-20T01:34:25.897Z
Answers.UserDisplayName: KarinG - Semper IT
Body: <p>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:</p>
  
  <ul>
  <li>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.</li>
  <li>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. </li>
  <li>We are using CiviDiscount, and I'd like to change the placement on the page and the language used for this as well.</li>
  </ul>
  
  <p>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? </p>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-05-20T01:11:11.177Z
Comments.Text: 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.
Comments.UserDisplayName: KarinG - Semper IT
Tags: <civicontribute><cividiscount><recurring-contributions><theme>
Title: Can you customize a contribution page?
ThreadText: # Can you customize a contribution page?
  
  (Asked by: username_0 on 2016-05-19)
  
  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?
  
  **Tags:** civicontribute, cividiscount, recurring-contributions, theme
  
  > **Comments:**
  > **username_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.  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2016-05-20. Score: 6 | Accepted answer
  
  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';
  
  ```
  
  2. `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);
  
  ```
  
  3. `function iats_acheft_form_customize($form) {`
  
  <https://github.com/iATSPayments/com.iatspayments.civicrm/blob/master/iats.php#L612>
  
  ```
  $fname = 'iats_acheft_form_customize_'.$currency;
  
  ```
  
  4. `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'
    ));
  
  ```
  
  5. 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](https://i.sstatic.net/n4ALw.png)](https://i.sstatic.net/n4ALw.png)
  
  > **Comments:**
  > **username_0**: 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.  
  > **username_1**: 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.  
  
  ---
  
  