Кнопка HTML для отправки электронной почты

Question

Как отправить электронное письмо с указанными начальными значениями для заголовков subject и message с кнопки в html, например:

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

, где subject и messageзначения, извлеченные из form?

Answer 1

Этот метод, по-видимому, не работает в моем браузере, и осмотр указывает, что вся тема указания заголовков для mailto ссылки / действия редко поддерживается, но, возможно, это может помочь ...

HTML:

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

JavaScript (с jQuery):

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

Обратите внимание, что я здесь делаю. Сама форма не имеет никаких действий, связанных с ней. И кнопка отправки на самом деле не является submit типом, это просто button тип. Используя JavaScript, я связываюсь с событием нажатия этой кнопки, устанавливаю атрибут действия формы и затем отправляю форму.

Он работает настолько, насколько отправляет форму действию mailto (моя почтовая программа по умолчанию выскакивает и открывает новое сообщение по указанному адресу), но для меня (Safari, Mail.app) это не совсем так. указав тему или текст в полученном сообщении.

HTML на самом деле не очень хорошая среда для этого, так как я уверен, что другие указывают, когда я набираю это. Вполне возможно, что это может работать в некоторых браузерах и / или некоторых почтовых клиентах. Тем не менее, на самом деле это даже не безопасное предположение, что в наши дни у пользователей будет толстый почтовый клиент. Я не могу вспомнить последний раз, когда я открыл свой. mailto в HTML - это немного устаревшая функциональность, и в наши дни очень хорошо, если вы выполняете действия с почтой на стороне сервера, если это возможно.

Answer 2

Вы можете использовать mailto, вот код HTML:

<a href="mailto:EMAILADDRESS">

Замените EMAILADDRESS электронной почтой.

Answer 3

Как заметил Дэвид , его предложение на самом деле не удовлетворяет запросу ОП, которое было электронным письмом с темой и сообщением . Это не работает, потому что большинство, может быть, все комбинации браузеров и почтовых клиентов не принимают атрибуты subject и body URI mailto:, если они поставляются как <form> * action.

Но вот рабочий пример:

HTML (с Bootstrap стилями):

<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 (с 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:person@email.com' + mailString);
        }
        $( "#subject" ).focusout(function() { updateMailString(); });
        $( "#message" ).focusout(function() { updateMailString(); });
        updateMailString();
    }
</script>

Примечания:

• Элемент <form> со связанным атрибутом action не используется.
• Элемент <input> типа button также не используется.
  • <a> в стиле кнопки (здесь используется Bootstrap) заменяет <input type="button">
  • focusout() с updateMailString() необходимо, поскольку атрибут href тега <a> не обновляется автоматически при изменении значений полей ввода.
  • updateMailString() также вызывается при загрузке документа, если поля ввода предварительно заполнены.
• Также encodeURIComponent() используется для передачи символов, таких как кавычка ("), в Outlook.

В этом подходе URI mailto: предоставляется (с атрибутами subject и body) в теге a элемента href. Это работает во всех протестированных мною браузерах и почтовых клиентах, которые являются последними (2015 г.) версиями:

• Браузеры: Firefox / Win & OSX, Chrome / Win & OSX, IE / Win, Safari / OSX и iOS, Opera / OSX
• Почтовые клиенты: Outlook / Win, Mail.app/OSX&iOS, Sparrow / OSX

Бонус: в моих случаях я добавляю некоторый контекстный текст в электронное письмо body. Чаще всего я хочу, чтобы этот текст содержал разрывы строк. %0D%0A (возврат каретки и перевод строки) работает в моих тестах.

Answer 4

Я так и не смог найти ответ, который действительно удовлетворил бы первоначальный вопрос, поэтому я собрал простой бесплатный сервис ( PostMail ), который позволяет вам сделать стандартный запрос HTTP POST для отправки электронного письма. Когда вы регистрируетесь, он предоставляет вам код, который вы можете скопировать и вставить на свой сайт. В этом случае вы можете просто использовать форму сообщения:

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>

Опять же, в полном раскрытии, я создал этот сервис, потому что не смог найти подходящий ответ.

Answer 5

Вы не можете напрямую отправить электронное письмо с HTML-формой. Однако вы можете отправить форму на свой веб-сервер, а затем сгенерировать электронное письмо с помощью серверной программы, написанной, например, на. PHP.

Другим решением является создание ссылки, как вы сделали с «mailto:». Это откроет локальную почтовую программу от пользователя. Затем он / она может отправить предварительно заполненное электронное письмо.

Когда вы решили, как вы хотите это сделать, вы можете задать еще один (более конкретный) вопрос на этом сайте. (Или вы можете найти решение где-нибудь в Интернете.)

Answer 6

Вы можете использовать привязку, чтобы попытаться открыть почтовый клиент по умолчанию, предварительно заполненный, с помощью mailto:, но вы не можете отправить фактическое электронное письмо. * По-видимому, это можно сделать и с помощью действия с формой, но поддержка браузера разнообразна и ненадежна, поэтому я не предлагаю этого.

HTML не может отправлять почту, вам нужно использовать язык на стороне сервера, такой как php, что является другой темой. Есть много хороших ресурсов о том, как сделать это здесь, в SO или в другом месте в Интернете.

Если вы используете php, я вижу, SwiftMailer предложил совсем немного.

Answer 7

@ user544079

Хотя сейчас оно очень старое и не имеет значения, я отвечаю, чтобы помочь таким людям, как я! должно быть так:

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

Здесь $ EMAILID, $ MySubject, $ MyMessageText - это переменные, которые вы назначаете из таблицы FORM или DATABASE или просто можете назначать значения в самом коде. В качестве альтернативы вы можете поместить код следующим образом (обычно он не используется):

<form method="post" action="mailto:admin@website.com?subject=New Registration Alert &message= New Registration requires your approval">

Answer 8

 <form action="mailto:someone@example.com" 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">