How to send emails only with HTML5 basics

Question

I am building a website to be hosted on a server that does not support PHP or other server-side language.

I need to send the values of a contact form by email and my resources are only HTML5 and Javascript.

Is there any way to send this?

Answer 1

Sending is not possible with HTML5 and Javascript only. To send an email you need an SMTP server.

This task is normally delegated to the web server (server-side), but as you explained you did not possess.

It is not possible to connect directly from a browser to an SMTP server (or any other service using a protocol other than HTTP, even for security reasons).

---

I don’t know if this is your case, but an alternative would be to leave the job of sending the email to the user, using a URL with mailto.

It is possible to specify even a subject and the body of the email, example:

<a href="mailto:?subject=Assunto do email&amp;body=Olá,%0D%0A%0D%0A[corpo do email]%0D%0A%0D%0AAtenciosamente,%0D%0A[nome do usuário]">Envie seu email!</a>

Obs:

• In the example %0D%0A represents a line break.
• Cannot use HTML in the body of the email (explained here).

Answer 2

Someone has already said that it is not possible. But, if you generate RSS (feeds) on your site, you can use a redirect service to send the email whenever the RSS is updated. There are some free services that work well. I use this one: https://ifttt.com

Answer 3

I found an alternative using Google Docs. The procedure is as follows:

• Using your Google account, create a form in drive.google.com (if you have questions, see the Google Drive documentation)

• Open the sheet related to the form (the button indicated in red does this - if it is not as in the image, click the button in that same place to create a new sheet for the form)

• In the "Tools" menu, select "Script Editor". A new window opens. Replace the code that is there with the code as in the example below (the values submitted in the form are in the columns, use e.value[Indice] to get them):

function onFormSubmit(e) {
    var toAddress = "[email protected]";
    var timestamp = e.values[0];
    var answer = e.values[1];
    var subject = "New answer";
    var emailBody = "Sao Paulo, bnla bla de blablabla" + "\n\n" +
                    "A resposta é: " + answer + "\n\n" +
                    "Hora de envio: " + timestamp;
    MailApp.sendEmail(toAddress, subject, emailBody);
}

• Save the script and go to the menu "Resources" the option "All your triggers". There, relate your new function (onFormSubmit, in the example) with the event "On form Submit", as in the image below:

You’ll need to authorize Google Drive to send emails from your account (it might be a good idea to create a specific account for this), but it works correctly (in addition to storing the data in the spreadsheet for future conferences). Another cool thing is that you can embed the form in any html page (if you need help with this, see this link, for example: http://googledocs.blogspot.com.br/2008/05/embed-your-forms.html).

I tested it here and it works perfectly. : ) The original source of this suggestion is this: http://blog.apps.chicagotribune.com/2013/02/15/using-google-docs-to-send-email/

Answer 4

You can use services such as Contactme or the Mailchimp both produce HTML to make forms directly on your site and email you or add the person to your email list (in the case of Mailchimp)

Answer 5

You can use the user’s email client so:

HTML

<textarea id="myText">
    Lorem ipsum...
</textarea>
<button onclick="sendMail(); return false">Send</button>

JAVASCRIPT

function sendMail() {
    var link = "mailto:[email protected]"
             + "[email protected]"
             + "&subject=" + escape("This is my subject")
             + "&body=" + escape(document.getElementById('myText').value)
    ;

    window.location.href = link;
}

Source: https://stackoverflow.com/questions/271171/sending-emails-with-javascript

Answer 6

Today it is possible to email via Node.js using a pretty cool package called Nodemailer. Have a tutorial in en HERE, for contact pages that use only js find the best option.