How to Add Custom Fields

The donation form has available fields for most use cases. However, in some cases extra fields might be useful. The following code shows you how to add custom fields into your widget:

<script type="text/javascript">
    window.rnwWidget = window.rnwWidget || {};
    window.rnwWidget.configureWidget = window.rnwWidget.configureWidget || [];
    window.rnwWidget.configureWidget.push(function(options) {
        options.extend({
            custom_fields : {
                stored_customer_institution : {
                    type : 'text',
                    location : 'before',
                    reference : 'customer_firstname',
                    placeholder : 'Institution',
                }
            }
        });
      });
</script>

Currently we support text, textarea, checkbox, select and date (3 fields; for day, month and year) as field type. Parameters of custom fields are:

• type := text|select|checkbox|textarea|radio|date

• location := where to add the field, before|after the element defined by the parameter reference

• reference := relative to which element (value of the attribute data-bock-id of the html element)

• placeholder := placeholder label (text, textarea supported)

• label := label of an input element (date, checkbox supported)

• initial := value for text field or textarea

• value := value of an input element (checkbox, select supported)

• name := name of an select option element

• options := options for the select element. options is an array containing an object with two key value pairs (key := name|value, see above)

• initial := initial value of an input element (text, textarea supported)

• rows := define rows of a textarea

Example select:

<script type="text/javascript">
    window.rnwWidget = window.rnwWidget || {};
    window.rnwWidget.configureWidget = window.rnwWidget.configureWidget || [];
    window.rnwWidget.configureWidget.push(function(options) {
        options.extend({
            custom_fields : {
                stored_customer_rating : {
                    type : 'select',
                    location : 'after',
                    reference : 'customer_street',
                    options : [ {'name': 'bad', 'value': '0'}, {'name': 'ok', 'value': '1'}, {'name': 'good', 'value': '2'}],
                }
            }
        });
    });
</script>

Example radio:

<script type="text/javascript">
    window.rnwWidget = window.rnwWidget || {};
    window.rnwWidget.configureWidget = window.rnwWidget.configureWidget || [];
    window.rnwWidget.configureWidget.push(function(options) {
        options.extend({
            custom_fields : {
                stored_customer_rating : {
                    type : 'radio',
                    location : 'before',
                    reference : 'customer_firstname',
                    options : [ {"label": 'Organisation', 'value': "organisation"}, {"label": 'Private', 'value': "private"}],
                }
            }
        });
    });
</script>

Example checkbox:

<script type="text/javascript">
    window.rnwWidget = window.rnwWidget || {};
    window.rnwWidget.configureWidget = window.rnwWidget.configureWidget || [];
    window.rnwWidget.configureWidget.push(function(options) {
        options.extend({
            custom_fields : {
                stored_customer_partner_permission : {
                    type : 'checkbox',
                    location : 'after',
                    reference : 'customer_permission',
                    label : 'I am a partner',
                    value : 'true',                            }
            }
        });
    });
</script>

Example textarea:

<script type="text/javascript">
    window.rnwWidget = window.rnwWidget || {};
    window.rnwWidget.configureWidget = window.rnwWidget.configureWidget || [];
    window.rnwWidget.configureWidget.push(function(options) {
        options.extend({
            custom_fields : {
                stored_customer_additional_message : {
                    type : 'textarea',
                    location : 'after',
                    reference : 'customer_message',
                    placeholder : 'Additional Message',
                    initial : 'my text',
                    rows: 8,                                    }
            }
        });
    });
</script>

The textarea field has a limit of 500 characters.

Available references (data-block-id)

• amount-container

• custom-amount-container

• iban

• bank_name

• customer_salutation

• customer_firstname

• customer_lastname

• customer_birthdate

• customer_email

• customer_permission

• customer_message

• customer_receipt

• customer_company

• customer_street

• customer_street2

• customer_pobox

• customer_city

• customer_country

• recipient_salutation

• recipient_firstname

• recipient_lastname

• recipient_birthdate

• recipient_street

• recipient_street2

• recipient_pobox

• recipient_city

• recipient_country

If you name your parameter 'stored_YOURPARAMETER' it will automatically be visible for each transaction in the manager as well. 

In case you have specific questions on custom fields, please do not hesitate to get in touch with us via support@raisenow.com .