# Designated Donation Forms

Expected Behavior
- On Page Load
- On Designation Change
Custom Text & Images

# Expected Behavior

# On Page Load

When a user loads a designated form, they are expected to see:

A background image that's defined for the donation form
No text above the gift amounts

# On Designation Change

When a user selects a valid desination:

A background image will change to the one specified, if it was defined
A text above the gift amounts, if one was defined for the specified designation id

When a user selects Select a program option:

A background image that's defined for the donation form
No text above the gift amounts

# Custom Text & Images

The text for each designation and images live in a PageBuilder reusables

reus_donation__designation - contains HTML for changing impact text and image per designation on designation change
reus_donation__designation_text_only - contains HTML for changing only the impact text on designation change
reus_donation__designation_images_only - contains HTML for changing only the image on designation change

Since designation ids are defined globally, their values will be the same throughout the site.

# Custom Background Image

The code was configured to:

Display a different background image based on the selected designation
Display different text with image based on the selected designation

This is done via HTML code in reus_donation__designation reus_donation__designation_images_only. Each code section that starts with <div class="don-designation" is associated with a specific designation via the designation id, that is HTML attribute data-designation-id="1069" is what associates the code block with the specific designation. For example data-designation-id="1069" will associate the code block with the designation with id 1069. To use the content for multiple designations specify multiple ids, separating values with a comma data-designation-id="1064,1065".

The HTML attribute data-bg-image= sets the background image for this specific designation. For example, data-bg-image="[[S80:staticAssetsBaseUrl]]/images/content/pagebuilder/empowerment2X.jpg"> will set an image empowerment2X.jpg from the PageBuilder library for the designation with id 1069.

Note, if the attribute is omitted, the form's default background image will be used.

# Custom Text

The code was configured to display 3 columns of text with images for each designation. The HTML code block that starts with <div class="don-designation__item defines one column.

As of 2024-01-29 there is no code that associates a specific text with a donation level, however, that may be added in the future. The association between a text time and a donation level ID would be associated via HTML attribute data-level-id. For example, <div class="don-designation__item" data-level-id="6414"> this will define a new item and associate it with the donation level with id 6414.

Sample code for one designation:

  <div class="don-designation"
    data-designation-id="1069"
    data-bg-image="[[S80:staticAssetsBaseUrl]]/images/content/pagebuilder/empowerment2X.jpg">
  <div class="don-designation__item don-designation--6409" data-level-id="6409">
    <picture class="don-designation__picture">
      <img class="don-designation__img" src="[[S80:staticAssetsBaseUrl]]/images/icons/plate-red.svg" alt="" />
    </picture>
    <div class="don-designation__text">
      $25 - can provide enough food to keep one child from going hungry for a month
    </div>
  </div>
  <div class="don-designation__item don-designation--6414" data-level-id="6414">
    <picture class="don-designation__picture">
      <img class="don-designation__img" src="[[S80:staticAssetsBaseUrl]]/images/icons/blanket.svg" alt="" />
    </picture>
    <div class="don-designation__text">
      $35 - can wrap seven warm, cozy blankets around children affected by conflict
    </div>
  </div>
  <div class="don-designation__item don-designation--6412" data-level-id="6412">
    <picture class="don-designation__picture">
      <img class="don-designation__img" src="[[S80:staticAssetsBaseUrl]]/images/icons/3-drops.svg" alt="" />
    </picture>
    <div class="don-designation__text">
      $50 - can provide water for over a month for three children at school
    </div>
  </div>
</div>

The code has been configured to allow for it the same image or html content to be reused across the designations, to keep HTML duplication to a minimum. Example code where all images are different, but the text is the same for 3 out of 4 designations.

 <!-- For designation 1065 Equality -->
  <div class="don-designation"
    data-designation-id="1065"
    data-bg-image="[[S80:staticAssetsBaseUrl]]/images/content/pagebuilder/equality2X.jpg">
  </div>
  <!-- For designation 1068 Peace -->
  <div class="don-designation"
    data-designation-id="1068"
    data-bg-image="[[S80:staticAssetsBaseUrl]]/images/content/pagebuilder/Peace_TeamTomorrow.jpg">
  </div>
  <!-- For designation 1064 Sustainability -->
  <div class="don-designation"
    data-designation-id="1064"
    data-bg-image="[[S80:staticAssetsBaseUrl]]/images/content/pagebuilder/sustainability2X.jpg">
  </div>

  <!-- Text for multiple designations -->
  <div class="don-designation"
    data-designation-id="1064,1065,1068">
    <div class="don-designation__item">
      <picture class="don-designation__picture">
        <img class="don-designation__img" src="[[S80:staticAssetsBaseUrl]]/images/icons/open-book-red.svg" alt="" />
      </picture>
      <div class="don-designation__text">
        $25 - can buy a baby's first collection of books, insipring a lifelong love of learning
      </div>
    </div>
    <div class="don-designation__item">
      <picture class="don-designation__picture">
        <img class="don-designation__img" src="[[S80:staticAssetsBaseUrl]]/images/icons/baby-clothes.svg" alt="" />
      </picture>
      <div class="don-designation__text">
        $35 - can provide three pregnant women with delivery kits for at-home birth
      </div>
    </div>
    <div class="don-designation__item">
      <picture class="don-designation__picture">
        <img class="don-designation__img" src="[[S80:staticAssetsBaseUrl]]/images/icons/water-tap.svg" alt="" />
      </picture>
      <div class="don-designation__text">
        $50 - can supply a home with a water filter, so children and families can have clean water
      </div>
    </div>
  </div>

# Customzing per Donation Form

Since the designation IDs are the same for all forms, the code should not be restricted per donation form. One may need to restrict the text per donation form, if there is a need to display a different text or images for the same designation on two different forms.

The content that appears after a braketed code will appear on a specific form only, in this case 0001.

[[?x0001x::x[[S120:dc:donFormId]]x::
<!--This content will appear only on form 0001-->
::
<!-- Global/default display for all forms -->
]]

If the content should appear on multiple forms the code can be customized as follows. The values 0001 and 0002 should be replaced with form ids. If the content is shared between more forms, the values can be extended as long as x appears between the numbers.

[[?x0001x0002x::x[[S120:dc:donFormId]]x::
<!--This content will appear only on forms 0001 & 0002 -->
::
<!-- Global/default display for all forms -->
]]

[[?x0001x0002x0003x0004x0005x::x[[S120:dc:donFormId]]x::
<!--This content will appear only on forms 0001, 0002, 0003, 0004, 0005 -->
::
<!-- Global/default display for all forms -->
]]

# Data for Profile and a Sync

As of November 2024 a custom text input named Issue has been added to the forms. The value of the input will be synced to the profile custom_string5. In order for this to work as expected the field must always be named Issue on the donation form. It can be hidden of visible input, the code will handle both cases.

← Tip-up authoring New teal design →