Formular mit Javascript / HTML individuell anpassen

Zurück zur Startseite

Formular mit Javascript / HTML individuell anpassen

In diesem Artikel erfahren Sie, wie Sie Javascript und/oder HTML verwenden kann, um Ihre Formulare individuell anpassen zu können.

Gut zu wissen

  • Mithilfe des eigenen Javascripts und HTML haben Sie nahezu vollen Zugriff auf das Spendenformular und können dies ganz nach Ihren Wünschen anpassen. 
  • Das eigene Javascript können Sie, wie das eigene CSS, in den erweiterten Design-Einstellungen des Spendenformulars eintragen.
Tipp: Wenn Sie Ihr Formular komplett individuell programmieren möchten, verwenden Sie bitte die Form-API.
Diese Funktionen stehen nicht in jeder FundraisingBox zur Verfügung.

Bei Fragen kontaktieren Sie uns.

Beispiele der Anpassungsmöglichkeiten

  • 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 die Reihenfolge der abgefragten Felder verändern, z.B. zuerst die persönlichen Daten abfragen und dann den Betrag und die Projektauswahl.
  • Eigenes Wording auch in veralteten Design-Templates: 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.

Tipp: Wenn Sie das "Aurora" Design-Template verwenden, können Sie unter Wordings alle Standard-Texte anpassen, ohne hierfür Javascript einsetzen zu müssen.

JavaScript / HTML im Formular hinterlegen

  1. Klicken Sie auf Formulare .
  2. Wählen Sie das gewünschte Formular aus bzw. legen Sie ein neues Formular an.
  3. Unter Design klicken Sie auf erweiterte Design-Einstellungen anzeigen.
  4. In das Feld für eigenes Javascript / HTML / Tracking-Code fügen Sie Ihren Code ein. 
  5. Klicken Sie anschließend auf speichern .
Tipp: Testen Sie nach jeder Anpassung des Javascripts/HTMLs, ob das Formular noch vollständig funktioniert. Ebenfalls stellen Sie sicher, dass bei Änderung des Design-Templates die Javascript/HTML-Anpassungen ebenfalls geändert werden müssen. 

Hinweis: Das eigene Javascript und HTML sollte nur von erfahrenen Javascript- bzw. HTML-Programmierern erstellt werden, da ein fehlerhafter Code die Funktionsweise des Spendenformulars beeinträchtigen könnte.

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 Erfolgsseite 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.

 

als PDF exportieren