> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Sending a Triggered Email to Contacts
## Article: Sending a Triggered Email to Contacts
## Article Link: https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/triggered-emails/sending-a-triggered-email-to-contacts.md
## Article Content:
# Velo Tutorial: Sending a Triggered Email to Contacts
[Triggered Emails](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/triggered-emails/about-triggered-emails.md) allow you to create a template for emails that you can send to a newly created contact, using code. Before sending the email, your code can inject information into the template to personalize it with any data that is available in your page code. In this article, we demonstrate how to use the code snippet generated by Triggered Emails to send an email to the newly created contact on the submission of a form.
Although this article uses a form submission for demonstration purposes, you can send an email from anywhere in your code. The general idea is to paste the generated snippet into your code where you want the email to be sent. Then edit the snippet so that it uses the ID of the newly created contact and the values you want to insert for the variable placeholders.
**Note:**
For a more general-purpose article on sending an email using a 3rd party email service, see [How to Send an Email on Form Submission](https://support.wix.com/en/article/how-to-send-an-email-on-form-submission).
### Prerequisites
This article assumes you are familiar with [creating an input form](https://dev.wix.com/docs/develop-websites/articles/databases/wix-data/user-input/processing-user-input-before-it-is-stored-in-a-collection-with-data-hooks.md). In this example we'll assume you've [created and published](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/triggered-emails/set-up-a-triggered-email.md) the following Triggered Email:
Notice that the email template contains the following variables:
* name
* Interest\_Area
It is good practice to give your email template a meaningful name. Doing so makes it easier to work with in code. Click on the Email ID to rename it. In this example, we call our email **newsletter\_signup**.
To create a Triggered Email for Contacts, select the Email New Contacts tab.
The code snippet generated by the email looks like this:
```javascript
import {triggeredEmails } from 'wix-crm-frontend';
// ...
const options = {
variables: {
name: ,
interest_area:
}
}
triggeredEmails.emailContact('newsletter_signup', , options);
```
There are a few things to note about the code in this snippet:
* At the top of the snippet there is an `import` statement. This line needs to be added to the very top of the code on the page where you will be using the rest of the snippet. It imports the library of functions that lets your code work with the Triggered Email functionality.
* The contact ID and the values of the variables (`name` and `interest_area`) are reflected in the code snippet with placeholders. These placeholder values will need to be replaced with real values in your actual code.
### Add a Custom Field to Your Contacts List
In our example we save some information about our contact in a custom field. To work with custom fields in our code we first need to add the [custom field](https://support.wix.com/en/article/adding-custom-fields-to-contacts) to the Contact List in the Dashboard. For our example, name the field interest\_area.
### Form
Next, we create an input form with a submit button. In this example, we use a simple form with the following input elements:
|Type |ID |Usage |
|---|---|---|
|Input - text|nameInput|For entering a name
|Input - email|emailInput|For entering an email address
|Dropdown|interestArea|For selecting area of interest
|Button|signUpButton|For submitting the data
|Dataset|newsletterDataset|For connecting the elements
### Code
Finally, we write the code to send the Triggered Email described above when the form is successfully submitted. The code will send the values from the form to be used in place of the variables in the email template.
**Here's the outline of what we'll need to do:**
1. Add the import statement to the top of the code where we use the snippet. We will also need to import an additional module to create new site contacts.
2. Add an onClick event handler to the button. The code we add to that handler function will create the new contact and email them.
3. Add code that creates the new contact and gives us the contact's ID.
4. Add the snippet code to the handler function and replace the placeholder values.
5. Add some code to handle success and errors.
**Note:**
Triggered Emails may not work properly when previewing your site. Publish your site to test the code found below.
**1\. Add the import statement to the top of the code where we use the snippet.**
Paste the import statement that was at the top of your snippet: `import {triggeredEmails} 'wix-crm-frontend';` to the top of the code in the page where you want to use the snippet. Add `contacts` in between the `{ }` to import that module as well. The final import statement should look like this:
import { triggeredEmails, contacts } from 'wix-crm-frontend';
**2.** **Add an onClick event handler to the button. The code we add to that handler function will create the new contact and email them.**
Use the Properties & Events panel to add an `onClick()` event handler to the signUpButton that runs each time it's clicked.
**3\. Add code that creates the new contact and gives us the contact's ID.**
Add this code inside the onClick event handler. This uses the [appendOrCreateContact](https://www.wix.com/velo/reference/wix-crm-frontend/contacts/appendorcreatecontact) API to create the new contact using the information the site visitor entered in the form fields.
```javascript
contacts.appendOrCreateContact({
name: {
first: $w('#nameInput').value
},
emails: [{
email: $w('#emailInput').value
}],
extendedFields: {
interest_area: $w('#interestArea').value
}
});
```
The `appendOrCreateContact` function returns an object containing the `contactID`, and `identityType` for the newly created contact. We'll grab the ID and use it in our snippet to identify the new contact and email them.
**4\. Add the snippet code to the handler function and replace the placeholder values.**
The `appendOrCreateContact` function returns a promise, so we'll add our snippet after it. We'll declare a new variable called `contactId` and use it to store the `contactId` value that is stored in the object returned by `appendOrCreateContact()`. We will use this ID in the snippet in place of ``.
We'll also use the values that our site visitor entered in the form fields as the actual values for the `name` and `interest_area` variables in the `variables` object.
At this point our code should look like this:
```javascript
export function signUpButton_click(event) {
contacts.appendOrCreateContact({
name: {
first: $w('#nameInput').value
},
emails: [{
email: $w('#emailInput').value
}],
extendedFields: {
interest_area: $w('#interestArea').value
}
})
.then((contactInfo) => {
const contactId = contactInfo.contactId;
triggeredEmails.emailContact("newsletter_signup", contactId, {
"variables": {
"name": $w('#nameInput').value,
"interest_area": $w("#interestArea").value
}
})
});
}
```
**5\. Add some code to handle success and errors.**
Since the `emailContact()` function returns a Promise, we can define what happens when the Promise resolves successfully or rejects with an error.
We'll add a `.then` and a `.catch` to handle these.
Your code should look like this now:
```javascript
import { triggeredEmails, contacts } from 'wix-crm-frontend';
export function signUpButton_click(event) {
contacts.appendOrCreateContact({
name: {
first: $w('#nameInput').value
},
emails: [{
email: $w('#emailInput').value
}],
extendedFields: {
interest_area: $w('#interestArea').value
}
})
.then((contactInfo) => {
const contactId = contactInfo.contactId;
triggeredEmails.emailContact("newsletter_signup", contactId, {
"variables": {
"name": $w('#nameInput').value,
"interest_area": $w("#interestArea").value
}
})
.then(() => {
// do something after the email was sent
})
.catch((err) => {
// handle the error if the email wasn't sent
});
});
}
```
Test your form in your published site to see that it creates the contact and sends a Triggered Email. 