Klassisches Formular mit Javascript / HTML individuell anpassen

INHALTSVERZEICHNIS

• Voraussetzungen und wichtige Hinweise
• Welche Anpassungen sind mit JavaScript und HTML möglich?
• JavaScript, HTML oder Tracking-Code im Formular hinterlegen
• Platzhalter im eigenen Code verwenden
  • Code nur auf der Erfolgsseite ausführen
  • Formularhöhe nach Änderungen aktualisieren
• Tracking im Formular einsetzen
• Häufige Probleme vermeiden

Mit eigenem JavaScript und HTML kannst Du klassische Spendenformulare individuell erweitern und anpassen. In diesem Artikel erfährst Du, welche Anpassungen möglich sind, wo Du Deinen Code hinterlegst und welche Platzhalter Dir zur Verfügung stehen.

Voraussetzungen und wichtige Hinweise

Mit eigenem JavaScript und HTML erhältst Du weitreichenden Zugriff auf Dein Spendenformular. Dadurch kannst Du Funktionen, Inhalte und die Darstellung gezielt an Deine Anforderungen anpassen.

Beachte außerdem:

• JavaScript- und HTML-Anpassungen sollten nur von erfahrenen Entwickler*innen umgesetzt werden. Fehlerhafter Code kann die Funktion des Spendenformulars beeinträchtigen.
• Eigenes JavaScript und HTML stehen nicht in jeder FundraisingBox-Variante zur Verfügung. Wende Dich bei Fragen zur Verfügbarkeit an unser FundraisingBox-Support-Team.
• Eigenes JavaScript hinterlegst Du, ähnlich wie eigenes CSS, in den erweiterten Design-Einstellungen des Spendenformulars.
• Wenn Du ein Formular vollständig individuell programmieren möchtest, nutze die Form-API. Auch diese Funktion ist nicht in allen FundraisingBox-Varianten verfügbar.

Welche Anpassungen sind mit JavaScript und HTML möglich?

Mit eigenem Code kannst Du klassische Spendenformulare beispielsweise um folgende Funktionen und Inhalte erweitern:

• Einen Betrag-Slider einbauen und abhängig vom gewählten Betrag erklären, was mit der jeweiligen Spende möglich ist.
• Eigene Bilder, Überschriften und weitere HTML-Elemente hinzufügen und frei platzieren.
• Die Reihenfolge der Formularfelder ändern, zum Beispiel zuerst persönliche Daten und anschließend Betrag und Projekt abfragen.
• Feldbezeichnungen und andere Texte durch eigenes Wording ersetzen, auch in älteren Design-Templates.
• Die Auswahl der Länder in Adressfeldern einschränken.
• Tracking-Code direkt in das Formular integrieren.
• uvm.

Tipp: Wenn Du das Design-Template Polaris oder Aurora verwendest, kannst Du die Standardtexte über die Wordings anpassen. Dafür benötigst Du kein JavaScript.

JavaScript, HTML oder Tracking-Code im Formular hinterlegen

Eigenen Code fügst Du direkt in den erweiterten Design-Einstellungen des gewünschten klassischen Formulars ein.

1. Öffne Formulare > Klassische Formulare.
   
2. Wähle das gewünschte Formular aus mit Klick auf den Formularnamen oder erstelle ein neues Formular über den blauen Button oben rechts "Neues Formular anlegen".
   
3. Öffne den Bereich in der rechten Menüleiste Design.
   
4. Klicke auf den Button Erweiterte Design-Einstellungen anzeigen.
   
5. Füge Deinen Code in das Feld für eigenes JavaScript / HTML / Tracking-Code ein.
   
6. Klicke auf oben rechts auf den blauen Button Speichern.
   

Platzhalter im eigenen Code verwenden

Du kannst Platzhalter in Deinem Code verwenden. Die FundraisingBox ersetzt diese beim Ausführen durch die jeweils vorhandenen Werte.

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}}
{{donation_custom_field_*ID*}}
{{person_custom_field_*ID*}}

Code nur auf der Erfolgsseite ausführen

Wenn Du beispielsweise einen Tracking-Code ausschließlich auf der Erfolgsseite ausführen möchtest, kannst Du prüfen, ob eine Transaktions-ID vorhanden ist:

{% if transaction_id %}
// Tracking-Code
{% endif %}

Formularhöhe nach Änderungen aktualisieren

Wenn Dein Code die Höhe des Formulars verändert, etwa weil Du zusätzliche Felder einfügst oder Bereiche ein- und ausblendest, kannst Du die vorhandene Funktion setHeight(); verwenden. Dadurch passt sich der iFrame automatisch an die neue Formularhöhe an.

Tracking im Formular einsetzen

Eigener JavaScript- oder HTML-Code ist eine Möglichkeit, Tracking direkt im Formular umzusetzen. Je nach Anwendungsfall stehen in der FundraisingBox weitere Möglichkeiten für Tracking und Analytics zur Verfügung. Einen Überblick findest Du im Hilfe-Artikel So lässt sich Tracking mit der FundraisingBox umsetzen.

Häufige Probleme vermeiden

• Das Formular funktioniert nach einer Änderung nicht mehr: Entferne oder korrigiere den zuletzt hinzugefügten Code und teste das Formular erneut.
• Die Formularhöhe stimmt nicht: Nutze setHeight();, wenn Du Elemente hinzufügst, entfernst oder dynamisch ein- und ausblendest.
• Anpassungen funktionieren nach einem Template-Wechsel nicht mehr: Prüfe Deinen JavaScript- und HTML-Code und passe ihn an das neue Design-Template an.
• Du möchtest nur Texte ändern: Bei den Templates Polaris und Aurora kannst Du dafür die Wordings verwenden und benötigst kein JavaScript.