All Collections
Website
Theming
Form customization
How to request custom donation fields on a donation page
How to request custom donation fields on a donation page

This HOWTO assumes you understand the complexity of using custom fields and have already created custom donation fields.

Updated over a week ago

šŸ“Œ Note: Custom Fields are available as add-ons. For more information on adding new features please see the add-ons page in your nation.

Table of Contents

šŸ“Œ Note: You must look through all the code below and replace 'slug' with the slug of your nation.

Custom donation fields are requested automatically on new donation pages. This HOWTO provides the code that requests all custom donation fields and describes ways to limit the custom donation fields requested.

Only donation pages can request custom donation fields. No other page type can request or display custom donation fields.

It is possible to limit the number of custom donation fields requested on a donation page. First, you will need to remove the code that requests all custom donation fields. Then, you can either insert requests for individual fields or for types of fields.

Liquid included in all donation pages

By default, donation pages automatically request all custom donation fields. If you want to replace this code, you will first need to find and remove it from the page template.

šŸ“Œ Note: You must look through all the code below and replace 'slug' with the slug of your nation.

{% for cf in custom_fields.donation %}

{% assign custom_field = cf[1] %}
{% assign custom_field_id = 'custom_values.' | append: custom_field.slug %}

<div class="row-fluid">
Ā  <div class="span12">

Ā  Ā  {% if custom_field.is_text? or custom_field.is_number? %}
Ā  Ā  Ā  <label for="donation_custom_values_{{ custom_field.slug }}_custom">{{ custom_field.name }}</label>
Ā  Ā  Ā  {% text_field custom_field_id, class:"text" %}

Ā  Ā  {% elsif custom_field.is_boolean? %}
Ā  Ā  Ā  <label class="checkbox" for="donation_custom_values_{{ custom_field.slug }}_custom">{% check_box custom_field_id, class:"checkbox" %} {{ custom_field.name }}</label>

Ā  Ā  {% elsif custom_field.is_multiple_choice? %}
Ā  Ā  Ā  <label for="donation_custom_values_{{ custom_field.slug }}_custom">{{ custom_field.name }}</label>
Ā  Ā  Ā  {% collection_select custom_field_id, custom_fields.donation[custom_field.slug].multiple_choice_options, class:"select" %}
Ā  Ā  {% endif %}

Ā  </div>
</div>

{% endfor %}

The above code to request all custom donation fields appears directly below the code that adds employer fields to the donation page. Whether employer fields are displayed is determined by the settings in the payment processor attached to the donation page.

Liquid to display individual custom donation fields

The Liquid code needed for each custom donation field type is listed here:

šŸ“Œ Note: You must look through all the code below and replace 'slug' with the slug of your nation.

  • text: {% text_field ā€œcustom_values.slugā€ %}

  • number: {% text_field ā€œcustom_values.slugā€ %}

  • check box: {% check_box ā€œcustom_values.slugā€ %}

  • multiple choice: {% collection_select ā€œcustom_values.slugā€, custom_fields.donation.slug.multiple_choice_options %}

To make a text or number field required, you can add the HTML5 required attribute, as follows:
{% text_field "custom_values.slug", required: "required" %}

Request only one type of custom donation field

It is possible to request only custom donation text fields.

šŸ“Œ Note: You must look through all the code below and replace 'slug' with the slug of your nation.

{% for cf in custom_fields.donation %}

{% assign custom_field = cf[1] %}
{% assign custom_field_id = 'custom_values.' | append: custom_field.slug %}

<div class="row-fluid">
Ā  <div class="span12">

Ā  Ā  {% if custom_field.is_text? %}
Ā  Ā  Ā  <label for="donation_custom_values_{{ custom_field.slug }}_custom">{{ custom_field.name }}</label>
Ā  Ā  Ā  {% text_field custom_field_id, class:"text" %}
Ā  Ā  {% endif %}

Ā  </div>
</div>

{% endfor %}

It is possible to request only custom donation number fields.

Ā {% for cf in custom_fields.donation %}

{% assign custom_field = cf[1] %}
{% assign custom_field_id = 'custom_values.' | append: custom_field.slug %}

<div class="row-fluid">
Ā  <div class="span12">

Ā  Ā  {% if custom_field.is_number? %}
Ā  Ā  Ā  <label for="donation_custom_values_{{ custom_field.slug }}_custom">{{ custom_field.name }}</label>
Ā  Ā  Ā  {% text_field custom_field_id, class:"text" %}
Ā  Ā  {% endif %}

Ā  </div>
</div>

{% endfor %}

It is possible to request only custom donation multiple choice fields, which includes yes/no fields.

{% for cf in custom_fields.donation %}

{% assign custom_field = cf[1] %}
{% assign custom_field_id = 'custom_values.' | append: custom_field.slug %}

<div class="row-fluid">
Ā  <div class="span12">

Ā  Ā  {% if custom_field.is_multiple_choice? %}
Ā  Ā  Ā  <label for="donation_custom_values_{{ custom_field.slug }}_custom">{{ custom_field.name }}</label>
Ā  Ā  Ā  {% collection_select custom_field_id, custom_fields.donation[custom_field.slug].multiple_choice_options, class:"select" %}
Ā  Ā  {% endif %}

Ā  </div>
</div>

{% endfor %}

It is possible to request only custom donation true / false fields.

{% for cf in custom_fields.donation %}

{% assign custom_field = cf[1] %}
{% assign custom_field_id = 'custom_values.' | append: custom_field.slug %}

<div class="row-fluid">
Ā  <div class="span12">

Ā  Ā  {% if custom_field.is_boolean? %}
Ā  Ā  Ā  <label class="checkbox" for="donation_custom_values_{{ custom_field.slug }}_custom">{% check_box custom_field_id, class:"checkbox" %} {{ custom_field.name }}</label>
Ā  Ā  {% endif %}

Ā  </div>
</div>

{% endfor %}

Limiting the number of custom donation fields requested

šŸ“Œ Note: You must look through all the code below and replace 'slug' with the slug of your nation.

Using the liquid limit and offset filters, you can easily control how many fields of a certain time are called to the page the code is placed on. Add the phrase "limit:#" and "offset:#" to the 'forloop' you're using to call the custom fields.

Limit the number of custom donation fields requested using the limit filter. The order of the fields requested is determined by the order they are listed in Settings > Defaults > Custom fields > Donations. You can skip fields and not request them by using the offsetting filter. The request begins at a different point than the first listed field (e.g. offset:1 begins requesting fields after skipping 1 field, offset:2 would skip 2 fields, etc).

Request the first 2 custom donation fields.

{% for cf in custom_fields.donation limit:2 %}
<!-- Limit output of custom fields to 2 total -->

{% assign custom_field = cf[1] %}
{% assign custom_field_id = 'custom_values.' | append: custom_field.slug %}

<div class="row-fluid">
Ā  <div class="span12">

Ā  Ā  {% if custom_field.is_text? or custom_field.is_number? %}
Ā  Ā  Ā  <label for="donation_custom_values_{{ custom_field.slug }}_custom">{{ custom_field.name }}</label>
Ā  Ā  Ā  {% text_field custom_field_id, class:"text" %}

Ā  Ā  {% elsif custom_field.is_boolean? %}
Ā  Ā  Ā  <label class="checkbox" for="donation_custom_values_{{ custom_field.slug }}_custom">{% check_box custom_field_id, class:"checkbox" %} {{ custom_field.name }}</label>

Ā  Ā  {% elsif custom_field.is_multiple_choice? %}
Ā  Ā  Ā  <label for="donation_custom_values_{{ custom_field.slug }}_custom">{{ custom_field.name }}</label>
Ā  Ā  Ā  {% collection_select custom_field_id, custom_fields.donation[custom_field.slug].multiple_choice_options, class:"select" %}
Ā  Ā  {% endif %}

Ā  </div>
</div>

{% endfor %}

Request the first 3 multiple choice custom donation fields

{% for cf in custom_fields.donation limit:3 %}
Ā <!-- Limit multiple choice fields to 3 total -->

{% assign custom_field = cf[1] %}
{% assign custom_field_id = 'custom_values.' | append: custom_field.slug %}

<div class="row-fluid">
Ā  <div class="span12">

Ā  Ā  {% if custom_field.is_multiple_choice? %}
Ā  Ā  Ā  <label for="donation_custom_values_{{ custom_field.slug }}_custom">{{ custom_field.name }}</label>
Ā  Ā  Ā  {% collection_select custom_field_id, custom_fields.donation[custom_field.slug].multiple_choice_options, class:"select" %}
Ā  Ā  {% endif %}

Ā  </div>
</div>

{% endfor %}

Limiting the custom donation fields requested based on field slug

You can use a conditional "if" statement to check if the slug of the custom field contains a specific word:Request multiple choice custom donation fields with the word "lobbyist" in the slug:

{% for cf in custom_fields.donation %}

{% assign custom_field = cf[1] %}
{% assign custom_field_id = 'custom_values.' | append: custom_field.slug %}

{% if custom_field.slug contains "lobbyist" %}
<!-- check custom field slugs for word "lobbyist" -->

<div class="row-fluid">
Ā  <div class="span12">

Ā  Ā  {% if custom_field.is_boolean? %}
Ā  Ā  Ā  <label class="checkbox" for="donation_custom_values_{{ custom_field.slug }}_custom">{% check_box custom_field_id, class:"checkbox" %} {{ custom_field.name }}</label>
Ā  Ā  {% endif %}

Ā  </div>
</div>

{% endif %} <!-- end slug check -->

{% endfor %}

Request text or number custom donation fields with the word "raffle" in the slug:

{% for cf in custom_fields.donation %}

{% assign custom_field = cf[1] %}
{% assign custom_field_id = 'custom_values.' | append: custom_field.slug %}

{% if custom_field.slug contains "raffle" %}
<!-- checks cf slug for word "raffle" -->

<div class="row-fluid">
Ā  <div class="span12">

Ā  Ā  {% if custom_field.is_text? or custom_field.is_number? %}
Ā  Ā  Ā  <label for="donation_custom_values_{{ custom_field.slug }}_custom">{{ custom_field.name }}</label>
Ā  Ā  Ā  {% text_field custom_field_id, class:"text" %}
Ā  Ā  {% endif %}

Ā  </div>
</div>

{% endif %} <!-- end slug check -->

{% endfor %}

Related HOWTOs

Did this answer your question?