Database Submissions - Forwarded to My and recipients email

So I created a custom form (not a wix form) using user-inputs and finalized with a submit button.

email.jsw backend file:

//email

import {sendWithService} from ‘database/ServiceForms’;

export function sendEmail(subject, body) {
const key = “…”;
const sender = “zaksauve@gmail.com”;
const recipient = “zaksauve@gmail.com”;
return sendWithService(key, sender, recipient, subject, body);
}

export function sendEmailWithRecipient(subject, body, recipient) {
const key = “…”;
const sender = “zaksauve@gmail.com”;
return sendWithService(key, sender, recipient, subject, body);
}


sendGrid.js backend file

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


Page file:

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

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

function sendFormData() {
const subject = Quote For Services ${$w("#input1").value};
const body = For: ${$w("#input1").value} \rName: ${$w("#input1").value} \rPhone Number: ${$w("#input2").value} \rEmail: ${$w("#input3").value} \rEvent Location: ${$w("#input4").value} \rDate of Event: ${$w("#datePicker1").value} \rComments: ${$w("#textBox1").value} \rGames: ${$w("#checkboxGroup1").value} \rHouses/Inflatables: ${$w("#checkboxGroup3").value} \rInstant Arcade: ${$w("#checkbox1").value};
const recipient = $w(“#input3”).value;

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

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

WEBSITE: https://info160562.wixsite.com/gotgamerentals

The database receives the input on SUBMIT. I don’t receive the email though.

Any suggestions?
THANK YOU!

You are using a Wix tutorial from here.
https://support.wix.com/en/article/corvid-tutorial-sending-an-email-on-form-submission

The first thing that jumps out at me is your backend file in your import for the email.jsw file.

For this code to work it needs to be fetching from the sendGrid.js file and not your database file.

1 Like

Also, when you post code blocks with API keys in, it is best to simply change them to API KEY for example in your posted code, as these API keys are unique to yourself and supposedly for your eyes only.

1 Like

Thanks for helping me! I can’t believe I missed such an important details.

I changed the fetching to sendGrid.js… but I’m still not receiving an email!

I have used the same tutorial for SendGrid and I never had any troubles with, although I did also make sure that I had setup server authentication as well, so that email providers know that SendGrid are sending emails on your behalf and they are not just getting classed as spam etc.

Plus it also gets rid of the tagline that SendGrid put on emails, something along the lines of ‘Sent by SendGrid’.

https://sendgrid.com/docs/ui/account-and-settings/how-to-set-up-domain-authentication/

Also, have a look at this youtube video from Michael (Wix Training Academy) as it walks you through the tutorial step by step. https://www.youtube.com/watch?v=0SVvNKNEmWk

Or this youtube video from Nayeli (Code Queen) which also walks you through the tutorial step by step. https://www.youtube.com/watch?v=bPd7o7hUfGk

1 Like

@givemeawhisky Thank you so much for your help!

Oh man, I don’t get it. I’ve reviewed everything three times. It’s all up to par.

Yet I still don’t receive any emails on form submission :confused:

I keep receiving this error on form submission:

Error loading web module backend/email.jsw: Cannot find module ‘sendGrid.js’ line 3

What that tutorial doesn’t tell you is this.
https://sendgrid.com/docs/ui/account-and-settings/gmail-dmarc/

You need to change your own used email to something other than gmail unfortunately.

@yisrael-wix i do suggest that this is at least now added to the Wix tutorial or mentioned within it somewhere, so Wix users know not to use Gmail, Yahoo or AOL and we don’t keep getting users back here saying that it doesn’t work and expecting us to fix it when it is easily sorted by reading SendGrid own documentation.
https://support.wix.com/en/article/corvid-tutorial-sending-an-email-on-form-submission

Also, maybe too the setting up of SendGrid server authentication should be mentioned, although this is really down to the user to do themselves and not Wix to instruct them to do so.
https://sendgrid.com/docs/ui/account-and-settings/how-to-set-up-domain-authentication/

In your page code in your imports line where it says
import { sendEmail, sendEmailWithRecipient } from ‘backend/email’;

This is importing the email.jsw and sendGrid.js files and their functions from the backend.

The same with the import command in your email.jsw backend file which calls the sendGrid.js backend file.
import {sendWithService} from ‘backend/sendGrid’;

It is telling you that it can’t find the sendGrid.js file in your backend.

So, make sure that in your backend in the site structure of your Wix Editor, that you have the two backend files exactly called as they should be.

Email backend file should be called
email.jsw

SendGrid backend file should be called
sendGrid.js

This MUST be exact.

If you don’t want the hassle of changing from gmail etc, then simply have a look at using Wix Automations - https://support.wix.com/en/ascend-by-wix/wix-automations

Or you can look at sending a triggered email as shown here.
https://support.wix.com/en/marketing-tools-analytics/triggered-emails
https://support.wix.com/en/article/creating-a-triggered-email
https://support.wix.com/en/article/corvid-tutorial-sending-a-triggered-email-to-contacts
https://support.wix.com/en/article/corvid-tutorial-sending-a-triggered-email-to-members

You can also check out Giri Zano (Forum Ninja) tutorial here, which is a similar setup to what you have used in code with SendGrid, however you will need to change the code to suit EmailJS now.
https://girizano.wixsite.com/codecorner/post/send-email-thru-gmail-and-others-in-wix-code
@giri-zano

@givemeawhisky Interesting. Would you happen to know per which date this was/is going to be introduced? Neither the SendGrid Page about dmarc nor the Google page carry a date.

@giri-zano

I’ve taken it as already happened, hence why we are getting lots of posts here about gmail not working etc.

Can’t give you an exact date, however the link SendGrid referenced at the end of their article was dated from June 2016, so it wasn’t recent.


So I don't understand the issue because everything should work. 


Hi Zak,

Please change your first line of the code as follows:

//email.jsw

import {sendWithService} from ‘backend/sendGrid’ ;

export function sendEmail(subject, body) {
const key = “YOUR.KEY” ;
const sender = “alerts@maveristic.in” ;
const recipient = “canute@maveristic.in” ;
return sendWithService(key, sender, recipient, subject, body);
}

export function sendEmailWithRecipient(subject, body, recipient) {
const key = “YOUR.KEY” ;
const sender = “canute@maveristic.in” ;
return sendWithService(key, sender, recipient, subject, body);
}