it-swarm.com.de

hTML-Taste zum Senden von E-Mails

Wie sende ich eine E-Mail mit festgelegten Anfangswerten für die Header subject und message von einer Schaltfläche in html wie dieser

<form method="post" action="mailto:email.com?subject=subject&message=message">

wo subject und message werden Werte von einer form abgerufen?

20
user544079

Sie können mailto verwenden, hier ist der HTML-Code:

<a href="mailto:EMAILADDRESS">

Ersetzen Sie EMAILADDRESS durch Ihre E-Mail.

26
armn

Diese Methode scheint in meinem Browser nicht zu funktionieren, und wenn man sich umschaut, bedeutet dies, dass das gesamte Thema der Angabe von Headern zu einer mailto-Verknüpfung/-Aktion nur spärlich unterstützt wird. Dies kann jedoch hilfreich sein ...

HTML:

<form id="fr1">
    <input type="text" id="tb1" />
    <input type="text" id="tb2" />
    <input type="button" id="bt1" value="click" />
</form>

JavaScript (mit jQuery):

$(document).ready(function() {
    $('#bt1').click(function() {
        $('#fr1').attr('action',
                       'mailto:[email protected]?subject=' +
                       $('#tb1').val() + '&body=' + $('#tb2').val());
        $('#fr1').submit();
    });
});

Beachten Sie, was ich hier mache. Dem Formular selbst ist keine Aktion zugeordnet. Und der Submit-Button ist nicht wirklich ein submit-Typ, sondern nur ein button-Typ. Bei Verwendung von JavaScript bin ich an das Klickereignis dieser Schaltfläche gebunden, das Aktionsattribut des Formulars festgelegt und das Formular dann gesendet.

Es funktioniert insofern, als es das Formular an eine mailto-Aktion sendet (mein Standard-Mail-Programm wird geöffnet und öffnet eine neue Nachricht an die angegebene Adresse), aber für mich (Safari, Mail.app) gibt es eigentlich keinen Betreff oder Textkörper an in der resultierenden Nachricht.

HTML ist kein wirklich gutes Medium dafür, da ich sicher bin, dass andere darauf hinweisen, während ich das tippe. Es ist möglich, dass dies in einigen Browsern und/oder Mail-Clients funktioniert. Es ist jedoch nicht einmal eine sichere Annahme, dass Benutzer heutzutage einen fetten Mail-Client haben werden. Ich kann mich nicht erinnern, wann ich meine letzte geöffnet habe. mailto von HTML ist ein wenig veraltete Funktionalität und heutzutage ist es genau so gut, dass Sie die E-Mail-Aktion auf der Serverseite ausführen, wenn dies möglich ist.

35
David

Wie David Notizen erfüllt, erfüllt sein Vorschlag die Anfrage des OP nicht wirklich. Dies war eine E-Mail mit Betreff und Nachricht. Es funktioniert nicht, weil die meisten, möglicherweise alle, Kombinationen von Browsern und E-Mail-Clients die Attribute subject und body des mailto:-URI nicht akzeptieren, wenn sie als action von <form> angegeben werden.

Aber hier ist ein Arbeitsbeispiel:

HTML (mit Bootstrap styles):

<p><input id="subject" type="text" placeholder="type your subject here" 
    class="form-control"></p>
<p><input id="message" type="text" placeholder="type your message here" 
    class="form-control"></p>
<p><a id="mail-link" class="btn btn-primary">Create email</a></p>

JavaScript (mit jQuery ):

<script type="text/javascript">
    function loadEvents() {
        var mailString;
        function updateMailString() {
            mailString = '?subject=' + encodeURIComponent($('#subject').val())
                + '&body=' + encodeURIComponent($('#message').val());
            $('#mail-link').attr('href',  'mailto:[email protected]' + mailString);
        }
        $( "#subject" ).focusout(function() { updateMailString(); });
        $( "#message" ).focusout(function() { updateMailString(); });
        updateMailString();
    }
</script>

Anmerkungen:

  • Das <form>-Element mit dem zugehörigen action-Attribut wird nicht verwendet.
  • Das <input>-Element vom Typ button wird ebenfalls nicht verwendet .
    • <a>, das als Schaltfläche (hier mit Bootstrap) gestaltet ist, ersetzt <input type="button">.
    • focusout() mit updateMailString() ist erforderlich, da das href-Attribut des <a>-Tags nicht automatisch aktualisiert wird, wenn sich die Werte der Eingabefelder ändern.
    • updateMailString() wird auch aufgerufen, wenn ein Dokument geladen wird, falls die Eingabefelder vorbelegt sind.
  • Außerdem wird encodeURIComponent() verwendet, um Zeichen wie das Anführungszeichen (") nach Outlook zu übertragen.

Bei diesem Ansatz wird der mailto:-URI (mit den Attributen subject und body) im Tag a eines href-Elements bereitgestellt. Dies funktioniert in allen Kombinationen von Browsern und E-Mail-Clients, die ich getestet habe. Dies sind die neuesten Versionen (2015) von: 

  • Browser: Firefox/Win & OSX, Chrome/Win & OSX, IE/Win, Safari/OSX & iOS, Opera/OSX
  • E-Mail-Clients: Outlook/Win, Mail.app/OSX&iOS, Sparrow/OSX

Bonus-Tipp: In meinen Anwendungsfällen füge ich der E-Mail body kontextuellen Text hinzu. Meistens möchte ich, dass der Text Zeilenumbrüche enthält. %0D%0A (Wagenrücklauf und Zeilenvorschub) funktioniert in meinen Tests.

8
bjornte

Ich konnte nie eine Antwort finden, die die ursprüngliche Frage wirklich zufriedenstellte. Daher habe ich einen einfachen kostenlosen Dienst ( PostMail ) zusammengestellt, mit dem Sie eine standardmäßige HTTP POST Anforderung zum Senden einer E-Mail erstellen können . Wenn Sie sich anmelden, erhalten Sie Code, den Sie in Ihre Website kopieren und einfügen können. In diesem Fall können Sie einfach einen Formularpost verwenden:

HTML:

<form action="https://postmail.invotes.com/send"
    method="post" id="email_form">

    <input type="text" name="subject" placeholder="Subject" />
    <textarea name="text" placeholder="Message"></textarea>
    <!-- replace value with your access token -->
    <input type="hidden" name="access_token" value="{your access token}" />

    <input type="hidden" name="success_url"
      value=".?message=Email+Successfully+Sent%21&isError=0" />
    <input type="hidden" name="error_url"
      value=".?message=Email+could+not+be+sent.&isError=1" />

    <input id="submit_form" type="submit" value="Send" />
</form>

Ich habe diesen Dienst in voller Offenlegung erstellt, weil ich keine passende Antwort finden konnte.

2
user949286

Sie können einen Anker verwenden, um zu versuchen, den voreingestellten Standard-E-Mail-Client des Benutzers mit mailto: zu öffnen, die eigentliche E-Mail kann jedoch nicht gesendet werden. * Anscheinend ist es auch möglich, dies mit einer Formularaktion zu tun, aber die Browserunterstützung ist vielfältig und unzuverlässig, weshalb ich sie nicht vorschlage.

HTML kann keine E-Mails senden, Sie müssen eine serverseitige Sprache wie PHP verwenden, ein anderes Thema. Es gibt unzählige gute Ressourcen, wie Sie dies hier auf SO oder anderswo im Internet tun können.

Wenn Sie PHP verwenden, sehe ich SwiftMailer ziemlich viel vorgeschlagen.

2
Wesley Murch

Sie können eine E-Mail mit einem HTML-Formular nicht direkt senden. Sie können das Formular jedoch an Ihren Webserver senden und dann die E-Mail mit einem serverseitigen Programm erstellen, das z. PHP.

Die andere Lösung ist das Erstellen eines Links wie bei "mailto:". Dadurch wird das lokale E-Mail-Programm des Benutzers geöffnet. Dann kann er/sie die vorab aufgefüllte E-Mail senden.

Wenn Sie sich entschieden haben, wie Sie das tun möchten, können Sie eine weitere (spezifischere) Frage auf dieser Site stellen. (Oder Sie können irgendwo im Internet nach einer Lösung suchen.)

2

@ user544079

Obwohl es sehr alt und irrelevant ist, antworte ich, um Leuten wie mir zu helfen! es sollte so sein:

<form method="post" action="mailto:$emailID?subject=$MySubject &message= $MyMessageText">

Hier sind $ EmailID, $ MySubject, $ MyMessageText Variablen, die Sie von einer FORM oder einer DATABASE-Tabelle zuweisen, oder Sie können in Ihrem Code selbst Werte zuweisen. Alternativ können Sie den Code wie folgt eingeben (normalerweise wird er nicht verwendet):

<form method="post" action="mailto:[email protected]?subject=New Registration Alert &message= New Registration requires your approval">

0
Sagar Patra
 <form action="mailto:[email protected]" method="post"               enctype="text/plain">
 Name:<br>
<input type="text" name="name"><br>
 E-mail:<br>
<input type="text" name="mail"><br>
Comment:<br>
<input type="text" name="comment" size="50"><br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">

0
P.J. Butter