• BLOG

  • Build an email-sender form for a static website

    ven. 22 mai 2015 Dan Lousqui

    Share on: Twitter - Facebook - Google+

    For the 21th time in nearly 10 years, I've built my blog ! However this time, I used a tool that enable me to build it with static pages. I won't deal with the pros and cons in this article, however, a static website comes with some limitation. For example, if you need to make a form in order to send email (see my "Contact" page), some tricks may be used.

    tl;dr;

    I searched for WebServices and Web API allowing me to do this, I've come with a solution that use :

    • Parse as an API entry point, Parse is free as long as you have less than 30 requests per second. I think we will easily be under that :-)
    • Sendgrid as a email sender webservice. Sendgrid is free as long as you send less thhan 400 emails per day.

    Step 1: Register to sendgrid and Parse

    Easy step, just register to both services. Note that if you register yourself to Parse using Facebook, you will need to set a password for your account.

    You will also need to create a new application on Parse.

    Step 2: Write Parse Cloud code in order to have an API entry point

    Get the Parse Command Line Tool (here).

    Use the this tool to create a sendmail project: $ parse new sendmail

    A sendmail directory should be created. Open the main.js file, and write this code :

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
    Parse.Cloud.define("sendmail", function(request, response) {
  sendgrid_username = "TO_BE_DEFINED";
  sendgrid_password = "TO_BE_DEFINED";
  my_email = "TO_BE_DEFINED";

  var sendgrid = require("sendgrid");
  sendgrid.initialize(sendgrid_username, sendgrid_password);
  var name = request.params.name;
  var email = request.params.email;
  var subject = request.params.subject;
  var message = request.params.message;
  sendgrid.sendEmail({
   to: my_email,
   from: email,
   fromname: name,
   subject: "[SendMail]" + message,
   text: "Name: "+name+"\nEmail: "+email+"\nMessage:\n\n"+message
   }, {
     success: function(httpResponse) {
       response.success("Ok");
    },
     error: function(httpResponse) {
       response.error("Ko");
    }
  });
});

    Then, you just need to deploy your code with the following command (inside sendmail project) parse deploy

    Now, you got your own webservice allowing you to send an email. Let's write an HTML / JS form to use it.

    Step 3: Create a static form that use the email sender

    The HTML form is pretty standard, here is a minimal code :

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
    <html>
  <head>
    <title>Contact me</title>
    <!-- jQuery -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!-- Parse -->
    <script src="http://www.parsecdn.com/js/parse-1.2.16.min.js"></script>
    <!-- Custom script (see later...) -->
    <script src="/js/emailer.js"></script>
  </head>
  <body>
    <form id="contact">
      <label for="name">Name:</label>
      <input type="text" name="name" id="name" placeholder="Name">
      <br />
      <label for="emailAddress">Email Address:</label>
      <input type="email" name="email" id="email" placeholder="Email address">
      <br />
      <label for="subject">Subject:</label>
      <input type="text" name="subject" id="subject" placeholder="Subject">
      <br />
      <label for="message">Message</label>
      <textarea name="message" id="message" rows="5" cols="10" placeholder="Your message">
      </textarea>
      <br />
      <button type="submit">Send</button>
    </form>
  </body>
</html>

    Now here is the JS code that catch the form submission and send it to the Parse Webservice :

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    $(document).ready(function(){
  PARSE_APP_KEY = "TO_BE_DEFINED";
  PARSE_JS_KEY = "TO_BE_DEFINED";

  Parse.initialize(PARSE_APP_KEY, TO_BE_DEFINED);
  $('#contact').submit(function(e){
    e.preventDefault();
    var data = { 
      name: document.getElementById('name').value, 
      email: document.getElementById('email').value,
      subject: document.getElementById('subject').value,
      message: document.getElementById('message').value
    }
    Parse.Cloud.run("sendEmail", data, {
      success: function(object) {
        alert('Message sent');
      },
      error: function(object, error) {
        alert('Error');
      }
    });
  });
});

    Now it's all good man :-) Just try it out !

  • Comments