Wie kann ich ein eigenes HTML-Formular verwenden?
Wenn Sie mit Newsletter2Go ein Anmeldeformular erstellen, erhalten Sie standardmäßig einen JavaScript-Code. In Einzelfällen möchten Sie aber Ihr eigenes HTML Anmeldeformular verwenden und dieses mit Ihrem Newsletter2Go Account verbinden.
Die folgende Anleitung zeigt Ihnen, wie Sie Ihr HTML Formular mithilfe von JavaScript/jQuery anbinden können.
- Zuerst erstellen Sie wie gewohnt ein Double-Opt-in Mailing und ein dazugehöriges Anmeldeformular.
- Nachfolgend finden sie ein Beispiel für ein klassisches HTML Formular:
<div id="form">
<form id="nl2go_form" method="POST">
<label>E-Mail</label>
<input type="email" name="email">
<br>
<label>Vorname</label>
<input type="text" name="first_name">
<br>
<label>Nachname</label>
<input type="text" name="last_name">
<br>
<select name="Zielgruppe">
<option value="10">Wert 1</option>
<option value="20">Wert 2</option>
<option value="30">Wert 3</option>
<option value="40">Wert 4</option>
</select>
<br>
<input type="submit" value="Abschicken">
</form>
</div>
Beachten Sie bitte, dass die Eingabefelder Ihres HTML-Formulars die korrekten Namen der Merkmale erhalten. Die Namen der Standard-Merkmale erhalten Sie, wenn Sie einen Export Ihrer Empfänger durchführen.
Die Namen der Merkmale befinden sich in der CSV-Datei in der ersten Zeile, Beispiel:
- E-Mail: email
- Vorname: first_name
- Nachname: last_name
Beachten Sie bei eigenen Merkmalen die exakte Schreibweise (Bsp.: Zielgruppe)!
Um die Daten des Anmeldeformulars zu Newsletter2Go zu übertragen, wird JavaScript/jQuery verwendet. Hier sollten Vorkenntnisse vorhanden sein. Hierfür benötigen Sie den generierten JavaScript-Code vom erstellten Anmeldeformular.
Sie verwenden zum Initialisieren nur die ersten 3 Zeilen des Codes:
<script id="n2g_script">
!function(e,t,n,c,r,a,i){e.Newsletter2GoTrackingObject=r,e[r]=e[r]||function(){(e[r].q=e[r].q||[]).push(arguments)},e[r].l=1*new Date,a=t.createElement(n),i=t.getElementsByTagName(n)[0],a.async=1,a.src=c,i.parentNode.insertBefore(a,i)}(window,document,"script","https://static.newsletter2go.com/utils.js","n2g");
n2g('create', 'xxxxxxxx-xxxxxxxx-xxx');
Anstelle von xxxxxxxx-xxxxxxxx-xxx hinterlegen Sie den Code aus ihrem Anmeldeformular. Wenn Sie den JavaScript-Code aus Schritt 3 im Formular-Generator kopieren, ist der richtige Code schon enthalten.
Im nächsten Schritt wird der Versand des Formulars erfasst und ausgewertet.
Beachten Sie, dass der JavaScript-Code nach dem HTML Formular aufgerufen wird.
$(function () {
$('#nl2go_form').on('submit', function(e) {
e.preventDefault();
var recipient = $(this).serializeArray().map(function(x) {
this[x.name] = x.value;
return this;
}.bind({}))[0];
Sie können die Merkmale auch individuell zuweisen, dafür gehen Sie wie folgt vor:
var recipient = {
email: $('input[name=email]').val(),
first_name: $('input[name=first_name]').val(),
last_name: $('input[name=last_name]').val(),
Zielgruppe: $('select[name=Zielgruppe]').val()
};
Im letzten Schritt werden die Daten an Newsletter2Go übertragen. Gleichzeitig wird der Status der Anmeldung ausgegeben und anstelle des Anmeldeformulars via h2 Überschrift dargestellt.
//Daten an Newsletter2Go senden
n2g(
'subscribe:send', {
recipient: recipient
},
function(data) {
if (data.status == 201) {
//Ausgabe der Statusmeldung anstelle des Formulars
$('#form').html("<h2>Anmeldung erfolgreich!</h2>");
} else if (data.status == 200) {
if (data.value[0].result.error.recipients.invalid.length) {
$('#form').html("<h2>Ihre E-Mail Adresse ist nicht valide.</h2>");
}
//Ausgabe der Statusmeldung anstelle des Formulars
$('#form').html("<h2>Du bist bereits angemeldet!</h2>");
} else {
//Ausgabe der Statusmeldung anstelle des Formulars
$('#form').html("<h2>Es ist ein Fehler aufgetreten!</h2>");
}
},
function(data) {
//Ausgabe der Statusmeldung anstelle des Formulars
$('#form').html("<h2>Es ist ein Fehler aufgetreten!</h2>");
}
);
});
});
</script>