812 reads

Building Email Forms With Velo by Wix

by Velo by WixMay 14th, 2021

Too Long; Didn't Read

Velo is a full-stack development platform that empowers you to rapidly build, manage and deploy professional web apps. In this article, we demonstrate how to build two types of forms that send an email. We start by setting up a form that sends an email to a specific address as an alert each time the form is submitted successfully. Then we modify our code so that an email confirmation is sent to the user who filled out the form after it is submitted. To learn more, see the code in this article.

Company Mentioned

featured image - Building Email Forms With Velo by Wix

There are many instances when you want to send an email each time a form is submitted. In this article, we demonstrate how to build two types of forms that send an email. We start by setting up a form that sends an email to a specific address as an alert each time the form is submitted successfully. Then we modify our code so that an email confirmation is sent to the user who filled out the form after it is submitted successfully.

To send an email when a form is submitted we use:

A standard Velo form
Two backend functions to call a 3rd party service to send an email
An event handler that runs when the dataset saves a new item and calls the backend functions

Prerequisites

This article assumes you are familiar with creating an input form, web modules, and using backend functions to call 3rd party services.

You will also need an account with a 3rd party email delivery service. In the examples provided here we will be using SendGrid as our email delivery service. You can use any email delivery service you like. The same overall concepts will apply. However, you will have to modify the code to fit your email delivery service's API.

Important:
Using SendGrid to send emails from certain email providers may not work as expected. For example, see this notification about sending from Gmail addresses.

Form

First, we start by creating an input form with a submit button. You can use an existing form or create a new one. Either way, this is a regular input form without any special setup. Each input element is connected to a field in a dataset and a button is connected to the same dataset with the Submit action.

In this example, we use a simple form with the following input elements:

Backend Functions

Next, in two backend files, we create two functions to call our 3rd party email delivery service.

The first function adds the API key, sender address, and receiver address to the raw email data it receives and calls the second backend function.

//email.jsw

import {sendWithService} from 'backend/sendGrid';

export function sendEmail(subject, body) {
  const key = "QL.cFH5YHZQQ2_fG0z_KuQ.6WPTYEyjN1C3_7Wt9Hb3jGfkJNAyzJhz3ddhM";
  const sender = "[email protected]";
  const recipient = "[email protected]";
  return sendWithService(key, sender, recipient, subject, body);
}

Important:
You need to modify this function to contain your API key, the email address you want to send from, and the email address you want to send to.

Notice that we import the

sendWithService

function from a file named

sendGrid

. This is in a second backend file. The

sendWithService

function packages up all the data it receives in the format expected by the email delivery service's API and then makes a call to the API.

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

Reminder:
This example uses SendGrid as its 3rd party email delivery service. If you are using SendGrid, you can copy and paste this module without modifying it. If you are using a different service, you cannot use this module as is. You need to write a similar module to meet the format expected by your service's API and import that module from the email.jsw module.

Event Handler

Finally, in the Page Code on the same page as the form, we add an event handler that runs each time a new item is successfully submitted. The event handler takes the values from the form to create the subject and the body of the email. That information is then passed along to the backend functions we wrote above.

import {sendEmail} from 'backend/email';

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

function sendFormData() {
  const subject = `New Submission from ${$w("#nameInput").value}`;
  const body = `Name: ${$w("#nameInput").value}
    \rEmail: ${$w("#emailInput").value}
    \rSport: ${$w("#sportDropdown").value}
    \rComments: ${$w("#commentsInput").value}`;
 
  sendEmail(subject, body)
    .then(response => console.log(response)); 
}

Note:
Our import statement assumes the backend web module was named email.jsw. Modify the import statement to reflect the name of your backend web module.

Modifying the Code

The code we wrote above sends an email to the same address each time the form is submitted. It can easily be used as a basis for other common situations. For example, we will now modify the code so that the user submitting the form receives a confirmation email.

Form

The form does not need to be modified in any way.

Backend Functions

We'll add another modified version of the

sendEmail

function that does not always call the

sendWithService

function with the same address. Instead, we want the new function to get the address of the recipient from the form.

In our new function, we need to add a parameter to the for the recipient's address. Since that address will be passed on to

sendWithService

function, we no longer need the line that declared the hardcoded address we were using before.

So, with the new function added, our file now looks like this:

//email.jsw

import {sendWithService} from 'backend/sendGrid';

export function sendEmail(subject, body) {
  const key = "QL.cFH5YHZQQ2_fG0z_KuQ.6WPTYEyjN1C3_7Wt9Hb3jGfkJNAyzJhz3ddhM";
  const sender = "[email protected]";
  const recipient = "[email protected]";
  return sendWithService(key, sender, recipient, subject, body);
}

export function sendEmailWithRecipient(subject, body, recipient) {
  const key = "QL.cFH5YHZQQ2_fG0z_KuQ.6WPTYEyjN1C3_7Wt9Hb3jGfkJNAyzJhz3ddhM";
  const sender = "[email protected]";
  return sendWithService(key, sender, recipient, subject, body);
}

Event Handler

We also need to modify the front-end code so that it imports the new function and uses it to send the email, specifying who the recipient is.

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

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

function sendFormData() {
  const subject = `New Submission from ${$w("#nameInput").value}`;
  const body = `Name: ${$w("#nameInput").value}
    \rEmail: ${$w("#emailInput").value}
    \rSport: ${$w("#sportDropdown").value}
    \rComments: ${$w("#commentsInput").value}`;
  const recipient = $w("#emailInput").value;
 
  sendEmailWithRecipient(subject, body, recipient)
    .then(response => console.log(response)); 
}