Kann ich mein Legacy-Pop-over-Formular mit einem Button oder Link auslösen?
Der folgende Artikel handelt von Legacy-Formularen.
Legacy-Formulare werden nicht mehr weiterentwickelt und stehen in Konten, die nach dem 18. Juli 2023 erstellt wurden, nicht zur Verfügung.
Mit dem GetResponse Formular Wizard können Sie ein Standardformular erstellen, das auf Ihrer Seite angezeigt wird, wenn ein Besucher diese betritt. Mithilfe leichter Anpassungen des Codes können Sie dieses durch Klicken eines Links oder Buttons auf Ihrer Website auslösen.
1. Erstellen eines Pop-over-Formulars
Öffnen Sie ein bestehendes Formular oder erstellen Sie ein neues. Klicken Sie im Wizard auf die Vorlage und dann rechts auf Layout. Wählen Sie in den Anzeigeeigenschaften „Pop over“ aus, bearbeiten Sie das Formular und klicken Sie auf „Speichern & veröffentlichen“.
2. Konfiguration des Formularscripts
Um das Formular durch das Klicken des Links in einem bestimmten Element auf der Website auszulösen, müssen Sie API JS verwenden. Sie müssen die Code-Konfiguration im JSON-Format innerhalb des -Tags, den Sie während des Schritts „Speichern & veröffentlichen“ im Assistenten kopiert haben, platzieren.
Unten finden Sie Code-Snippets als Beispiel, wie das Formular richtig mittels API JS konfiguriert wird.
Konfiguration
{
"name": "myuniqueformname",
"selector": {
"clickToShow": "#id_click_to_show_element",
"clickToHide": "#id_click_to_hide_element"
}
}
Beschreibung
„name“ – ERFORDERLICH – String – eindeutige Kennung
„selector“ – OPTIONAL – Objekt
-> „clickToShow“ – OPTIONAL – String – DOM Elementselektor (HTML-Element auf Ihrer Website, bei Klick wird Formular angezeigt)
-> „clickToHide“ – OPTIONAL – String – DOM Elementselektor (HTML-Element auf Ihrer Website, bei Klick wird Formular geschlossen)
Beispiel
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<a href="#" id="id_click_to_show_element">Anzeigen</a>
<script type="text/javascript" src="https://app.getresponse.com/view_webform_v2.js?u=Xun&webforms_id=1023903">
{
"name": "myuniqueform1",
"selector": {
"clickToShow": "#id_click_to_show_element"
}
}
</script>
</body>
</html>
Hinweis:
1. JSON innerhalb des -Tags muss korrekt sein. Klicken Sie auf den Link http://jsonlint.com/, um das Script zu validieren.
2. Die Konfiguration kann nicht für Inline-Formulare verwendet werden
Optional können Sie unser API direkt im JavaScript-Code verwenden (mit Bezug auf das GRWF2 Objekt):
var myform = GRWF2.get("myuniqueformname") - mit Bezug auf die "myuniqueformname" Instanz des Formularobjekts
myform.show() - Formular anzeigen
myform.hide() - Formular verbergen
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<button id="button" >Anzeigen</button>
<script type="text/javascript" src="https://app.getresponse.com/view_webform_v2.js?u=Xun&webforms_id=1023903">{
"name": "myuniqueform2"
}
</script>
<script>
var myform = GRWF2.get('myuniqueform2'),
element = document.getElementById('button');
element.addEventListener("click", function(){
myform.show();
});
</script>
</body>
</html>
Ihr Erfolg hat höchste Priorität bei uns. Leider bieten wir jedoch keine Unterstützung bei der Bearbeitung des HTML-Codes Ihrer Webpage. Sollten Sie Schwierigkeiten haben, richten Sie sich bitte an Ihren Webentwickler.
Hinweis: Das Formular wird Benutzern, die das Formular bereits ausgefüllt haben, nicht erneut angezeigt, auch wenn sie die Schaltfläche erneut drücken.