Add a Note field to your donation page

If you'd like to allow a donor to make a comment on a donation page, then read on!

The best solution is add a field that stores text into the Note field in a donation record.

Salsa does not have a built-in way to write data from a donation page from the donation Note field. If you'd like that capability, then please read on!

Solution

Campaign managers can't add the HTML for a Note field to a Salsa page for a technical HTML reason.  Doing that violates an HTML rule, and the results can be pretty messy.  The solution is to store the Note field in the template, then moved it to your donation page before the donor sees the page.

The solution is installed in two parts.  One part in the template used by donation pages, and another in each donation page that needs the Note field.

Template Installation

This process needs to be performed once, and only once, for each templates that is used by donation pages.  Here are some steps that you can use.

1. Edit the template.
2. Use the browser's search tool to locate the </body> tag.
3. Insert a blank line just before the </body> tag.
4. Click here to see the page where the solution lives.
5. Click the Raw button. A new window will open that contains just the solution.
6. Copy the contents of the window and close it.
7. Return to the template editor.
8. Paste the copied content into the newly inserted line in the editor.
9. Save the template.

Donation Page Installation

The donation page needs to have a special "marker" inserted to let the solution know that the donation page needs a Note field.  There are two versions of the marker.

The first version indicates the location where the Note field will go.

First Marker Version

<div id="need-donation-note"></div>

The solution finds the marker, then inserts the Notes field into it.  Here's an example of a marker in the Pre Submit Footer field:

This shows where the Note appears in the page:

Second marker version

The second version of the marker tag tells the solution to move the Note field somewhere else on the donation page.  This version of the marker tells the solution to move the note field before the credit card information:

<div id="need-donation-note" before="#credit_card_information"></div>

 Here's an example of how the donation page changes.

Customization

Modify the Note field's label to fit your needs.  

Here are some steps that you can use to modify the label for the Notes field.

1. Edit the template.
2. Locate the text "Let us know what you think." in the body of the template.

2. Change the highlighted text to the label that you need.
3. Save the template.

Change the appearance

The Note fields appearance can be modified by CSS (style) rulesets.  For example, this ruleset changes the label to be large and blue, reshapes the Notes field, gives it a light background and a distinctive font.

<style type="text/css">
  #donation-note {
    height: 100px;
    width: 300px;
    background-color: #F0F0F0;
    font-family: TimesRoman;
    font-size: 12pt;
  }
  label[for="donation-note"] {
    font-size: 12pt;
    color: darkblue;
  }
</style>

 Applying the style changes the Note area to this:

Questions?

If you have any questions, then please gather this information.

• Your organization_KEY
• Your chapter_KEY if you are in a chapter
• The donate_page_KEY of the modified donation page
• A screenshot

Send this information to support@salsalabs.com, and we'll be glad to help.