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 , , and . creating an input form web modules 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 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. SendGrid Using SendGrid to send emails from certain email providers may not work as expected. For example, see about sending from Gmail addresses. Important: this notification 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 action. Submit 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. {sendWithService} ; { key = ; sender = ; recipient = ; sendWithService(key, sender, recipient, subject, body);
} //email.jsw import from 'backend/sendGrid' export ( ) function sendEmail subject, body const "QL.cFH5YHZQQ2_fG0z_KuQ.6WPTYEyjN1C3_7Wt9Hb3jGfkJNAyzJhz3ddhM" const "from.email@domain.com" const "to.email@domain.com" return 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. Important: Notice that we import the function from a file named . This is in a second backend file. The 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. sendWithService sendGrid sendWithService {fetch} ; { url = ; headers = { : + key, : }; data = ; request = { : , : headers, : data
  }; fetch(url, request)
   .then( response.json());
} //sendGrid.js import from 'wix-fetch' export ( ) function sendWithService key, sender, recipient, subject, body const "https://api.sendgrid.com/api/mail.send.json" const "Authorization" "Bearer " "Content-Type" "application/x-www-form-urlencoded" const `from= &to= &subject= &text= ` ${sender} ${recipient} ${subject} ${body} const "method" "post" "headers" "body" return => response 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 module. Reminder: email.jsw Event Handler Finally, in the 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. Page Code {sendEmail} ;

$w.onReady( {
  $w( ).onAfterSave(sendFormData);
}); { subject = ; body = ;
 
  sendEmail(subject, body)
    .then( .log(response)); 
} import from 'backend/email' ( ) function "#sportDataset" ( ) function sendFormData const `New Submission from ` ${$w( ).value} "#nameInput" const `Name: \rEmail: \rSport: \rComments: ` ${$w( ).value} "#nameInput" ${$w( ).value} "#emailInput" ${$w( ).value} "#sportDropdown" ${$w( ).value} "#commentsInput" => response console Our import statement assumes the backend web module was named . Modify the import statement to reflect the name of your backend web module. Note: email.jsw 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 function that does not always call the function with the same address. Instead, we want the new function to get the address of the recipient from the form. sendEmail sendWithService 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 function, we no longer need the line that declared the hardcoded address we were using before. sendWithService So, with the new function added, our file now looks like this: {sendWithService} ; { key = ; sender = ; recipient = ; sendWithService(key, sender, recipient, subject, body);
} { key = ; sender = ; sendWithService(key, sender, recipient, subject, body);
} //email.jsw import from 'backend/sendGrid' export ( ) function sendEmail subject, body const "QL.cFH5YHZQQ2_fG0z_KuQ.6WPTYEyjN1C3_7Wt9Hb3jGfkJNAyzJhz3ddhM" const "from.email@domain.com" const "to.email@domain.com" return export ( ) function sendEmailWithRecipient subject, body, recipient const "QL.cFH5YHZQQ2_fG0z_KuQ.6WPTYEyjN1C3_7Wt9Hb3jGfkJNAyzJhz3ddhM" const "from.email@domain.com" return 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. {sendEmail, sendEmailWithRecipient} ;

$w.onReady( {
  $w( ).onAfterSave(sendFormData);
}); { subject = ; body = ; recipient = $w( ).value;
 
  sendEmailWithRecipient(subject, body, recipient)
    .then( .log(response)); 
} import from 'backend/email' ( ) function "#sportDataset" ( ) function sendFormData const `New Submission from ` ${$w( ).value} "#nameInput" const `Name: \rEmail: \rSport: \rComments: ` ${$w( ).value} "#nameInput" ${$w( ).value} "#emailInput" ${$w( ).value} "#sportDropdown" ${$w( ).value} "#commentsInput" const "#emailInput" => response console API List The following APIs are used in the code in this article. To learn more, see the . API Reference $w.Dropdown - Sets or gets a dropdown's value. $w.Dropdown.value $w.TextBox - Sets or gets a text box's value. $w.TextBox.value $w.TextInput - Sets or gets a text input's value. $w.TextInput.value wix-dataset - Adds an event handler that runs just after a dataset save. wix-dataset.onAfterSave( ) wix-fetch - Retrieves a specified resource from the network using HTTP / HTTPS. wix-fetch.fetch( ) Previously published at https://support.wix.com/en/article/velo-tutorial-sending-an-email-on-form-submission

Fetch

How To Run Triggered Sends with Velo by Wix

How To Use Velo and Wix Fetch To Extend Your Website Functionality

Develop Smarter, Deliver Faster

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Building Email Forms With Velo by Wix

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

The API fetch Module as the Way to Accessing 3rd-Party Services

48 Stories To Learn About Coding With Velo

5 Hot Velo Practices to Test and Debug Your Website Code

73 Stories To Learn About Velo

A Custom Chart by Using the HTML Component Plainly Explained

The API fetch Module as the Way to Accessing 3rd-Party Services

48 Stories To Learn About Coding With Velo

5 Hot Velo Practices to Test and Debug Your Website Code

73 Stories To Learn About Velo

A Custom Chart by Using the HTML Component Plainly Explained

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps