Formular einbetten
Im zweiten Schritt des Erstellungsprozesses stehen Ihnen verschiedene Optionen zur Verfügung, um das Anmeldeformular in Ihre Website zu integrieren.
Verlinkung / iFrame
Unter dem Punkt "Gehostetes Formular aufrufen" finden Sie die direkte Web-Adresse (URL) Ihres Anmeldeformulars. Diese können Sie entweder direkt auf Ihrer Homepage verlinken oder als klassischen iFrame-Inhalt einbinden.
Einbetten als Formular (Empfohlen)
Kopieren Sie das JavaScript-Snippet aus dem Bereich "Formular einbetten". Dieses Snippet ist standardmäßig vollständig responsive gestaltet und garantiert eine fehlerfreie Darstellung auf mobilen Endgeräten.
Fügen Sie diesen Code an der gewünschten Stelle im HTML-Quelltext Ihrer Webseite ein. Das Formular wird nach dem Laden der Seite direkt gerendert und ist sofort einsatzbereit.
Hinweis: Falls Sie das Design anpassen möchten oder den Code nicht direkt an der Zielposition platzieren können, nutzen Sie die erweiterten Optionen im Abschnitt JavaScript-API.
Einbetten als Pop-up
Aktivieren Sie die Option "Pop-up" und definieren Sie die gewünschte Zeitverzögerung (z. B. 10 Sekunden). Fügen Sie den generierten Code anschließend in Ihre Website ein. Das Formular öffnet sich nach Ablauf der definierten Zeitspanne automatisch als Pop-up-Fenster.
Details zur visuellen Anpassung des Pop-ups finden Sie ebenfalls im Bereich der JavaScript-API.
Video-Tutorial: Eine detaillierte Schritt-für-Schritt-Anleitung zur Erstellung und Einbindung finden Sie in unserem begleitenden Schulungsvideo.
Formular anpassen (JavaScript-API)
Die Funktionen subscribe:createForm und subscribe:createPopup akzeptieren jeweils zwei optionale Parameter, um das Formular exakt an Ihre Bedürfnisse anzupassen.
Über den ersten Parameter übergeben Sie ein Konfigurationsobjekt (JSON), um das Design zu steuern. Folgendes Standard-Layout wird standardmäßig verwendet und kann flexibel überschrieben werden:
var config = {
"form": { "class": "", "style": "" },
"container": { "type": "div", "class": "", "style": "width: 100%;" },
"row": { "type": "div", "class": "", "style": "" },
"columnLeft": { "type": "div", "class": "", "style": "width: 40%; padding: 10px 5px;" },
"columnRight": { "type": "div", "class": "", "style": "" },
"checkbox": { "type": "input", "class": "", "style": "" },
"separator": { "type": "br", "class": "", "style": "" },
"input": { "class": "", "style": "padding: 5px 10px; border-radius: 2px; border: 1px solid #d8dee4;" },
"dropdown": { "type": "select", "class": "", "style": "padding: 3px 5px; border-radius: 2px; border: 1px solid #d8dee4;" },
"button": { "type": "button", "class": "", "id": "", "style": "background-color: #00baff; border: none; border-radius: 4px; padding: 10px 20px; color: #ffffff; margin-top: 20px; cursor: pointer;" },
"label": { "type": "label", "class": "", "style": "padding-left: 5px" },
"loader": { "type": "img", "src": "//www.newsletter2go.com/images/loader.svg", "class": "", "style": "margin: auto; display:block; width: auto;" },
"message": { "type": "h2", "class": "", "id": "", "style": "text-align: center;" },
"captchaImage": {
"type": "img", "class": "", "style": "padding: 5px; border: 0px solid #fff; margin-top: 5px; width: 32px; height: 32px; cursor: pointer; display:inline;",
"style:active": "padding: 5px; border: 3px solid #ccc; margin-top: 5px; width: 32px; height: 32px; cursor: pointer;"
}
};
Übergeben Sie dieses Objekt einfach im entsprechenden Funktionsaufruf:
n2g('subscribe:createForm', config); // Für eingebettete Formulare n2g('subscribe:createPopup', config); // Für Pop-up-FormulareDamit lässt sich das visuelle Erscheinungsbild direkt über Inline-CSS-Styles oder CSS-Klassen steuern.
Zusätzliche Parameter für Formulare: Sie können als dritten Parameter die ID eines HTML-Ziel-Elements übergeben. Dies ist sinnvoll, wenn das Formular an einer anderen Stelle gerendert werden soll als das eingebundene Script-Tag selbst:
n2g('subscribe:createForm', config, 'targetId');Zusätzliche Parameter für Pop-ups: Als dritter Parameter kann das Anzeigeintervall in Sekunden definiert werden. Der folgende Aufruf öffnet das Pop-up beispielsweise ohne Verzögerung:
n2g('subscribe:createPopup', config, 0);Sie können das Pop-up auch erst nach einer Benutzeraktion (z. B. einem Mausklick) triggern, indem Sie die Funktion an ein entsprechendes Event-Binding (wie onclick) knüpfen.
Erweiterte Anpassungen für Entwickler (Callbacks)
Für hochgradig individualisierte Workflows können Callback-Funktionen implementiert werden, die nach dem Absenden des Formulars ausgeführt werden:
n2g('subscribe:createForm', config, 'targetId', successCallback(response, messages), errorCallback(response, messages), confirmCallback(state, messages));
n2g('subscribe:createPopup', config, 0, successCallback(response, messages), errorCallback(response, messages), confirmCallback(state, messages));Alle Callbacks übergeben als ersten Parameter Status-Informationen und als zweiten Parameter die im System hinterlegten Standardtexte (Lokalisierungen).
response.status == 201: Double-Opt-in (DOI) Mailing wurde versendet. (Standard-Text:messages.message_subscribe_doi)response.status == 200: Empfänger ist bereits registriert. (Standard-Text:messages.message_subscribe_duplicate)response.status != 200 && response.status != 201: Ein Fehler ist aufgetreten. (Standard-Text:messages.message_subscribe_error)
Der confirmCallback wird erst nach erfolgreicher Bestätigung des DOI-Links im Aktivierungs-Mailing aufgerufen und liefert folgende Status-Werte:
state == "doi_success": Anmeldung erfolgreich abgeschlossen. (Standard-Text:messages.message_subscribe_success)state == "doi_duplicate": Empfänger bereits registriert. (Standard-Text:messages.message_subscribe_duplicate)state == "doi_error": Ein Fehler ist aufgetreten. (Standard-Text:messages.message_subscribe_error)