Coder Social home page Coder Social logo

mailer.js's Introduction

Mailer

  • A JS script to recieve mails at your email id of form submissions from any website.

Quick start

  • Clone this repository to your local machine.
  • Move to this repository and do npm install --save to install and save dependencies.
  • Open index.js and make the following configuration changes.
  if(origin=="http://randomsite.com" || origin=="https://randomsite.com" || origin == "randomsite.com")
  • Change the origin value to all the sites you want to accept requests from.
var transporter = nodemailer.createTransport('smtps://[email protected]:[email protected]');
  • Change the email id and password field here from [email protected] and password123 to valid email id and password which you'll use to send mails.
var mailOptions = {
        from: '"'+request.body.username+'" <'+request.body.email+'>',// sender address 
        to: '[email protected]', // list of receivers ,change id here to set receiver id
        text: "From : " + " " + request.body.username + " " +request.body.msg + "His id : " + request.body.email, // plaintext body  
        subject: 'New response from contact form  by : โœ”' + request.body.username // Subject line 
    };
  • Configure mail options to specify list of receivers and body of the email you want to recieve. Make sure these(request.body.element) exist in your request's name attribute. For example, the above configuration works for a form that looks like this with the following post request :
<form id="contact-form">
  <div>
    <input type="text" name="contactName" id="contact-name">
    <label class="input-label" for="contact-name">Name</label>
  </div>
  <div>
     <input type="email" name="contactEmail" id="email">
     <label class="input-label" for="email">Email</label>
  </div>
  <div>
      <textarea name="contactMessage" id="textarea1"></textarea>
      <label class="input-label" for="textarea1">Message</label>
  </div>
  <button class="submit-btn" type="button">send message</button>
</form>
$(".submit-btn").click(function(e) {
        if($('#contact-name').val() == "" || $('#email').val()==""|| $('#textarea1').val()=="" || !$("#contact-form")          [0].checkValidity()) {
            window.alert("Incomplete data", "Please fill out all the fields correctly. Thanks :)");
        }
        else {
          $.post(
              'https://your-app-name.herokuapp.com/', 
              {
                username: $('#contact-name').val(),
                email: $('#email').val(),
                msg: $('#textarea1').val()
              }, 
              function(res) {
                console.log(res);
                  $('#contact-name').val("");
                  $('#email').val("");
                  $('#textarea1').val("");
                if(res.success==0) {
                 window.alert("Reach out directly at [email protected]. Sorry for inconvenience");
                }
                else {
                  window.alert("Thanks!", "I'll reach out to you as soon as I can.!");
                }
              }
          );
      	}
      });
npm init
git init
git add .
git commit -m "Mailer v0.1"
heroku login
heroku create
git push heroku master
  • If everything went well, you should now have a heroku url where your script is deployed. Replace that url with the https://your-app-name.herokuapp.com/ in the POST request.

  • And you are good to go. Create a submit button in your form, set correct attributes in both the request and the request.body.element in form and script respectively, bind this post request to the submit button of your form and you should receive the submmited form data in your id.

mailer.js's People

Contributors

deepakpathania avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.