Ned help with email using sendGrid

Discussion Ask a question
,
1

Hi,
I am having an issue with my code. I am able to submit a form and receive an email confirmation of user details. However, having an issue setting up my code in my email.JWS page for the user to receive a form submission confirmation . Here is my code, any help would be great! I currently use gmail to receive form submissions from users.

email.jsw
import {sendWithService} from ‘backend/sendGrid’;

export function sendEmail(subject, body) {
const key = “API KEY IS SET”;
const sender = “WHAT EMAIL DO I USE?”;
const recipient = “WHAT EMAIL DO I USE?”;
return sendWithService(key, sender, recipient, subject, body);
}

export function sendEmailWithRecipient(subject, body, recipient) {
const key = “API KET SET HERE”;
const sender = “WHAT EMAIL DO I USE?”;
return sendWithService(key, sender, recipient, subject, body);
}

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());
}

Contact page code
import {sendEmail, sendEmailWithRecipient} from ‘backend/email’;

$w.onReady( function () {
$w(“#datasetContact”).onAfterSave(sendFormData);
});

function sendFormData() {
const subject = New Property Submission Form: ${$w("#iContactFirst").value};
const body = Name Property request Form: ${$w("#iContactFirst").value} \rFirst Name: ${$w("#iContactFirst").value} \rLast Name: ${$w("#iContactLast").value} \rPhone Number: ${$w("#iContactPhone").value} \rEmail: ${$w("#iContactEmail").value} \rMessage: ${$w("#iContactMessage").value} \rProp1: ${$w("#iContactProperties1").value} \rProp2: ${$w("#iContactProperties2").value} ;
const recipient = $w(“#iContactEmail”).value;

sendEmailWithRecipient(subject, body, recipient)
.then(response => console.log(response))

2

Hi,
This article details step by step guide about sending email using code.

Good luck :slight_smile:

3

Thanks. I have used that article already to set up sendrgid. Here is what I’m stuck with:

  1. Which Web API language should I use in sendgrid, Java or NodeJS?
  2. For Sender and Recipient, which email should I use? I have a gmail I can currently use
4

Thanks, just emailed you.

5

You can send a template email by using the following code it’s simple just follow this article

import sgMail  from '@sendgrid/mail';
 export function Form_afterInsert(item, context) {
  sgMail.setApiKey('<API KEY>');
  const msg = {
    to: item.email,
    from: 'salmanhammed77@gmail.com',
    templateId: '<TEMPLATE ID>',
    dynamic_template_data: {
      name: item.title,
      email: item.email,
      detail: item.detail,
     },
    };
  sgMail.send(msg);
}
1 Like
6

Hi @salman-hammed . My goal is to have a guest submit a form and have them and myself receive an email of their form submission details. I have it working where I receive an email of their form submission details. I want to set it up when the guest also receives their form submission details. If you look above at my code, is my setup right?

Also in your code

  1. to: What email?
  2. templateId: ‘’ : What s this?
  3. dynamic_template_data: : What d I put here?
  4. name: item.title,
    email: item.email ,
    detail: item.detail,
    Are these my form values?
7

This article explain all that
here is the screeshot

1920×988 76.7 KB

here is the link again
https://support.totallycodable.com/en/article/send-a-template-email-using-sendgrid-npm-and-wix-code
btw it’s a data hook which will explain on the article too enjoy
let me know if you still need help
I am active on Salman

2 Likes
8

@salman-hammed Thanks! After I read this, a user will be able to receive an email with the responses they made from a form they filled out? i.e Name, Phone, Email, etc.?

9

@bskarol Yeah sure you can like this form https://salman2301.wixsite.com/npmsendgrid
The form should connected to the Database
If that database has a new Entry then
“AfterInsert” hook will be triggered with the “item” object containing the value of the NEW entry

So the “item” will be like this
item = {
“title” : “Salman”,
“email” : “salmanhammed77@gmail.com”,
“phone” : 12345678,
“detail” : “This is a message!”
“fieldKey” : “fieldValue”
}
let say you have a field with a fieldKey of “phone” then
EXAMPLE:
dynamic_template_data: {
name: item.title,
email: item.email ,
detail: item.detail,
phone: item.phone,
}