Wix Code - Sending form submission to three recipients

Discussion Ask a question
,
1

Hi! I am a designer, who has a little bit of knowlege with code. I have followed all the steps in the Wix walk-through and followed a youtube video to set-up an automatic email to be sent to my clients when someone fills out their form and it works SUCCESSFULLY. I am using SendGrid as recommended in the Wix article (see below).

The problem is that I need this form to send out an email to THREE different email addresses: 1 email when someone fills out the form, and 2 emails to two different people on our team including the info from the form.

Below are screen shots of the code I currently have, and the links to the article/video that helped me set everything up successfully.

Thanks in advance for your help!

VIDEO: https://www.youtube.com/watch?v=bPd7o7hUfGk
ARTCILE: Velo Tutorial: Sending an Email on Form Submission | Help Center | Wix.com

SCREENSHOTS
Backend Code .JSW (below)

1628×714 90.3 KB

You can see that the recipient is the email address that starts with “emily@”, and when I had copy and pasted another recipient line, I got an error.

Backend .JS Code (using SendGrid)

1530×930 88.2 KB

On-Page Code

1920×1170 229 KB

2

Code from above, pasted here for easy editing for you:

WEB MODULE .JSW
//email.jsw
import {sendWithService} from ‘backend/sendGrid’;
export function sendEmail(subject, body) {
const key = “API CODE HERE”;
const sender = “osprey@wecaninternational.org”;
const recipient = “emily@wecaninternational.org”;
return sendWithService(key, sender, recipient, subject, body);
}
export function sendEmailWithRecipient(subject, body, recipient) {
const key = “API CODE HERE”;
const sender = “osprey@wecaninternational.org”;
return sendWithService(key, sender, recipient, subject, body);
}

WEB MODULE .JS
//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());
}

ON PAGE CODE

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

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

function sendFormData() {
const subject = Thanks **for** joining WECAN, our growing network of Women **for** Climate Justice, ${$w("#input1").value};
const body = Name: ${$w("#input1").value} \rName: ${$w("#input1").value} \rEmail: ${$w("#input2").value} \rCountry: ${$w("#input3").value} \rOrganization: ${$w("#input4").value} \rComments: ${$w("#textBox1").value} \rOptin1: ${$w("#checkbox1").value} \rOptin2: ${$w("#checkbox2").value} \rOptin3: ${$w("#checkbox3").value};
const recipient = $w(“#input2”).value;

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

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

3

Hi Jess,

The following:

  • const subject

  • const body

  • const recipient
    are the ones you need to duplicate such as

  • const subject1

  • const body1

  • const recipient1
    Then send it to the backend modules with your sendEmail

Please see an example below:

 
function sendFormData() {
 const subject1 = `Booking Confirmation`;
 const body1 = `Hi`;
 const recipient = $w("#input4").value;
 
 const subject2 = `English Client Booking`;
 const body2 = `Hello`;
 
 sendEmailWithRecipient(subject1, body1, recipient)
 .then(response => console.log(response));
 
  sendEmail(subject2, body2)
    .then(response => console.log(response)); 
}

You can call them as many times you want using the above example

4

Hi Shan!

Thank you! Could please copy and paste the code I sent above your comment to show me where this should go… for instance, not 100% sure which module this code should be placed.

5

Or please confirm that this is correct:

const subject2 = Thanks **for** joining WECAN, our growing network of Women **for** Climate Justice, ${$w("#input1").value};
const body2 = Name: ${$w("#input1").value} \rName: ${$w("#input1").value} \rEmail: ${$w("#input2").value} \rCountry: ${$w("#input3").value} \rOrganization: ${$w("#input4").value} \rComments: ${$w("#textBox1").value} \rOptin1: ${$w("#checkbox1").value} \rOptin2: ${$w("#checkbox2").value} \rOptin3: ${$w("#checkbox3").value};

sendEmailWithRecipient(subject1, body1, recipient)
.then(response => console.log(response));

sendEmail(subject2, body2)
.then(response => console.log(response));

6

Did you mean a total of 3 emails including the Email being sent to the person who is filling the form ?

If thats the case then you need to do this to your email.jsw

//email.jsw

import {sendWithService} from 'backend/sendGrid';

export function sendEmail(subject, body) {
const key = "";
const sender = "osprey@wecaninternational.org";
const recipient = "emily@wecaninternational.org";
return sendWithService(key, sender, recipient, subject, body);
}

export function sendEmailWithRecipient(subject, body, recipient) {
const key = "";
const sender = "osprey@wecaninternational.org";
return sendWithService(key, sender, recipient, subject, body);
}

//Add the below function
  
export function sendThirdEmail(subject, body) {
const key = "";
const sender = "osprey@wecaninternational.org";
const recipient = "youremailaddress" //enter your email address here
return sendWithService(key, sender, recipient, subject, body);
}

And If its the same data then the Page Code will look like this:

function sendFormData() {

 const subject = `Thanks for joining WECAN, our growing network of Women for Climate Justice, ${$w("#input1").value}`;
 const body = `Name: ${$w("#input1").value}
    \rName: ${$w("#input1").value}
    \rEmail: ${$w("#input2").value}
    \rCountry: ${$w("#input3").value}
    \rOrganization: ${$w("#input4").value}
    \rComments: ${$w("#textBox1").value}
    \rOptin1: ${$w("#checkbox1").value}
    \rOptin2: ${$w("#checkbox2").value}
    \rOptin3: ${$w("#checkbox3").value}`;
 const recipient = $w("#input2").value;
 
 
  sendEmailWithRecipient(subject, body, recipient)
    .then(response => console.log(response)); 
 
  sendEmail(subject, body)
    .then(response => console.log(response));

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

Sorry I might have misunderstood your goal initially

7

Oh… Thank you!

I will test this code and remove my API from the thread.

8

And to answer your question, yes!

Right now, the form sends one to the person who fills out the form, and one to Emily (on our team). I’m trying to get this form to send three emails, 1 to the person who fills out the form, and 2 that are sent to people on our team.

Is there a way to make the form that is sent to the user and the two to our team different? For instance, I’d like the email to say “thanks for joining our team! Someone will reach out to you shortly” and then the form information sent to two people on our team.

9

Also, can the body be any size? I can truncate the subject, but I would like the body to say something a little more if possible.

10

both my above comments will help you achieve that

you can create 2 different emails with my 1st comment example and send it to multiple people with the example in my 2nd comment

11

Thank you so much Shan. Going to test out the code now.
Will let you know if it works or need more assistance.

12

I am having an error with the on-site code:
It says that it’s not defined. I copy and pasted your .jsw code and added in the other recipient email, so it should be working… right?

1340×1104 144 KB

13

For reference, this is where the form exists: https://jessrightdesign.wixsite.com/wecan1/join-the-network

14

hi,

try this for line 8

import {sendEmail, sendEmailWithRecipient, sendThirdEmail}

15

THANK YOU for all your help Shan! This worked for me!