Email Notification After Form Submission Problem

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