Need Help with Sending Email on Form Submission Using SendGrid

Ask the community
,
1

I am not having luck with the code provided in the “Velo Tutorial: Sending an Email on Form Submission” ( Velo Tutorial: Sending an Email on Form Submission | Help Center | Wix.com ) and could use some help. I have created a custom form using input fields and a “Submit” button that, when clicked, saves the input data to a form dataset. All of that works fine - the data saves to the dataset like it’s supposed to. I would like to have an email sent when the “SUBMIT” button is clicked alerting me that a new request has been submitted on the website.

Here is the code I have:

email.jsw (copied from tutorial code, with exception of not using Secrets Manager):

//email.jsw

import {sendWithService} from 'backend/sendGrid';

export function sendEmail(body) {
  const key = "MY_KEY_INSERTED_HERE";
  const sender = "SENDER_EMAIL_INSERTED_HERE";
  const recipient = "RECIPIENT_EMAIL_INSERTED_HERE";
  return sendWithService(key, sender, recipient, subject, body);
}

sendGrid.js (copied from tutorial code exactly)

//sendGrid.js

import {fetch} from 'wix-fetch';

export function sendWithService(key, sender, subject, body) {
    const url = "https://api.sendgrid.com/api/mail.send.json";
    
    const headers = {
        "Authorization": "Bearer" + key,
        "Content-Type": "application/application/x-www.form/urlencoded"
    };

    const data = 'from=${sender}&to=${recipient}&subject=${subject}&text=${body}';

    const request = {
        "method": "post",
        "headers": headers,
        "body": data
    };

    return fetch(url, request)
        .then(response => response.json());
}

Page Code:

import {sendEmail} from 'backend/email';

$w.onReady(function () {
    $w("#announcerequestDataset").onAfterSave(sendNewRequestEmail);
});

function sendNewRequestEmail() {
    const subject = 'New Announcement Request Submitted';
    const body = 'A new announcement request has been received on the website.';

    sendEmail(subject, body)
        .then(response => console.log(response));
}

Any ideas as to why this isn’t working? Thanks!

2

Hi Molly,

Taking a look at the code you posted I noticed that your data variable in sendGrid.js has single quotes rather than backticks. This would prevent JavaScript from being able to interpret the Template Literal .

Using the example you provided it should look like this:

sendGrid.js

//sendGrid.js

import {fetch} from 'wix-fetch';  

export function sendWithService(key, sender, recipient, subject, body) {
  const url = "https://api.sendgrid.com/api/mail.send.json";
 
  const headers = {
    "Authorization": "Bearer " + key,
    "Content-Type": "application/x-www-form-urlencoded"
  };

  const data = `from=${sender}&to=${recipient}&subject=${subject}&text=${body}`;
 
  const request = {
    "method": "post", 
    "headers": headers, 
    "body": data
  };
 
  return fetch(url, request)
   .then(response => response.json());
}

Assuming you have the code above in the proper file you should first try testing out the SendGrid API by calling sendWithService() via the Functional Tester

For demonstration sake, I tested out my implementation using the following object:

{
    "key": "Your SendGrid Api Key",
    "sender": "Your Verified Sender Email",
    "recipient": "Recipient Email",
    "subject": "Hello World",
    "body": "This is a example email!"
}

And as you can see below upon running sendWithService() using the Functional Tester I received the following success message:

1078×152 15.5 KB

From there if you can get this function running you should be able to successfully send a alert email via the other code that is provided in this example.

Good luck with your project!

3

That was it! Thank you so much!!! Got it working now.