Vorbly <Code>
CODING MADE EASY WITH VORBLY
WIX SENDGRID API - AUTO EMAIL MESSAGES
Need an auto email notification for your forms? This tutorial will show you how to integrate SendGrid APIs into your online forms using Wix Code. Customers will receive a notification everytime they submit a order form or contact form. We will provide you with the webpage elements and sample codes required to implement this feature.
THE DEMO
THE ELEMENTS
The Page
Text Elements
-
Event Name ID: #EventName
-
Location ID: #location
User Inputs
-
Name: #name
-
Email: #email
-
No. of tickets: #quantity
-
Date: #datePicker1
-
Comments: #comments
Button Element
-
Submit Button: #submit
The Database
Create a database OrderForm (dataset1) with the same fields as your form.
Database fields
-
Name: name
-
Email: email
-
No. of tickets: quantity
-
Date: date
-
Comments: comments
SendGrid API Keys
Go to sendgrid.com and create your free account
-
Setup Guide > Integrate using our Web API or SMTP Relay
-
Select Web API > Java > Create Key
-
Generate API Key and save it
THE CODE
Page Code
import {sendEmail, sendEmailWithRecipient} from 'backend/email';
$w.onReady(function () {
$w("#dataset1").onAfterSave(sendFormData);
});
// Customize Your Email //
function sendFormData() {
const subject = `Your Email Subject ${$w("#EventName").value}`;
const body = `Your Email Content
\rEvent: ${$w("#EventName").value}
\rLocation: ${$w("#location").value}
\rDate: ${$w("#datePicker1").value}
\rNo. of tickets: ${$w("#quantity").value}
\rYour Closing Statement`;
const recipient = $w("#email").value;
sendEmailWithRecipient(subject, body, recipient)
.then(response => console.log(response));
sendEmail(subject, body)
.then(response => console.log(response));
}
// Note: SendGrid API V3 is the latest version //
Back-End Code
// email.jsw //
import {sendWithService} from 'backend/sendGrid';
export function sendEmail(subject, body) {
const key = "YOUR_SENDGRID_API_KEY"; // Replace with your API key //
const sender = ""; // Sender email //
const recipient = ""; // Notification to yourself //
return sendWithService(key, sender, recipient, subject, body);
}
export function sendEmailWithRecipient(subject, body, recipient) {
const key = "YOUR_SENDGRID_API_KEY"; // Replace with your API key //
const sender = ""; // Sender email //
return sendWithService(key, sender, recipient, subject, body); // Customer email //
}
// Note: SendGrid API V3 is the latest version //
Back-End Code
// 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());
}
// Note: SendGrid API V3 is the latest version //
COMMENTS
I'm a paragraph. Click here to add your own text and edit me. It's easy.