Sending an Email on Form Submission

Hi Sam,

Great! IT WORKS NOW! (the devil is in the details!!!).

Please, now I need to send the email simultaneously to several email adresses within the organisation for them to coordinate the follow up on the intersted customer. I tried adding other emails in the way you can see in the attached image, but I am still receiving te email only to the first address, and the other are ingonred. The function still runs, but the email is sent only to the forst recepient. How do I add other recipient email addresses?

Thanks.

Okay, this is more of a SendGrid question, but I was curious, so I worked it out anyhow.

  1. Add multiple recipients as you have done above.

  2. In the sendGrid.jsw file, change the line that begins with const data to the following two lines:

const recipients = recipient.split(";").map( (x) => "to[]=" + x + "&" ).join("");

const data = `from=${sender}&${recipients}&subject=${subject}&text=${body}`;

We could probably clean this code up a bit, but this should get the job done.

Thanks Sam!!!

Everything working just as a clock!!!

Second CODING SUCESS on the list!!!

Time to start number 3!

Hey there
I am trying to enable Transactional Templates this way but it returns success when sending it to the API but inside the API it states that the SMTPAPI HEADER is invalid. Any ideas?

const templates = `{
 		"filters": [{
		"templates": [{
			"settings": [{
				"enable": 1,
				"template_id": "71674a51-9469-47cf-8233-158530872533"
			}]
		}]
	}]
	}`;
  const data = `from=${sender}&to=${recipient}&subject=${subject}&text=${body}&x-smtpapi=${templates}`;
 

Any help would be appreciated.

Great job! How can I collect files from the form upload button using sendgrid?

Any idea on how to get template id sent to sendgrid through wix? I just can’t makt it work.

Hi I’m getting a glitch on the email submission and I think it is to do with the permissions on the database. I can get it to work if I go in and change the permission on the form submission to Anyone and I save it, but then it reverts back to Admin again. Here are some screenshots:


Since it works when I change it I assume all the API code/backend is set up correctly.

Thank you! it works for me :slight_smile:

This is not working at all for me. Did something change? I will change the api code once I solve what is going on.

Hi - I’m brand new to Wix Code and have a question about 3rd party email services. I was a bit surprised that you used SendGrid as an example, as they have no free option for low-volume mailers. Many other services do, such as SendInBlue.

SendInBlue has several code snippet examples. My question is twofold:

  1. Would the SendInBlue code snippet completely replace the SendGrid module example in your article?
  2. If so, which SendInBlue snippet? They have examples for: Ruby, Php, Curl, Python, and Node JS.

Thank you!

It seem that you will need to import the sendinBlue script in your code and that will not be possible with Wix Code at this moment. I looked at EmailJS which also has a free version and I think I can make that work in Wix Code if that would be an option for you.

Thank you Andreas. I signed up for EmailJS and connected the library’s Gmail account. What would be the next step using EmailJS? Thanks!

I made various feeble attempts to adapt the EmailJS code to the SendGrid example but have had no luck thus far. Any specific suggestions to get that code working in Wix? Thanks.

Hello Steve. SendGrid does offer free service/package ---- it automatically starts after the free ‘premium’ trial ends. I show this in my tutorial video. Have you checked it out? Many people are using it.

Here is the video again (previously posted on forum):

Link to video (and articles in description. ): - YouTube

Thank you Nayeli! I wasn’t aware. I now have a sendGrid account, but the emails still aren’t coming through.
When I load my form, I see this error message in the code box. Maybe this is what’s holding things up. Can anyone make sense of it? The code was copied and pasted from the Wix instruction page, so I’m not sure why it’s not being accepted. Thanks for any help.

Steve

SAM is is right,
If you want to send full HTML Formatted emails with SendGrid API, just replace “TEXT” with “HTML” like so:

from=${Sender}&to=${Recipient}&subject=${Subject}& **html** =${Body};

As s tip:
If you have large HTML files with Tables, Styles, Font Definitions, etc, please don’t put that inside your code, it is too messy. Just create a Database with a Text Field and store all of your “HTML Templates” in it. Give it a name and search for the template when you need it.

On your Form Submission, just use any JavaScript string functions to SEARCH/REPLACE/INSERT the values in your Template with the values from your Form. Make sure to ID the parts that will be replaced in your template; you could use a delimiter like this [NAME], [DOB], [ADDRESS]. It will help you with the SEARCH/REPLACE process.

This will reduce your Code considerable and will look clean.

Hope this helps,
HAPPY NEW YEAR!!

I think I’m making progress, but still no emails via SendGrid. Can someone check my code and see if I’m missing something? The first two code snippets are the back end parts, the final is attached to the form itself. Thank you!

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


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

import {sendWithService} from ‘backend/sendGrid’;

export function sendEmail(subject, body) {
const key = “I INSERTED MY SENDGRID API KEY HERE”;
const sender = “from.librarian@anamosa.lib.ia.us”;
const recipient = “to.swendl@anamosa.lib.ia.us”;
return sendWithService(key, sender, recipient, subject, body);
}


// For full API documentation, including code examples, visit Velo API Reference - Wix.com

import {sendEmail} from ‘backend/email’;

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

function sendFormData() {
const subject = New Volunteer Application from ${$w("First & Last Name").value};
const body = Name: ${$w("#First & Last Name").value};

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

Hi Steve,
Please let me help you out with this once and for all, Sending emails with SendGrid is quite simple actually. Problem is, there are so many samples pasted in the forum with errors and the Folks in here are copy pasting it without even understanding it.

In your case:
Please remove the “FROM.” and the “TO.” from your sender and recipient variables, leave just the email addresses. " from. librarian@anamosa.lib.ia.us " " to. swendl@anamosa.lib.ia.us "

Look, I simplified the function, this is all you need, it works perfectly:

export function SendGridFetch (APIKey, Sender, Recipient, Subject, Body)
{
const URL = “https://api.sendgrid.com/api/mail.send.json”;
const Headers = {“Authorization”:"Bearer " + APIKey, “Content-Type”:“application/x-www-form-urlencoded”};
const Data = from=${Sender}&to=${Recipient}&subject=${Subject}&html=${Body};
const Request = {“method”:“post”, “headers”:Headers, “body”:Data};
return fetch(URL, Request).then(Response => Response.json());
}

NOTE
I renamed the Function and Variables, so don’t copy/paste it and try to run it because it won’t work unless you take care of the names in your coding. Also, notice that I’m using HTML in the body instead of TEXT, but that is up to you.

Don’t get frustrated, feel free to reply back to me if you have more questions.

Best
-Luigi

Sorry for my question … Why we must use an external provider service to send an email from wix code ?
When we use Wix Contact form in our web sites (in the option panel) we can set an email address to send the data collected in the form by email automatically ! I hope you would introduce this functionality as a wix code function as soon as possible ! Thanks for all !

fabio