Newsletter2go script style

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
Status
Es sind keine weiteren Antworten möglich.

bzwerg

Neues Mitglied
23 Januar 2017
22
0
1
30
Hallo, ich bin schon fast kurz vorm verzweifeln. Ich habe mir bei newsletter2go ein Anmeldeformular für meine Website zusammengestellt und erhalte am Ende ein Script. Nun möchte ich gern den Absendebutton vom Style anpassen. In dem Script gibt es natürlich kein <form>-Bereich. Der Anbieter selbst schreibt folgendes:

Anpassungsmöglichkeiten / JavaScript API
Die Funktion subscribe:createForm akzeptiert zwei weitere Parameter:

Im ersten Parameter können Sie zum Anpassen des Aussehens eine Konfiguration übergeben. Folgende Konfiguration wird standardmäßig verwendet und kann von Ihnen individuell angepasst werden:


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"
},
"message": {
"type": "h2",
"class": "",
"id": "",
"style": "text-align: center;"
}
}



Fügen Sie diese Konfiguration einfach dem Call hinzu:

n2g('subscribe:createForm')
<<-- hiermit endet das Script und ich soll config einfügen:
n2g('subscribe:createForm', config)

Mein Problem: Wo soll ich den Code ab var config einfügen? Ist das ein CSS Style Part oder ein Java Script Part? Sobald ich config einfüge, wird kein Formular mit angezeigt.
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.037
203
63
17
Also ich kann dir schon mal sagen, dass das ein Javascript-Part ist, indem du mit CSS-Attributen stylest.
Wenn du irgendwelche CSS-Anpassungen machen musst, musst du sie hier einfügen:
"style": "Hier dann sowas wie: padding: ...;"

Hast du mal versucht das "var" vor "config" wegzumachen?
Ansonsten ist es nämlich keine Globale Variable.

Ich habe noch nie was von Newsletter2go gehört und dementsprechend auch keine Erfahrung, aber man bindet Scripte in der Regel am ENDE des html-Dokumentes ein (Als Text oder auch als externes File):
HTML:
<body>
content
...
...
<script>
Hier dein Script>
</script>
//ODER!!!!!!!
<script src="name_der_js_datei_mit_dem_Code.js"></script>
</body>
Musst du das Newsletter irgendwie im html-code einbinden,
anders kann ich mir nicht erklären, warum du den Dingen Class-Namen geben kannst ("class"."")
 
Zuletzt bearbeitet:
Reactions: bzwerg

bzwerg

Neues Mitglied
23 Januar 2017
22
0
1
30
Hi, danke dir für deine schnelle Antwort. Ich hab var jetzt mal weggelassen und es hat geklappt. Danke dir!!!!

Ja, die Plattform gibt ein <script> aus welches ich an der Stelle der Website einsetzen muss, wo ich das Formular haben will. Es besteht wohl die Möglichkeit, den Script-Teil auch woanders einzubinden:

Als weiterer Parameter kann beim Formular die ID eines HTML-Elementes übergeben werden. Das ist dann nützlich, wenn Sie das Formular an einer anderen Stelle rendern möchten als das Script-Tag, das Sie einbinden:

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


ich habe versucht targedId zu ersetzen mit einer anderen Variable (bsp: 'newsletter') und dann im Bodybereich <p id=newsletter></p> - läuft aber nicht.
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.037
203
63
17
Versuch mal
#hier_die_id bei der targetID im JS-Code

Edit:
Mir ist aufgefallen, dass du
<p id=id_Name>
Geschrieben hast.
Es muss in Anführungszeichen:
id="id_Name"
Das ist auf jeden Fall ein Fehler.
Wenn es immer noch nicht hilft, dann versuch die obrige Lösung
 
Zuletzt bearbeitet:

Newsletter2Go

Neues Mitglied
6 September 2017
1
0
1
Berlin
www.newsletter2go.de
Hallo @bzwerg,

das was @Aaron3219 geschrieben hat stimmt soweit. Die Target-ID muss so im Scripte angegeben werden:

n2g('subscribe:createForm',config,'Target-ID');

Ohne die Hochkommas funktioniert dies leider nicht.

Wichtig ist auch wenn man eine Config nutzt, dass diese im Java-Script gesetzt wird und oberhalb der Funktion

n2g('subscribe:createForm',config,'Target-ID');

createForm liegt, damit die Anpassungen übernommen werden.
 

bzwerg

Neues Mitglied
23 Januar 2017
22
0
1
30
@Newsletter2Go, vielen Dank für die Antwort. Hat alles geklappt. Leider habe ich zwischen der Eingabezeile und dem linken Rand etwas Abstand, den ich mit css nicht wegbekomme. Ist um das Formular eine Tabelle?

Wenn ich Taget-ID drin habe, welchen Part muss ich an der Stelle im HTML Body einfügen?
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.037
203
63
17
Sowas kannst du doch mit den Developer-Tools überprüfen.

Aber ja kch gehe davon aus, dass es eine Tabellenspalten in einem Form sind.

Hast du einen Link zur Seite oder so?
 

heera

Neues Mitglied
9 März 2019
1
0
1
62
Hallo, ich bin schon fast kurz vorm verzweifeln. Ich habe mir bei newsletter2go ein Anmeldeformular für meine Website zusammengestellt und erhalte am Ende ein Script. Nun möchte ich gern den Absendebutton vom Style anpassen. In dem Script gibt es natürlich kein <form>-Bereich. Der Anbieter selbst schreibt folgendes:

Anpassungsmöglichkeiten / JavaScript API
Die Funktion subscribe:createForm akzeptiert zwei weitere Parameter:

Im ersten Parameter können Sie zum Anpassen des Aussehens eine Konfiguration übergeben. Folgende Konfiguration wird standardmäßig verwendet und kann von Ihnen individuell angepasst werden:

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"
},
"message": {
"type": "h2",
"class": "",
"id": "",
"style": "text-align: center;"
}
}


Fügen Sie diese Konfiguration einfach dem Call hinzu:

n2g('subscribe:createForm')
<<-- hiermit endet das Script und ich soll config einfügen:
n2g('subscribe:createForm', config)

Mein Problem: Wo soll ich den Code ab var config einfügen? Ist das ein CSS Style Part oder ein Java Script Part? Sobald ich config einfüge, wird kein Formular mit angezeigt.
Ist ja schon eine weile her, aber ich habe es so gelöst:

<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");var config = {"container": {"type": "div","class": "","style": ""},"row": {"type": "div","class": "","style": "margin-top: 15px;"},"columnLeft": {"type": "div","class": "","style": ""},"columnRight": {"type": "div","class": "","style": ""},"label": {"type": "label","class": "","style": ""},
"button": {"type": "button","class": "","id": "","style": "background-color: #00baff; border: none; border-radius: 4px; padding: 10px 20px; color: #ffffff; margin-top: 20px; cursor: pointer;"}};n2g('create', 'delcp2rn-lye5bxdv-eau');n2g('unsubscribe:createForm', config);</script>
 

pixx

Neues Mitglied
3 Mai 2019
1
0
1
45
@heera: Evtl. kannst du auch mein Newsletter2Go-Problem lösen. Das Folgende ist nach deren Anleitung auf der Website aufgebaut, läuft aber nicht. Warum?

<div>
<div id="form">
<form id="nl2go_form" method="POST">
<label>E-Mail</label>
<input name="email" type="email">
<br>
<input value="Abschicken" type="submit">
</form>
</div></div>
<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', 'eb47w1fn-n3tawvrb-rzm');

//Formular nach Abschicken auswerten

$(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];



//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>


Danke.

pixx
 
Zuletzt bearbeitet:

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.037
203
63
17
Der Thread ist fast zwei Jahre alt und eigentlich abgeschlossen.
Du kannst aber einfach ein neues Thema erstellen.
 
Reactions: Felixprogram
Status
Es sind keine weiteren Antworten möglich.
Werbung:

Latest posts