> 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: Tutorial | Send a Triggered Email to Members

## Article: Tutorial | Send a Triggered Email to Members

## Article Link: https://dev.wix.com/docs/develop-websites-sdk/get-started/tutorials/members-contacts/tutorial-send-a-triggered-email-to-members.md

## Article Content:

# Tutorial | Send a Triggered Email to Members

In this tutorial, you'll learn how to automatically send a personalized email to the currently logged-in site member using [Triggered Emails](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/triggered-emails/about-triggered-emails.md) and an input form. You'll use a form submission as the trigger, but you can adapt this approach to send emails from anywhere in your code.

You'll build a simple form where site members can enter their name, select their favorite sport, and add comments. When the form is submitted, your site will send a personalized Triggered Email to the logged-in member with the information they provided.

We'll use the following steps to send a triggered email to a member:

1. [Set up your Triggered Email template.](#step-1--set-up-your-triggered-email-template)
2. [Create a form for member input.](#step-2--create-a-form-for-member-input)
3. [Send the email on form submission.](#step-3--send-the-email-on-form-submission)

## Before you begin

It's important to note the following before starting this tutorial:

- Members must be able to [login to your site](https://support.wix.com/en/article/adding-a-members-area-to-your-site).
- Triggered Emails may not work properly in preview mode. Publish your site to test the code.
- Make sure to have a collection, such as `sportsEmail`, that you can connect to a dataset later.

> The code in this article was written using the following module versions:
>
> - @wix/site-crm (v1.31.0)
> - @wix/members (v1.0.306)
>
> Learn how to install npm packages [in the editor](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/developer-environments/packages/npm/work-with-npm-packages-in-the-editor.md) or [using the CLI](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/developer-environments/packages/npm/work-with-npm-packages-with-the-cli.md).

## Step 1 | Set up your Triggered Email template

In this step, you'll create a Triggered Email template with variables for personalization.

To set up your Triggered Email:

1. Go to `Developer Tools` on your site's dashboard and select `Triggered Emails`.
2. Add sender details, including the sender's name and email address.
3. Create a new Triggered Email and add variables such as `name`, `sport`, and `comments`.
4. Give your email template a meaningful name, such as `sportMail`.
5. Publish the Triggered Email.
6. Copy the code snippet for emailing site members. You'll use this code in a later step.

The code should look like this:

> The following code snippet uses the Velo API by importing the `'wix-crm'` package.
> To use the SDK version, change the import to `'@wix/site-crm'`.

```javascript
import { triggeredEmails } from 'wix-crm';
//...
triggeredEmails.emailMember('sportMail', <enter-member-id-here>, {
  variables: {
        name: <enter-value-here>,
        sport: <enter-value-here>,
        comments: <enter-value-here>,
  }
});
```

> For a full, detailed walkthrough, see [Set Up a Triggered Email](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/triggered-emails/set-up-a-triggered-email.md).

## Step 2 | Create a form for member input

In this step, you'll build a simple form that collects input from the site member. The form includes input fields for each variable you set up in your Triggered Email, as well as a submit button. All elements should be connected to the same dataset.

To create the form:

1. Add input elements for each variable that you set up in your Triggered Email, such as name, sport, comments. In our example, we add:
   - An input element for entering a name. Set the input ID to `nameInput`.
   - A dropdown for selecting a sport. Set the dropdown ID to `sportDropdown`.
   - A text box for entering comments. Set the text box ID to `commentsInput`.
   - A button for submitting the data. Set the button ID to `submitButton`.
   - A dataset for connecting elements. Set the dataset ID to `sportDataset`.
2. Add a submit button.
3. Create a dataset called `sportDataset` that's connected to the `sportsEmail` collection you created earlier.
4. Connect each input element to the same dataset, such as `sportDataset`.
5. Connect the button to the same dataset and set it to the **Submit** action.

## Step 3 | Add frontend code

In this step, you'll add code that sends the Triggered Email to the site member when the form is submitted.

1. Import the required modules at the top of your page code:

```javascript
import { triggeredEmails } from "@wix/site-crm";
import { members } from "@wix/members";
```

2. Register an `onAnAfterSave()` event handler for your dataset to run the code each time the form is successfully submitted.

```javascript
$w("#sportDataset").onAfterSave(async () => {
  // Code in next step goes here...
});
```

3. Get the values from the input elements.

```javascript
// ...Code from previous step
const name = $w("#nameInput").value;
const sport = $w("#sportDropdown").value;
const comments = $w("#commentsInput").value;
// Code in next step goes here...
```

4. Get the currently logged in member `userId`.

```javascript
// ...Code from previous step
const currentMember = await members.getCurrentMember();
if (currentMember) {
  const userId = currentMember.member._id;
  // Code in next step goes here...
}
```

5. Paste the Triggered Email code snippet from earlier.

Replace the placeholders in the code snippet with the values you saved from the form, and the member ID, to personalize the email.

```javascript
// ...Code from previous step
triggeredEmails.emailMember("sportMail", userId, {
  variables: {
    name: name,
    sport: sport,
    comments: comments,
  },
});
```

## Full example

The following example includes error handling for both successful and failed email attempts.

```javascript
$w.onReady(function () {
  $w("#sportDataset").onAfterSave(async () => {
    try {
      const name = $w("#nameInput").value;
      const sport = $w("#sportDropdown").value;
      const comments = $w("#commentsInput").value;

      const currentMember = await members.getCurrentMember();
      if (currentMember) {
        const userId = currentMember.member._id;
        await triggeredEmails.emailMember("sportMail", userId, {
          variables: {
            name: name,
            sport: sport,
            comments: comments,
          },
        });
        console.log("email sent successfully");
      }
    } catch (err) {
      console.log("error sending email", err);
    }
  });
});
```

## See also

- [Triggered Emails](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/build-a-custom-frontend/triggered-emails/about-triggered-emails.md)
- [Create a Triggered Email](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/build-a-custom-frontend/triggered-emails/create-a-triggered-email.md)