Wix Code Email Notifications Backend Code


Tutorial Video



About the Tutorial

Join Nayeli, Code Queen, with the most requested video since the ability to create your own custom forms using Wix Code: Email Notifications. (Please note that this video was created in 2017 and the website used in the tutorial example video no longer exists. To follow along use the links and codes below.)


Follow Along #1

Links to Know


Link to SendGrid: https://sendgrid.com/


Link to Wix Article: https://support.wix.com/en/article/how-to-send-an-email-on-form-submission


Link to Web Modules: https://support.wix.com/en/article/calling-server-side-code-from-the-front-end-with-web-modules


Link to Back End Article: https://support.wix.com/en/article/accessing-3rd-party-services#backend-service-call



Good to Know #1

Create Web module .JSW



//email.jsw

import {sendWithService} from 'backend/sendGrid';

export function sendEmail(subject, body) {
 const key = "enter.your.sendgrid.code.here";
 const sender = "nayeli@totallycodable.com";
 const recipient = "nayeli@totallycodable.com";
 return sendWithService(key, sender, recipient, subject, body);
}

export function sendEmailWithRecipient(subject, body, recipient) {
 const key = "enter.your.sendgrid.code.here";
 const sender = "nayeli@totallycodable.com";
 return sendWithService(key, sender, recipient, subject, body);
}


        

Good to Know #2

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


Good to Know #3

The Page Code



import {sendEmail, sendEmailWithRecipient} from 'backend/email';

$w.onReady(function () {
  $w("#dataset2").onAfterSave(sendFormData);
});

function sendFormData() {
 const subject = `Type Your Subject Here ${$w("#input1").value}`;
 const body = `Type Here: ${$w("#input1").value}
    \rLabelHere: ${$w("#input11").value}
    \rLabelHere: ${$w("#input11").value}
    \rLabelHere: ${$w("#input11").value}
    \rLabelHere: ${$w("#input11").value}
    \rLabelHere: ${$w("#input11").value}
    \rLabelHere: ${$w("#input11").value}
    \rLabelHere: ${$w("#input11").value}`;
 const recipient = $w("#input11").value;
 
  sendEmailWithRecipient(subject, body, recipient)
    .then(response => console.log(response)); 
 
  sendEmail(subject, body)
    .then(response => console.log(response));
}


Author

by Code Queen


Stuck on a project? Hire Code Queen, LLC!

Schedule a phone call or video call directly online. In a different time zone? No problem! Code Queen currently has clients around the world.


Online Booking: Discovery Session

Contact Form: Send project details

478 views0 comments

Recent Posts

See All

disclaimer

a quick note about our website content

Our free and premium content is non-exclusive, meaning you are not the only one with access to the content. You can customize our content to fit your end product. Redistribution of our content is strictly prohibited. This means you cannot make our content available to others as-is, stand-alone products or stock products in ANY LANGUAGE, regardless if you offer our content for free or not.

  • Code Queen Facebook Group Icon
  • Facebook Logo
  • Twitter Logo
  • YouTube logo
  • Instagram Logo
  • Linkedin Logo

© 2021.  All Rights Reserved by Code Queen, LLC.