Home
Javascript
Web Development

How To Send Email From JavaScript

In This Article , We Will Explore How To Send Email Using JavaScript.

Send Email Using JavaScript

Suppose You Have A Static Website Hosted On Blogger/GitHub Or Somewhere Else Which Does Not Support Server. So There Will Be No PHP Support. This Makes Difficult For Sending Emails From Contact Us Form. But As We Can Embed JavaScript File In Our Static Website ( Using <script> /* Code Here */ </script> In Blogger Or Uploading ScriptName.js In GitHub ) , So We Need To Know How To Send An Email Using JavaScript.

Sending Email Using EmailJS

EmailJS Is Very Useful Service By Using Which We Can Send Email Directly From Client Side Using JavaScript. For This Process , We Don't Need Any Server. It Can Work On Any Platform Like Blogger , GitHub, Heroku, NetliFy etc.

  • Go To EmailJs & Create A Free Account By Entering Your Name, EMail & Passoword

  • After Creating Account, Login In Your Account. It Will Takes You To EmailJS DashBoard.
  • In Email Services, Click On 'Add New Service' Button. It Will Open A Model Box. Select 'Gmail' From The List & Click On Connect Account.
  • Your Logged In Google Account Will Popup. Select The Option 'Send Email On Your Behalf' & Click On Continue Button. After That Click On 'Create Service' Button.

  • In The Email Services, You Can See 'Gmail'. Copy The Service ID.

  • Go To Email Template & Click On Create A New Template. Make Changes In The Template According To Your Choice. You Can Also Add 'CC' & 'BCC' So That The Copy Of Same Mail Can Be Send To Some Other Contacts Also.
  • Save The Template & Copy The 'Template ID'
  • Go To 'Integration' Tab & Copy 'User ID' From There.
Now We Have Three Details : User ID, Service ID & Template ID. It Will Be Required In Next Steps.

Creating Contact Us Page

After Configuring Our Account In EmailJS, We Need To Create A Contact Us Page. I Am Creating Responsive Contact Us Page By Using Bootstrap.

Code :



Sending Email From JavaScript

Our Contact Us Page Is Ready. We Need To Add JavaScript Code For Sending Email By Using EmailJS.

  • Creating JavaScript Function
We Need To Create A Function Which Will Be Called On 'Submit' Button Click. Name It According To Your Choice. For Example , I Am Creating A Function With Name sendemail()

Now We Need To Store The Values From The TextBoxes & TextArea. For That Create Variables. For Example :

var thename = document.getElementById('thename').value;
var themail = document.getElementById('themail').value;
var themsg = document.getElementById('themsg').value;

We Need To Create A Variable Which Will Store The User ID Of EmailJS

var userid="YourUserID"; // Replace YourUserID With Your User ID Which You Copied From EmailJS

Now We Need To make Sure That All The TextBoxes & TextArea Contain Some Data. Means We Will Not Accept Empty Data. Along With That We Need To Perform Email Validation Using Regex.

Code :



Now We Need To Use EmailJS Code In Else Part As There All Our Required Criteria FullFills ( Not Any Empty Value & Valid Email )

Complete Code :



Make Sure To Replace "YourUserID" , "YourServiceID" & "YourTemplateID" With Your ID Details.
Save The File As HTML (.html Extension) & Click On 'Send' Button.
On Successful Condition , It Will Show An Alert Which Will State That Your "Email Is Sent Successfully" . On Other Hand , If There Is Any Error , It Will Show An Alert That "Error Occur" By Going In reason => Block.

In This Way , We Can Send Email From JavaScript & Implement It In Our Contact Us Or Any Other Page.

Post a Comment