Formular mit Javascript und HTML individuell anpassen

Zurück zur Startseite

Formular mit Javascript und HTML individuell anpassen

Mit Hilfe des eigenen Javascripts und HTML haben Sie nahezu vollen Zugriff auf das Spendenformular und können dies ganz nach Ihren Wünschen anpassen. Mit Javascript und HTML stehen Ihnen nahezu grenzenlose Möglichkeiten der Individualisierung offen.

Beachten Sie bitte, dass diese Funktionen nicht in jeder FundraisingBox enthalten sind.

Einige Beispiele:

  • Sie können einen Betrag-Slider anzeigen und abhängig vom gewählten Betrag sofort anzeigen, was damit möglich ist, z.B. "für 50 Euro können X Medikamente angeschafft werden”.
  • Sie können eigene Bilder und Element einbauen und beliebig platzieren.
  • Sie können zuerst Kontonummer und Bankleitzahl statt IBAN und BIC anzeigen lassen.
  • Sie können die Reihenfolge der abgefragten Felder verändern, z.B. zuerst die persönlichen Daten abfragen und dann den Betrag und die Projektauswahl.
  • Eigenes Wording: ersetzen Sie Feldbezeichnungen oder Text mit eigenen Worten.
  • Sie können nur bestimmte Länder in der Adresse abfragen.
  • Sie können zusätzliche HTML-Elemente wie Bilder oder Überschriften einbauen und beliebig platzieren.
  • Sie können Tracking-Codes im Formular einbauen.

Einige dieser Anpassungen können Sie in unserem Beispiel-Spendenformular sehen:
http://www.fundraisingbox.com/beispiel-formular

Das eigene Javascript können Sie im jeweiligen Formular im Bereich "Design" eintragen. Die Javascript-Bibliothek jQuery wird standardmäßig bereits geladen und kann verwendet werden.

Platzhalter

Es ist möglich, Platzhalter zu verwenden, die dann durch die entsprechenden Werte ersetzt werden. Folgende Platzhalter werden unterstützt:

{{transaction_id}}
{{token}}
{{fb_payment_form_configuration_id}}
{{fb_source_id}}
{{source_name}}
{{source_promotion_code}}
{{fb_project_id}}
{{project_promotion_code}}
{{fb_type_id}}
{{type_promotion_code}}
{{amount}}
{{currency}}
{{interval}}
{{receipt_status}}
{{salutation}}
{{title}}
{{first_name}}
{{last_name}}
{{birthday}}
{{wants_newsletter}}
{{email}}
{{phone}}
{{public_name}}
{{public_message}}
{{address}}
{{post_code}}
{{city}}
{{country}}
{{bank_account_owner}}
{{bank_number}}
{{bank_account_number}}
{{bank_iban}}
{{bank_bic}}
{{bank_name}}
{{bank_country}}
{{created_at}}
{{received_at}}
{{is_test}}
{{parent_url}}
{{ip}}
{{mandate_reference_id}}
{{mandate_status}}
{{mandate_signature_date}}
{{mandate_last_usage_date}}
{{mandate_transaction_type}}
{{mandate_origin}}
{{fb_fundraising_page_id}}

Soll beispielsweise ein Tracking-Code nur auf der Erfolgseite eingebaut werden, so ist dies wie folgt möglich:

{% if transaction_id %}
// Tracking code
{% endif %}

Tipp: wenn Sie das Formular in der Höhe manipulieren, z.B. weitere Felder hinzufügen oder Bereiche ein-/ausblenden, dann können Sie die bereits vorhandene Funktion " setHeight(); " nutzen, damit sich der iFrame automatisch der neuen Höhe anpasst.

Noch ein konkretes Beispiel: zuerst Kontonummer und Bankleitzahl, statt IBAN und BIC anzeigen:

$(function() {
   $("#bankFieldsChoice li input[value=account]").click();
});

Bitte beachten Sie, dass das eigene Javascript und HTML nur von erfahrenen Javascript- bzw. HTML-Programmierern erstellt werden sollte, da ein fehlerhafter Code die Funktionsweise des Spendenformulars beeinträchtigen könnte.

Artikel drucken als PDF exportieren