Wie kann ich das Anmeldeformular einbetten und anpassen?

Formular Einbetten

Im zweiten Schritt finden Sie die Optionen dazu das Formular einzubetten.

1. Verlinken / iFrame

Unter "Gehostetes Formular aufrufen" erhalten Sie die Web-Adresse Ihres Anmeldeformulars. Dieses können Sie zB direkt auf Ihrer Homepage verlinken oder per iFrame einbinden.

2. Einbetten (empfohlen)

2.a Als Formular

Kopieren Sie sich einfach das Java-Script Snippet, das Sie unter "Formular einbetten" finden. Das Snippet ist auch bereits responsive und wird so auch mobil korrekt dargestellt.
Fügen Sie diesen Code nun an der Stelle in Ihrer Webseite ein, an der das Formular erscheinen soll. Das Formular wird nun nach Aufruf der Seite angezeigt und ist voll funktionsfähig.

Wenn Sie das Aussehen des Formulars ändern möchten oder nicht die Möglichkeit haben, den Code an der richtigen Stelle einzufügen, finden Sie unter Anpassungsmöglichkeiten / JavaScript API weitere Informationen.

2.b Als Popup

Aktivieren Sie hierfür die Funktion "Popup" und passen Sie die gewünschte Zeit des Fensters an zB 10 Sekunden.
Fügen Sie diesen Code nun in Ihrer Webseite ein. Das Formular erscheint nun nach 10 Sekunden automatisch als Popup auf Ihrer Seite.

Wenn Sie das Aussehen des Popups anpassen möchten, finden Sie unter Anpassungsmöglichkeiten / JavaScript API weitere Informationen.

Wie genau Sie ein Formular erstellen und einbinden, können Sie in diesem Video lernen.

Formular Anpassen

1. Anpassungsmöglichkeiten / JavaScript API

Die Funktionen subscribe:createForm sowie subscribe:createPopup akzeptieren je zwei weitere Parameter:

Im ersten Parameter können Sie zum Anpassen des Aussehens eine Konfiguration übergeben. Folgende Konfiguration wird standardmäßig verwendet und kann von Ihnen individuell angepasst 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;"
    }
 };

Fügen Sie diese Konfiguration einfach dem Call hinzu:

n2g('subscribe:createForm', config)

bzw.

n2g('subscribe:createPopup', config)

So können Sie das Aussehen entweder direkt über CSS-Styles oder -Klassen anpassen.

Als weiterer Parameter kann beim Formular die ID eines HTML-Elementes übergeben werden. Das ist dann nützlich, wenn Sie das Formular an einer anderen Stelle rendern möchten als das Script-Tag, das Sie einbinden:

n2g('subscribe:createForm', config, 'targetId')

Beim Popup kann als weiterer Parameter das Intervall in Sekunden angegeben werden, nach dem sich das Popup öffnen soll. Bspw. würde sich das Popup mit folgendem Code sofort öffnen:

n2g('subscribe:createPopup', config, 0)

Sie haben natürlich auch die Möglichkeit, das Popup erst nach einem Mausklick anzuzeigen. Dafür können Sie die Funktion mittels Binding einem Event zuordnen (bspw. dem onlick-Event).

2. Für Coder

Um noch individuellere Lösungen umzusetzen, können Sie für das Anmeldeformular Callback-Funktionen übergeben, die nach erfolgreicher oder fehlgeschlagener Anmeldung 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 geben als ersten Parameter Informationen über den Status und als zweiten Parameter die im Anmeldeformular hinterlegten Texte zurück.
response.status == 201 Versand des Double Opt-In Mailings (Standard-Nachricht: messages.message_subscribe_doi)
response.status == 200Empfänger bereits angemeldet (Standard-Nachricht: messages.message_subscribe_duplicate)
response.status != 200 && response.status != 201 Fehler aufgetreten (Standard-Nachricht: messages.message_subscribe_error)

Die confirmCallback wird erst nach der Bestätigung des DOI-Links aufgerufen und hat folgende Stati:
state == "doi_success" Anmeldung erfolgreich abgeschlossen (Standard-Nachricht: messages.message_subscribe_success)
state == "doi_duplicate" Empfänger bereits angemeldet (Standard-Nachricht: messages.message_subscribe_duplicate)
state == "doi_error" Fehler aufgetreten (Standard-Nachricht: messages.message_subscribe_error)

3. Whitelabeling

Anmeldeformulare können wir für Sie auch komplett whitelabeln (kostenpflichtig).

In diesem Fall läuft das Formular unter einer individuellen Domain, die Sie vorgeben. Das Layout sowie das Design können komplett nach Ihren Wünschen angepasst werden.

Die Kosten fallen nach Aufwand an.