Email Notification After Form Submission Problem

Ask the community
,
1

I implemented this tutorial https://www.youtube.com/watch?v=0SVvNKNEmWk for the multistage form on this page https://www.klsread.ca/volunteers in order to receive an email notification with the information submitted.

Everything is working except the information from the last slide of the page does not get submitted and I have no idea why!

I used this code:

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

export function button5_click(event) {
$w(“#dataset2”).onAfterSave(sendFormData);
$w(“#text54”).show();
}

function sendFormData() {
const subject = “New Volunteer Registration”;
const body = `Volunteer registration form completed by: ${$w(“#input1”).value}
\rFirst Name: ${$w(“#input1”).value}
\rLast Name: ${$w(“#input2”).value}
\rPhone: ${$w(“#input3”).value}
\rEmail: ${$w(“#input4”).value}
\rAddress: ${$w(“#input5”).value}
\r18 Years of age? ${$w(“#radioGroup1”).value}
\rGender: ${$w(“#radioGroup2”).value}
\rEducation Level: ${$w(“#radioGroup3”).value}
\rCurrent Status: ${$w(“#radioGroup4”).value}
\rMedical Conditions: ${$w(“#input10”).value}
\rWork Experience: ${$w(“#input11”).value}
\rVolunteer Experience: ${$w(“#input12”).value}
\rReference #1
\rFirst Name: ${$w(“#input13”).value}
\rLast Name: ${$w(“#input14”).value}
\rContact Information: ${$w(“#input15”).value}
\rPermission to contact: ${$w(“#radioGroup5”).value}

\rReference #2 
\rFirst Name: ${$w("#input16").value} 
\rLast Name: ${$w("#input17").value} 
\rContact Information: ${$w("#input18").value} 
\rPermission to contact: ${$w("#radioGroup6").value} 

\rWhat  **do**  you hope to gain  from  volunteering?: ${$w("#input19").value} 
\rAny relevant interests, skills or talents?: ${$w("#input20").value} 

\rVolunteer opportunties: ${$w("#radioGroup7, #radioGroup8").value} 

\rEmergency Contact Information 
\rFirst Name: ${$w("#input6").value} 
\rLast Name: ${$w("#input7").value} 
\rContact: ${$w("#input8").value} 
\rRelationship: ${$w("#input9").value} 

\rWhere did you find out about KL&S?: ${$w("#radioGroup9, #radioGroup11").value} 
\rDo you consent  **for**  KL&S to use to use your photo, image or sound clip  **for**  promotional and/or publicity purposes?: ${$w("#radioGroup10").value} 
\rKingston Literacy & Skills (KL&S) respects your privacy. Read more about how we protect your personal information.`;

const recipient = “dora@opendoormedia.ca”

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

The information gets sent to the database, just not to the email.
Any thoughts?

2

Follow the actual Wix tutorial here.
https://support.wix.com/en/article/corvid-tutorial-sending-an-email-on-form-submission

You need to be using the sendgrid.js and email.jsw backend files with this page code, otherwise it is not going to work for you.
import {sendEmail, sendEmailWithRecipient} from ‘backend/email’;

Also this line here.
const recipient = “dora@opendoormedia.ca”
Needs to be the email value on the page and not an actual email.
const recipient = $w(“#emailInput”).value;

3

Hello,

Thanks so much for your reply! I followed the tutorial that you sent and my code all looks the same, except I when I changed this: const recipient = $w(" #emailInput ").value; it came up with an error. The email actually sends now, but some information at the bottom is cut off, the last few lines seem to disappear. Any ideas? I have copied and pasted my back end and front end code below:

This is what my sendgrid.js looks like:

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

This is what the backend jws looks like:

// Filename: backend/Volunteers.jsw (web modules need to have a .jsw extension)

export function multiply(factor1, factor2) {
return factor1 * factor2;
}

//Use the following code in one of your site’s front-end files
//to call the multiply function from backend/Volunteers.jsw.

/*
import {multiply} from ‘backend/Volunteers’;

$w.onReady(function () {

multiply(4,5).then(product => {
console.log(product);
// Logs: 20
})
.catch(error => {
console.log(error);
});
});
*/

import {sendWithService} from ‘backend/sendGrid’;

export function sendEmail(subject, body) {
const key = “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”;
const sender ="kingstonliteracykls@gmail.com"
const recipient = “kristin@opendoormedia.ca”
return sendWithService(key, sender, recipient, subject, body);
}

export function sendEmailWithRecipient(subject, body, recipient) {
const key = “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”
const sender ="kingstonliteracykls@gmail.com"
return sendWithService(key, sender, recipient, subject, body);
}

Here is the front end code:

import {sendEmail, sendEmailWithRecipient} from ‘backend/Volunteers’;
$w.onReady( function () {
$w(“#dataset2”).onAfterSave(sendFormData);
});
function sendFormData() {
const subject = “New Volunteer Registration”;
const body = Volunteer registration form completed by: ${$w("#input1").value} \rFirst Name: ${$w("#input1").value} \rLast Name: ${$w("#input2").value} \rPhone: ${$w("#input3").value} \rEmail ${$w("#input4").value} \rAddress ${$w("#input5").value} \r18 Years of Age ${$w("#radioGroup1").value} \rGender ${$w("#radioGroup2").value} \rEmergency Contact Information \rFirst Name: ${$w("#input6").value} \rLast Name: ${$w("#input7").value} \rContact: ${$w("#input8").value} \rRelationship: ${$w("#input9").value} \rVolunteer Information \rEducation Level: ${$w("#radioGroup3").value} \rCurrent Status: ${$w("#radioGroup4").value} \rMedical Conditions: ${$w("#input10").value} \rWork Experience: ${$w("#input11").value} \rVolunteer Experience: ${$w("#input12").value} \rReference 1 \rFirst Name: ${$w("#input13").value} \rLast Name: ${$w("#input14").value} \rContact Information ${$w("#input15").value} \rPermission to Contact ${$w("#radioGroup5").value} \rReference 2 \rFirst Name: ${$w("#input16").value} \rLast Name: ${$w("#input17").value} \rContact Information: ${$w("#input18").value} \rPermission to Contact: ${$w("#radioGroup6").value} \rWhat **do** you hope to gain from volunteering?: ${$w("#input19").value} \rAny relevant interests, skills or talents?: ${$w("#input20").value} \rVolunteer Opportunities: ${$w("#radioGroup7").value}, ${$w("#radioGroup8").value} \rWhere did you find out about KL&S?: ${$w("#radioGroup9").value}, ${$w("#radioGroup11").value} \rDo you consent **for** KL&S to use your photo, image or sound clip **for** promotional and/or publicity purposes?: ${$w("#radioGroup10").value};
const recipient = “kristin@opendoormedia.ca”
sendEmail(subject, body)
.then(response => console.log(response));
}

4

Yes that same issue was asked about in a previous forum posts a few days ago now.

The issue is that you have used the ‘&’ in your email on the SendGrid side of it and for some unknown reason they seem to cut everything off after the & is used. (Where you have KL&S)

I will find the post again and post the link up here for you, so that you can see the replies and answers and possibly chat to the other user with the issue.

5

https://www.wix.com/corvid/forum/community-discussion/solved-sendgrid-conflicts-with-form-submission-email

6

Plus the email line I talked about.

Also this line here.
const recipient = “dora@opendoormedia.ca”
Needs to be the email value on the page and not an actual email.
const recipient = $w(" #emailInput ").value;
// ignore the double id name, forum error.

It needs to be whatever your email is in the page setup which for yourself I think was input4.
const recipient = $w(“#input4”).value;

Although it would be much easier if you renamed the element ids to match up with the page and the workings, so for instance input4 would be known as email instead, much easier.
const recipient = $w(“#email”).value;

7

Plus you need to include the rest of the code after that too.

const recipient = $w(“#email”).value;

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

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

8

Before I forget too, make sure that you set this up to in your SendGrid account.
https://sendgrid.com/docs/ui/account-and-settings/how-to-set-up-domain-authentication/