This guide describes how to customise the script which is used to embed forms on your website. This guide assumes basic knowledge of how to embed a form on a website.

Why prefill a form?

Prefilling a form is used to fill out specified fields with predetermined values such that Donor/Member does not have to make the selection themselves. Combine with showing and hiding fields to simplify the form. If you know any Contact data, you can save the Donor/Member some time by filling out the form in advance.

Which value overrules which?

The hierarchy for pre-filling value is as follows:

• Embed-script overrules the deep link
• Deep links pre-fill the form and overrule default values
• The form contains the configuration of default values

Content of this article

1. How to customise an Embed Script
2. Overview of parameters
3. Main Example
4. Tip & tricks
5. FAQ

1 How to Customise an Embed Script

Retrieve the embed script of the form you wish to prefill. Ensure that all changes are added in the opening "<div>" tag (and not in the closing "</div>" tag). Use the following syntax for each field:

data-fieldName="fieldValue"

For instance, if you wish to preset the amount to 100DKK, add the following code: data-amount="100".

<div id="fund" data-of="YourOrganisation.onlinefundraising.dk" data-amount="50" data-form="3949">
</div>

If you wish to add more fields, add more parameters to the embed script. In this example, we will ad a monthly recurring frequency:

<div id="fund" data-of="YourOrganisation.onlinefundraising.dk" data-amount="50" data-recurringFrequency="monthly" data-form="3949">
</div>

Before you start

Please note the following when customising an embed script:

• The fields you are attempting to prefill must be present in the form (visible or hidden). Fields may have specific requirements - these are listed in the section Overview of Parameters.
• It is not possible to prefill multi-select fields.
• The field value must be annotated with quotations marks.

2. Overview of Parameters

• Amount: data-amount:"100"
  The prerequisites of this example is that (1) an amount of 100 is configured or (2) the field is open amount.
  
  
• Purpose: data-purpose:"1"
  If you provided multiple purposes in the form, the preset can be used to specify the purpose. The numeric value denotes the order of the purpose in the form.
  
  In other words, if you have 3 memberships in the following order: 1: Veteran, 2: Senior, 3.: Junior, pre_purpose=1 would result in selecting Veteran.
  
  If you provided an amount on the purpose, this amount is applied first, because it is considered to be more important. If you aim to use purpose to decide the amount we recommend setting the input type of the amount field to number.
  
  
• Payment Type: data-paymentType=Recurring
  As part of the form configuration it is possible to control the order of payment type, i.e. if it is single or recurring. Pre-filling this field is especially useful if the field is hidden. The following values are available:  
  • Single payment= data-paymentType=Single
  • Recurring payment= data-paymentType=Recurring
    
    
• Payment Method: data-paymentMethodType=Card
  As part of the form configuration it is possible to control the order of the payment methods. The following values are available (not a complete list):
  
  • Card= data-paymentMethodType=Card
  • MobilePay= data-paymentMethodType=MobilePay
  • Betalingsservice= data-paymentMethodType=Betalingsservice
    
    
• Frequency: data-recurringFrequency=monthly
  If you configure a frequency as part of embedding the form, it can be useful to simplify the form by hiding the field and presetting the value by customising the embed script. The following values are available:
  • Monthly= data-recurringFrequency=monthly
  • Six times a year= data-recurringFrequency=hexannually
  • Quarterly= data-recurringFrequency=quarterly
  • Three times a year= data-recurringFrequency=triannually
  • Biannually= data-recurringFrequency=biannually
  • Yearly= data-recurringFrequency=yearly
    
    
• Recurring start (of agreement): data-recurringStart=now
  The recurring start is commonly set in the background, i.e. the field is hidden in the form and determined by additional logic, e.g. via a deep link. The following values are available:
  • Immediately= data-recurringStart=now
  • Custom= data-recurringStart=custom
  • Specified start date= data-recurringStart=yyyy-mm-dd
  • Immediately, and first day of next month= data-recurringStart=now_and_first
  • First day of next month= data-recurringStart=first
    
    
• Expiration date (of agreement): data-recurringExpiration=yyyy-mm-dd
  
  
• Lock preset fields = data-lock="1"
  If the parameter is included in the embed script, the remaining parameters (fields) included in the link cannot be modified once the have been preset via the embed script.

2.1. Custom Fields

• Create your own field = data-reference
  If you created a custom field and aim to preset the field, e.g. while it is hidden from the form, use the reference as parameter in the embed script. An example is provided below. 

The above image shows a custom field with the reference: internt-kampagne-id. The parameter for the embed script will then be: data-internt-kampagne-id=vinter2020, where "vinter2020" is an example campaign code.

3. Main Example

Below is an example of the following case: We wish for the donor to pay 75kr using MobilePay biannually. The donation is in context of the campaign with code: vinter2020.

<div id="fund" data-of="JeresNavn.onlinefundraising.dk" data-paymentMethodType="MobilePay" data-amount="75" data-recurringFrequency="biannually" data-internt-kampagne-id="vinter2020" data-form="3949">
</div>

4. Tips & Tricks

Customise your embed script to fit your organisation's needs. For instance, it is possible to reuse a form for different campaigns by presetting the purpose behind the scenes.

Example

In this example your organisation is running two campaigns. Landing pages have been created for the following campaigns:

• Campaign A encourages donors to make a single donation using MobilePay
• Campaign B encourages donors to commit to recurring payments using Card

Each campaign is communicated differently and are exposed on separate landings pages. It is possible to use the same form on both landing pages.

How it's done

Campaign A has the URL www.yourpage.io/donate which contains a customised embed script which presets the Payment Method to MobilePay and the Payment Type to Single. In this example we assume that the Purpose selection is 1, i.e. the first Purpose configured for the form.

<div id="fund" data-of="YourDomain.onlinefundraising.dk" data-paymentMethodType="MobilePay" data-paymentType="Single" data-purpose="1" data-form="3949">
</div>

Campaign B has the URL www.youpage.io/signup, where the Payment Method is preset to Card, and the end-user signs up for an agreement with monthly payments starting the first of the month. As a result, the payment type is recurring. The purpose is different to that of Campaign A.

<div id="fund" data-of="YourDomain.onlinefundraising.dk" data-paymentMethodType="Card" data-paymentType="Recurring" data-recurringFrequency="monthly" data-recurringStart="first" data-purpose="2" data-form="3949">
</div>

Remember to always test the custom embed script before publishing to the end-user.

5. FAQ

• Why can't I see my changes?
  • Ensure that the field you are attempting to prefill is available in the form.
  • Check for typos. Parameters and values are case sensitive.
• Is it possible to prefill multi-select fields?
  • It is currently not possible to prefill multi-select fields. Consider this when you are designing the form.