Hoe kan ik het aanmeldformulier gebruiken, insluiten en aanpassen?

U heeft verschillende mogelijkheden om een aanmeldformulier op een externe website in te sluiten.

  1. Verlinken / iFrame
  2. Embedden
    1. als formulier
    2. als pop-up

Om een aanmeldformulier te maken gaat u rechtsboven in het accountmenu naar "Formulier" en klikt u op de button "Nieuw formulier". Vink bij de ondersteunende functies "Aanmeldformulier" aan. Nadat u dan beide stappen heeft voltooid kunt u in de derde stap de informatie voor het insluiten van het formulier vinden.

1. Verlinken / iFrame

Naast "URL van uw formulier" ziet u het webadres van het formulier. Deze kunt u direct op uw webpagina plakken of per iFrame embedden.

2. Embedden (aanbevolen)

2a. Als formulier

Kopieer de code naast "Website formulier - JAVASCRIPT-SNIPPET". Voeg dan de code op de gewenste plek op uw website in, daar waar het formulier geplaatst moet worden.

Wanneer u het ontwerp van het formulier wilt veranderen of niet de mogelijkheid heeft om het formulier op de gewenste plek op uw website te implementeren, lees dan verder bij "Aanpassingsmogelijkheden" hieronder.

2b. Als pop-up

Kopieer de code naast "Popup na 10 sec - JAVASCRIPT-SNIPPET". Voeg dan de code op de gewenste plek op uw website in, daar waar het formulier geplaatst moet worden. Het formulier verschijnt nu 10 seconden nadat de ontvanger op de pagina is belandt.

Wanneer u het ontwerp van het formulier wilt veranderen of niet de mogelijkheid heeft om het formulier op de gewenste plek op uw website te implementeren, lees dan verder bij "Aanpassingsmogelijkheden" hieronder.

Aanpassingsmogelijkheden / JavaScript API

De functie subscribe:createForm alsmede subscribe:createPopup accepteren elk twee andere parametes.

In de eerste parameter kunt u voor het aanpassen van het ontwerp een configuratie instellen. De volgende configuratie wordt standaard gebruikt en kan individueel aangepast worden. 

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;"     } }

Voeg aan deze configuratie de callback toe:

n2g('subscribe:createForm', config)

of

n2g('subscribe:createPopup', config)

U kunt het ontwerp of direct over de CSS-styles of -classes aanpassen

Als extra parameter kan bij het formulier de ID van het HTML-element doorgegeven worden. Dat is nodig wanneer u het formulier op een andere plek wilt insluiten en u deze als script-tag wilt renderen. Gebruik hiervoor:

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

Bij de pop-up kan als extra parameter de intervalstijd in seconden worden aangegeven. Hiermee stelt u de tijd in waarna de pop-up op het beeldscherm moet verschijnen. Gebruik daarvoor de onderstaande code en verander de 0 naar de gewenste aantal seconden. 0 betekent dat de pop-up direct verschijnt.

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

U kunt er ook voor kiezen om de pop-up eerst na een muisklik te laten verschijnen. Voor deze functie kunt een event koppelen, bv. het onclick-event.

Voor programmeerders

Voor een nog individuelere mogelijkheid kunt u ook het aanmeldformulier met callback functies uitbereiden, die na een succesvolle of mislukte aanmelding uitgevoerd worden.

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 geven de eerste parameter informatie over de status en in de tweede parameter vindt u de tekst voor het aanmeldformulier
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)

De confirmCallback wordt eerst na de bevestiging van de double opt-in link opgeroepen en heeft de volgende statusmogelijkheden:
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

Aanmeldformulieren kunnen we voor u tegen extra betaling ook compleet whitelabelen.

In dit geval verloopt alle interactie over uw eigen individuele domein. De lay-out en het ontwerp kan dan compleet naar wens worden aangepast.

Contacteer het supportteam voor informatie over de kosten van deze optie.