Giving Forms and URL Parameters

Dynamically populate your Giving Form.

URL parameters are a great way to personalize the content displayed on a web page, or, in this case, a Giving Form.

For example, say you have a donor accessing one of your organization's pages that is geared toward a demographic in Pennsylvania.  By including a URL parameter in the link to the Giving Form, the Giving Form would then show Pennsylvania as the selected State, instead of requiring the donor to select a state.

Example of URL Parameters

The following would pre-populate a Giving Form with:

• State: New York
• City: New York

https://www.example.com/giving-form?state=NY&city=New%20York

The basics of it are that you begin the parameter statement with a ? at the end of the URL, i.e. the page name, then separate each subsequent parameter with an &.

Available Parameters

Important: Characters such as blank space, periods, and other punctuation will not be read by the URL parser unless formatted in a specific way.  For example, white space becomes %20, and a period becomes %2E.  For a full list of UTF-8 encoding, please refer to this helpful article from W3Schools.

Advanced Parameters

Most of the parameters listed above do not require much formatting.  However, there are a few that require some specific formatting.

Before we begin, something that will save you a lot of time configuring these parameters is this super-useful Chrome console command:

encodeURIComponent('your unformatted parameter goes here');

This will return a valid URL parameter.  For example, the above command would output this:

your%20unformatted%20parameter%20goes%20here

Now then, on to the fun stuff.

Frequency Options

Unformatted, the Frequency Options parameter would appear as an array of Strings:

frequency_options=["once","monthly","annually"]

That, when formatted, reads as follows:

frequency_options=%5B%22once%22%2C%22monthly%22%2C%22annually%22%5D

Gift Arrays

Unformatted/Non-Encoded:

gift_arrays=[11,12]

Formatted/Encoded:

gift_arrays=%5B11%2C12%5D

Designations (Multiple)

Unformatted/Non-Encoded:

designations=[
    "2736a9f5-0255-a196-a36b-0366637bdd44",
    "d61bf66b-7c01-d566-bf0e-058ac5cb0afa",
    "9cf29160-fd31-101b-bba9-8075b6f35786"
]

Formatted/Encoded (some scrolling required):

%5B%222736a9f5-0255-a196-a36b-0366637bdd44%22%2C%22d61bf66b-7c01-d566-bf0e-058ac5cb0afa%22%2C%229cf29160-fd31-101b-bba9-8075b6f35786%22%5D

Customer Meta

Non-Encoded, as a JSON object:

customer_meta = { 
    "META_1": "meta-value-here", 
    "META_2": "the-other-meta-value",
    "META-4": "where did meta 3 go?"
}

Encoded (some scrolling required):

%7B%22META_1%22%3A%22meta-value-here%22%2C%22META_2%22%3A%22the-other-meta-value%22%2C%22META-4%22%3A%22where%20did%20meta%203%20go%3F%22%7D

End Date

This one is probably the most involved.  It involves UTC formatting, a way of expressing dates and times as the milliseconds that have passed since the midnight of January 1, 1970.  So, obviously, this one should be a bit more of a challenge.  Let's start at the beginning.

Day, month, year.  Three basic pieces of data required to specify a date.  We now want to format that day, month, and year into UTC.  We will do so using JavaScript's built-in UTC tools.

Non-Encoded, as a month, day, and year:

February 15, 2026

Encoded as UTC:

1771113600000

Simple, right?  Here's how to translate:

var utcDate = Date.UTC(2026,1,15);

console.log(utcDate);
//Expected Output: 1771113600000

The only thing to watch out for here is that the months are numbered 0-11 instead of 1-12.  So, February would be 1, and January would be 0.  There is also the option to include hours, minutes, seconds, and even milliseconds, but for the sake of simplicity, we only need to be concerned with the data selectable on our Giving Form's Date Picker.