Hoe kan ik het aanmeldformulier gebruiken, insluiten en aanpassen?
Je hebt verschillende mogelijkheden om een aanmeldformulier op een externe website in te sluiten.
- Verlinken / iFrame
- Embedden
- als formulier
- als pop-up
Om een aanmeldformulier te maken ga je rechtsboven in het accountmenu naar "Formulier" en klik je op de button "Nieuw formulier". Vink bij de ondersteunende functies "Aanmeldformulier" aan. Nadat je dan beide stappen hebt voltooid kun je in de derde stap de informatie voor het insluiten van het formulier vinden.
1. Verlinken / iFrame
Naast "URL van je formulier" zie je het webadres van het formulier. Deze kun je direct op de 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 je website in (daar waar het formulier geplaatst moet worden).
Wanneer je het ontwerp van het formulier wilt veranderen of niet de mogelijkheid hebt 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 je website in (daar waar het formulier geplaatst moet worden). Het formulier verschijnt nu 10 seconden nadat de ontvanger op de pagina is belandt.
Wanneer je het ontwerp van het formulier wilt veranderen of niet de mogelijkheid hebt 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 parameters.
In de eerste parameter kun je 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)
Je 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 je het formulier op een andere plek wilt insluiten en 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 stel je 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)
Je kunt er ook voor kiezen om de pop-up eerst na een muisklik te laten verschijnen. Voor deze functie kun je een event koppelen, bv. het onclick-event.
Voor programmeerders
Voor een nog individuelere mogelijkheid kun je 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 vind je 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 tegen extra betaling ook compleet whitelabelen.
In dit geval verloopt alle interactie over je 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.