Alle Kategorien

Automation

Wie kann ich das Anmeldeformular verwenden, einbetten und anpassen?

Sie haben folgende Möglichkeiten, ein Anmeldeformular auf einer externen Seite einzubinden:

  1. Verlinken / iFrame
  2. Einbetten
    1. als Formular
    2. als Popup

Um ein Anmeldeformular zu erstellen, gehen Sie in Ihrem Accountmenü auf den Punkt "Formulare" und klicken auf den Button "Neues Formular".

 Setzen Sie bei "Unterstützte Funktionen" ein Häkchen bei "Anmeldeformular". 

Nachdem Sie die ersten beiden Schritte abgeschlossen haben, erhalten Sie im 3. Schritt Informationen zum Einbetten auf einer externen Webseite.

1. Verlinken / iFrame

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

2. Einbetten (empfohlen)

2.a Als Formular

Kopieren Sie sich einfach den Code, den Sie unter "Javascript-Snippet - Website-Formular" finden. 
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

Kopieren Sie sich einfach den Code, den Sie unter "Javascript-Snippet - Popup nach 10s" finden. 
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 oder das Intervall bzw. den Auslöser anpassen möchten, wann das Popup erscheint, finden Sie unter Anpassungsmöglichkeiten / JavaScript API weitere Informationen. 

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": "table",
        "class": "",
        "style": "width: 100%;"
    },
    "row": {
        "type": "tr",
        "class": "",
        "style": ""
    },
    "columnLeft": {
        "type": "td",
        "class": "",
        "style": "width: 40%; padding: 10px 5px;"
    },
    "columnRight": {
        "type": "td",
        "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). 

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 == 200 Empfä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)

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. Bitte kontaktieren Sie unsere  Vertriebs-Team für weitere Informationen.