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.

1. Zuerst erstellen Sie wie gewohnt ein Double-Opt-In Mailing und ein dazugehöriges Anmeldeformular. 
2. 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)!

3. 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.

4. 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()
   };
   	

5. 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>