SendGrid Subscription Form 2021

SendGrid doesn’t support double opt-in natively, so we have to use a quick and easy work around in order to get it working, this is going to be a sample on how to do that:

Photo by Solen Feyissa on Unsplash

Let’s Start With The Form

Next Let’s Add Some Styles

Now let’s make sure it submits:

That’s it, we’re all done on the front end, let’s move to the back end

First we’ll need to get our dependencies, create a new project and install the required dependencies:

npm init
npm i --save express cors @sendgrid/client @sendgrid/mail

Next let’s create our main file: index.js and add some functionality:

Now let’s set up our network connections

Now we need something to handle the form submission

Let’s now expound on that sendEmail function

Confirming

Now that we’ve got our email sent, let’s add another function to accept the request when the user clicks the link in the email to confirm their subscription

Finally, the function that actually does the subscription

And that’s it!

Conclusion

A few things to note:

1. This is by no means an extensive tutorial, this code is functional and will get the job done, however there are further optimisations that could be made.

2. We don’t actually need the SendGrid Mail dependency since already have the SendGrid Client dependency, but it’s easier that way.

3. You should send a hash or code of some kind in the confirmation link instead of the users details, this way, no false subscriptions can be made as it would be validated on your back end.

This is a simple and easy way to do your SendGrid Double Opt-Ins and it works like a charm :) !

Enjoy!