//email.jsw
import {sendWithService} from ‘backend/sendGrid’;
export function sendEmail(subject, body) {
const key = “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”;//my new API key
const sender = “info@mydomain.com”;//my personal email
const recipient = “to.email@domain.com”;
return sendWithService(key, sender, recipient, subject, body);
}
export function sendEmailWithRecipient(subject, body,recipient) {
const key = “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”;
const sender = “info@mydomain.com”;//my personal email
return sendWithService(key, sender, recipient, subject, body);
}
//SendGrid.js
// I didn’t change anything here
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());
}
Hey, what errors do you get? Try to open the Developer Console and look for any errors and paste them in here. It is very hard to see something wrong if we can’t see the possible errors you get. If you do not get any error and an OK back from SendGrid then it is a SendGrid issue with the from address you are trying to send from.
actually i am not getting the error.
when i was pushing the send button,process is completing.only my mail is not reaching to “info@mydomain.com”(this is my email adress) email adres.
i need to set it up on sendgrid or gmail side something?
Is that a valid email address? Just asking because if you are trying to send from unknown address SendGrid is the one that will not send the email. You can whitelist senders inside the Dashboard of your SendGrid Account.
I have same issue but in my case it is giving error on following codes with highlighting line.
ERROR:
DatasetError: Operation (onAfterSave) not allowed during save.
MY CODES ON PAGE :
import wixData from ‘wix-data’;
import {sendEmail, sendEmailWithRecipient} from ‘backend/email’;
export function button5_click(event) {
let toInsert = {
“title”: $w(‘#input1’).value,
“address”: $w(‘#input3’).value,
“mobile”: $w(‘#input2’).value,
“totalAmount”: $w(‘#input4’).value,
“noOfSandwich”: $w(‘#dropdown4’).value,
“noOfBurgers”: $w(‘#dropdown3’).value,
“noOfBiryanis”: $w(‘#dropdown2’).value,
“noOfCholay”: $w(‘#dropdown1’).value,
“totalQuantity”: $w(‘#input5’).value
};
wixData.insert(“Orders”, toInsert)
.then( (results) => {
let item = results; //see item below
} )
. catch ( (err) => {
let errorMsg = err;
} );
$w.onReady( function () {
$w(“#dataset2”).onAfterSave(sendFormData); <— GIVING ERROR ON THIS
});
function sendFormData() {
const subject = New Submission **from** ${$w("#input1").value};
const body = Name: ${$w("#input1").value} \rMobile: ${$w("#input2").value} \rAddress: ${$w("#input3").value} \rCholay: ${$w("#dropdown1").value} \rBiryani: ${$w("#dropdown2").value} \rBurger: ${$w("#dropdown3").value} \rSandwiches: ${$w("#dropdown4").value} \rQuantity: ${$w("#input5").value} \rAmount: ${$w("#input4").value};
const recipient = “samibaigmic@gmail.com”;
sendEmailWithRecipient(subject, body, recipient)
.then(response => console.log(response));
}
Please help me out that where where I am loosing space.
Check these links:
Wix Tutorial: Velo Tutorial: Sending an Email on Form Submission | Help Center | Wix.com
Wix Youtube Video: How To Send An Email Notification After Form Submission in Wix - Wix Code Tutorial - YouTube
Use the above video and it will go through it all and you should be able to sort out your issues.
However, I have noticed that your page code is a bit long, remember that everything from the input form is added to the dataset and then the code kicks into gear, as stated on the tutorial page:
Finally, in the Page Code on the same page as the form, we add an event handler that runs each time a new item is successfully submitted. The event handler takes the values from the form to create the subject and the body of the email. That information is then passed along to the backend functions we wrote above.
Plus under ‘const recipient’, that should be a value on your form and not your own email address (all that is set in your email.jsw) and if you are having emails sent to both yourself when the form is submitted and the user who submitted the form, then you are also missing code from the bottom of it too.
Assuming you have already got both the email.jsw and sendGrid.js backend files set up correctly as well and you are having emails sent out to yourself and the user who submitted the form, then this is my page code and yours should be very similar to it too.
import { sendEmail, sendEmailWithRecipient } from 'backend/email';
$w.onReady(function () {
$w("#JoinUsForm").onAfterSave(sendFormData);
});
function sendFormData() {
const subject = `Join Us Form Submitted From ${$w("#firstName").value}`;
const body = `Join Us Form Submitted From ${$w("#firstName").value}
\rFirst Name: ${$w("#firstName").value}
\rLast name: ${$w("#lastName").value}
\rEmail: ${$w("#email").value}
\rChoir Role: ${$w("#choirRole").value}
\rRead Music: ${$w("#readMusic").value}
\rChoir Before: ${$w("#choirBefore").value}
\rStart Now: ${$w("#startNow").value}
\rStart Date: ${$w("#startDate").value}`;
const recipient = $w("#email").value;
sendEmailWithRecipient(subject, body, recipient)
.then(response => console.log(response));
sendEmail(subject, body)
.then(response => console.log(response));
}
3 Likes
@givemeawhisky
$w("#JoinUsForm" <-- Is this your dataset?
@samibaigmic
Yes, just change it to whatever your dataset id is.
@samibaigmic
Just go to these links from my previous reply and copy the code straight from them:
Wix Tutorial: https://support.wix.com/en/article/wix-code-tutorial-sending-an-email-on-form-submission
Wix Youtube Video: https://www.youtube.com/watch?v=0SVvNKNEmWk
Then all you have to do is paste in your own SendGrid API key and enter your own email details to suit yourself, my code is exactly the same for both backend files as it is on the tutorial page and the youtube video, with just my own api key and email addresses added.
@samibaigmic These examples should be helpful:
Send Email with SendGrid NPM Interface
Send an email using the SendGrid NPM library.
Send Email with SendGrid REST Interface
Send an email using the SendGrid REST API.