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

1/6

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 = "contactus@example.com"; // Sender email //

    const recipient = "admin@example.com"; // 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 = "contactus@example.com"; // 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.

Please complete all required fields.
No comments. Be the first to leave a comment.

WEB DESIGN & DEVELOPMENT SOLUTIONS

GET PROFESSIONAL HELP

CONTACT US