mailto - Emailtext vor dem Absenden per JS bearbeiten/verschönern

[pethierb]

Hi
ich habe ein Formular mit Input-Feldern, deren Eingaben per Email verschickt werden sollen. Das Formular wird per c# generiert und ist lokal als html verfügbar (hier kein php möglich). Grundsätzlich funktioniert das Ganze.
Die Namen der Felder und deren Inhalte werden jedoch hintereinander im body eingefügt. Der Übersichtlichkeit wegen, sollen diese jedoch zeilenweise im Body stehen. Darüber hinaus soll noch ein kurzer Text angehängt werden. Die Idee wäre es, vor dem submit noch den Body per jQuery zu bearbeiten. Suche hierzu einen Lösungsansatz.

PS: Bei den Versuchen funktionierte eine Parameterlänge von ca. 1000 Zeichen (Outlook). Ist diese Beschränkung vom Emailprogramm abhängig, das mit mailto gestartet wird? Im Internet gibt es Angaben von 255....ca. 2000.

 

[basti1012]

Hast du ein Link zu deiner Seite?
Dann kann man mal schauen, was du da schon hast und was man ändern kann.

Kannst du den CSS benutzen , oder nur JS?
Man kann das mit Flexbox ganz einfach untereinander anordnen.

pethierb schrieb:
Darüber hinaus soll noch ein kurzer Text angehängt werden. Die Idee wäre es, vor dem submit noch den Body per jQuery zu bearbeiten. Suche hierzu einen Lösungsansatz.

Was willst du den im Body überhaupt ändern?

 

[pethierb]

Die Seite gibts im Moment nur offline. Letzlich sind es Aufgaben, wo in die Lücken vom Schüler die Lösung geschrieben wird. Beim Klick auf Senden wird der Inhalt aller Inputs mit input-name und input-value leider nur hintereinander als body-text in die Email übertragen. Ich hääte es gern untereinander. Das ist die default-Arbeitsweise von mailto. Als Mailto-Adresse wird die Email (des Lehrers) verwendet.
ps: ich will nicht das Erscheinungsbild der Seite ändern, nur den an das Emailprogramm übergebenen Body-string.

 

[tk1234]

Das ist die default-Arbeitsweise von mailto.

Du hast als Ziel des Formulars mailto:Mailadresse angegeben? Dann ist dein eigentliches Problem weniger die Formatierung sondern eher ob die Mails überhaupt verschickt werden: die Wahrscheinlichkeit dass das funktioniert ist eher als gering anzusehen, die einzig sinnvolle Variante ist es die Mail vom Server verschicken zu lassen.

 

[pethierb]

Wie gesagt funktioniert die Umsetzung. Der Klick auf Senden öffnet das Emailprogramm (zB Outlook). Dann wir automatisch der Empfänger, Betreff und der Emailtext eingetragen. Der Emailtext ist es, den ich nach Klick auf Senden noch ändern möchte, bevor er im Emailprogramm eingefügt wird.
Die Serveroption wird eine weitere Möglichkeit sein, die ich noch umsetzen möchte (hat aber andere Nachteile). Warum soll mit Mailto die Wahrscheinlichkeit des Gelingens eher gering sein?

 

[threadi]

Wie du einen Zeilenumbruch im body bei einem mailto-Link unterbringen kannst hängt davon ab was für einem Formar die E-Mail geöffnet wird: HTML oder Plaintext. Das Format kannst Du über den Link nicht vorgeben sondern ist eine Einstellung im E-Mail-Programm des Nutzers. Siehe auch:

https://stackoverflow.com/questions/22765834/insert-a-line-break-in-mailto-body

Nicht unbedingt jeder Nutzer hat auf seinem Endgerät ein E-Mail-Programm was beim Klick auf diesen Link gestartet werden könnte. Daher ist das schon seit einigen Jahren eine eher unübliche Art der Kontaktaufnahme. Ein Formular in der Webseite ist mit weniger Hürden verbunden wie man an diesem Beispiel hier mal wieder sehen kann.

 

[pethierb]

Das Serverprobleme besteht darin, dass der User sein erstellte Aufgabenformular auf meinen Server hochladen müßte oder aber - was noch schwieriger wäre- auf einen eigenen (Schul)Server. Wobei letzteres noch geprüft wird.
Zeilenumbruch im Body funktioniert, wenn man den body komplett im html einbindet. Wenn man aber erst nach submit an den value %0A anhängt (per foreach über alle inputs) wird das nicht übernommen.

 

[threadi]

Was ist denn das "Aufgabenformular"? Eine Datei? Die kann man problemlos per Upload-Feld hochladen und zusammen mit den anderen Formularangaben vom Server aus per E-Mail versenden. Das geht schon hier im Forum: unterhalb des Eingabefeldes ist "Datei anhängen" zu sehen wo man zum Beitrag etwas hochladen kann. Ich sehe weiterhin das Problem nicht außer, dass dir vermutlich noch das Knowhow zur Umsetzung fehlt.

 

[pethierb]

Damit es anschaulich wird hier ein paar Beispiele welche Art von Aufgaben das sind. Bei einer serverseitigen Lösung muss man für eine reibungslose Funktion sorgen und sich um die pbd kümmern und Usermanagement. Diese Arbeit will ich Moment vermeiden. Mein Focus liegt auf der c#-Software zur Erstellung dieser Aufgaben.

 

[AndreasB]

Hallo @pethierb,
für mich klingt das, als hättest du ein Formular mit dem "action" Attribut mailto:[email protected] und baust darin eine mailto-URI zusammen.

Dieses Formular könntest du uns (via Code Snippet) mal zeigen, dann kann dir hier auch besser geholfen werden.

Ich kann mir momentan nicht vorstellen, wie ohne JavaScript ein Body aus mehreren Textfeldern zusammengebaut wird, denn der body Query-Parameter darf kein Array sein.
In diesem Post gibt es eine gute Übersicht, wie die Query Parameter für eine mailto-URI lauten müssen, damit diese an den Richtigen Stellen im Mail Protokoll landen.

PS:
Zu Deiner Frage nach der Länge: Das kan an vielen Dingen liegen: Eine Einstellung im Email Program, eine Einschränkung des Mail Servers, Die maximale größe des Email Protokolls...

 

[pethierb]

Ich habe inzwischen eine für meine Zwecke passable Lösung gefunden. Statt über mailto:.. wird nach dem Klick auf einen Button der zu sendende Text in die Zwischenablage kopiert (per JS zusammengestellt). Der Nutzer muss dann sein Emailprogramm öffnen, die Emailadresse und den Betreff eingeben und am Ende den Inhalt der Zwischenablage einfügen. Das sind ein paar Zusatzschritte aber zumutbar. Außerdem gibt es kein Längenproblem.
PS: Es wäre trotzdem interessant gewesen herauszufinden, wie man den übertragenen Text nach Klick auf den Submit-Button noch ändern kann, bevor er automatisch ins Emailprogramm eingetragen wird.

 

[Gelöschtes Mitglied 36401]

Das sind ein paar Zusatzschritte aber zumutbar.

Das sehe ich ganz anders.

 

[AndreasB]

Das sehe ich ganz anders.

Ich finde das auch nicht zumutbar und habe daher ein kleines Beispiel Formular erstellt

<form id="mail-form" action="mailto:[email protected]">
    <label>Body:<br><textarea name="body" cols="30" rows="10">Test Body</textarea></label><br>
    <label>Add to Body 1:<br><input name="bodyAdditional1" type="text" value="Reihe 1"></label><br>
    <label>Add to Body 2:<br><input name="bodyAdditional2" type="text" value="Reihe 2"></label><br>
    <button>Send</button>
</form>

Die Verarbeitung würde ich so in etwa machen:

const mailFormElement = document.querySelector('#mail-form');

function onMailFormSubmit(evt) {

    // Zuerst sorgen wir dafür, dass der Formular nicht abgeschickt wird.
    evt.preventDefault();

    // Dann erzeugen wir aus dem Fromular ein FormData Objekt.
    const formData = new FormData(mailFormElement);

    // Dann holen wir den Body text und die texte aus den Zusatzfeldern.
    const bodyText = formData.get('body');
    const bodyAdditional1Text = formData.get('bodyAdditional1');
    const bodyAdditional2Text = formData.get('bodyAdditional2');

    // Hier säubern wir die FormData um nur das nötigste an den MailClient zu schicken.
    formData.delete('bodyAdditional1');
    formData.delete('bodyAdditional2');

    // Hier erstellen wir den Neuen Body Text und schreiben ihn zurück in die FormData.
    // Das newline Zeichen (\n) wird später zu einer Entity, die der Client interpretieren kann.
    const newBody = `${bodyText}\n${bodyAdditional1Text}\n${bodyAdditional2Text}`;
    formData.set('body', newBody);

    // heri erzeugen wir die URI aus der Formaction und dem Query String.
    const queryString = new URLSearchParams(formData).toString().replace(/\+/g, '%20');
    const url = `${mailFormElement.action}?${queryString}`

    // Zum Schluss schicken wir das Formular mit Hilfe von window.href ab.
    window.location.href = url;
}

// Als erstes registrieren wir einen Eventhandler für das Submit Event auf dem Formular.
mailFormElement.addEventListener('submit', onMailFormSubmit);

 

[pethierb]

Exakt das ist die Lösung, vielen Dank!