• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Newsletter2go script style

Status
Für weitere Antworten geschlossen.

bzwerg

Neues Mitglied
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.
 
Werbung:
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:
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.
 
Werbung:
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:
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.
 
@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?
 
Werbung:
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?
 
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>
 
@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:
Werbung:
Status
Für weitere Antworten geschlossen.
Zurück
Oben