Formular mit Javascript / HTML individuell anpassen

INHALTSVERZEICHNIS

• Gut zu wissen
• Beispiele der Anpassungsmöglichkeiten
• JavaScript / HTML im Formular hinterlegen
• Platzhalter
  
  

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.

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.

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 .

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