Forms Without Backends, Using Webtask and SendGrid

Almost every web designer or developer has been in the position before of needing a quick and easy HTML/JavaScript web page. We don’t need a backend, we don’t need PHP or even Node.js. We just need a simple landing page.

And a contact form… about that backend that you didn’t want? Even having to have a little Node or a little PHP requires a “backend”. Doesn’t it?

Now, there is more than one solution to this problem, but let’s use this as an exercise to try out webtask.io, brought to us by Auth0. Webtask, as described by their website, is a way to

Run code with an HTTP call. No provisioning. No deployment.

It allows you to use several different methods to activate a webtask, which is typically a bit of Node.js, that you are running as a webtask instead of locally on your own webserver. This means that you can have a website without a backend, and use Webtask to cover that functionality. Or, you can use webtask for backend processes that you’d like to share among multiple environments. Really, your imagination is the limit here. Take a look at it, thumb through the features and documentation if you aren’t familiar, and then we’ll get started.

To follow along, you’ll need a Webtask account (just sign in with GitHub or other offered credentials if you like) and a SendGrid account — and go ahead and create an API key at SendGrid (it can be just email sending only), under Settings -> API Keys, and have that handy.

Webtask Setup

First, let’s get our webtask set up. There’s a handy new CLI tool that makes it perfectly easy to tackle new projects.

Go ahead and install the command line tool as instructed in the link above, and then let’s try this out. Let’s create a new file called hello.js to try this all out.

module.exports = function(cb){ 
cb(null, 'hello world');
}

Then, from the same directory, we open up our command line and run

wt create hello.js

And our first webtask is created! It will give us a URL, and if we visit it, we should get the response “hello world”. Easy enough.

OK, now, let’s dive into our project.

The Web Page

We have a rudimentary web page to serve as the basis of this example. Let’s keep in mind that this is an extremely quick functionality test of sorts — we’re trying out the technology. We have a lot that we need to keep in mind before we integrate this into our own production applications, such as:

  • Input validation
  • Security implications of having this Webtask openly available to start with (See here for information on using Webtask with Auth0)

That all said, let’s get started with cobbling together a solution here. Here’s our basic web page, form.html:

<!DOCTYPE html>
<html>
<head>
<title>webtask_forms.js Demo</title>
<link rel=”stylesheet” type=”text/css” href=”styles.css”>
</head>
<body>
<div class=”container”>
<form id=”contact” action=”[YOUR_URL]" method=”GET”>
<h3>Contact Us!</h3>
<fieldset>
<input name=”webtask_no_cache” type=”hidden” value=”1">
</fieldset>
<fieldset>
<input name=”name” placeholder=”Your name” type=”text” tabindex=”1" required autofocus>
</fieldset>
<fieldset>
<input name=”from” placeholder=”Your Email Address” type=”email” tabindex=”2" required>
</fieldset>
<fieldset>
<textarea name=”message” placeholder=”Your Message Here” tabindex=”5" required></textarea>
</fieldset>
<fieldset>
<button name=”submit” type=”submit” id=”contact-submit”>Submit</button>
</fieldset>
</form>
</div>
</body>
</html>

And here is the styles.css to go with it:

body {
font-size: 14px;
color:#000000;
background:#FFFFFF;
}
.container {
max-width:400px;
margin:0 auto;
position:relative;
}
#contact {
background:#d7d7d7;
padding:20px;
}
#contact h3{
text-align:center;
}
#contact input:focus, #contact textarea:focus {
outline:0;
border:1px solid #999;
}
#contact fieldset{
border:none;
}
#contact input[type=”text”],#contact input[type=”email”],#contact textarea{
width:100%;
}

We can see that this just gives us a basic little form that asks for a person’s name, email, and a message.

We can also see that the form’s action is [YOUR_URL]. We’ll need to replace that with the access URL that is returned for our webtask, but without the ?webtask_no_cache=1 that is appended. For simplicity’s sake, we’ve included that as a hidden input value at the start of the form.

Our Webtask

So, a basic SendGrid mailing script with Node.js looks something like the following:

var sendgrid = require(‘sendgrid’)(‘[YOUR_SENDGRID_API]’);
var email = new sendgrid.Email({
to: ‘[YOUR_CONTACT_EMAIL]’,
from: “test@example.com
subject: ‘[YOUR_DESIRED_SUBJECT]’,
html: “This is a Foo Bar Message”
});
sendgrid.send(email, function(err, json) {
if (err) {
console.log(“There was a problem submitting your message!”);
} else {
console.log(“Your message has been submitted!”);
}
});

Of course, we need to fill in our SendGrid API, our contact email address (probably ours), and our subject (“Contact Form Submission”). Beyond that, this is a basic message format. You of course may want many more, or different fields returned. It is also console.logging success or failure rather than returning or redirecting us, at the moment. We may extend that and have it print out the error message if the Sendgrid mailing fails, just to let us debug while we develop.

Now, let’s pack all of this into a Webtask as we did with our Hello World example:

module.exports = function(ctx, cb) {
 var sendgrid = require(‘sendgrid’)(‘[YOUR_SENDGRID_API]’);
 var email = new sendgrid.Email({
to: ‘[YOUR_CONTACT_EMAIL]’,
from: ctx.data.from,
subject: ‘[YOUR_DESIRED_SUBJECT]’,
html: “Name: “ + ctx.data.name + “<br/><br/>Message: “ + ctx.data.message
});
  sendgrid.send(email, function(err, json) {
if (err) {
cb(err)
} else {
cb(null, “Your message has been submitted!”)
}
});
}

So, now we are employing the ctx parameter, which will allow us to use appends to our URL, GET style (i.e. &name=Jeff). We access that data using the format ctx.data.item, as we can see above. Finally, let’s go ahead and just raw output the error we get back from SendGrid if the mailing function fails (Please don’t do this when you set up Webtask in your production app, but sometimes it’s helpful to see if your mailing fails — usually that will be because you didn’t set up your API key, or didn’t copy it correctly into the webtask). So, let’s fill in our SendGrid API key, our contact email, and our subject line, and take a look, by saving this file as webtask_forms.js and then running:

wt create webtask_forms.js

Now, for our final step before trying this out, we take the URL we’re provided with after creating our webtask, remove the ?webtask_no_cache=1 from the end if it’s there, and paste the URL into our form action. Now let’s save that, and go to our form.html in a web browser, fill it out, and let’s see if it works!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.