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. Wie das genau funktioniert, finden sie in unserem Video-Tutorial.
  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>
    	
  6. Die vollständige HTML-Datei aus diesem Beispiel finden Sie hier.