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. Triggered Emails 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 . Prerequisites This article assumes you are familiar with . In this example we'll assume you've the following Triggered Email: creating an input form created and published 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: There are a few things to note about the code in this snippet: At the top of the snippet there is an 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. import The contact ID and the values of the variables ( and ) are reflected in the code snippet with placeholders. These placeholder values will need to be replaced with real values in your actual code. name interest_area 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 to the Contact List in the Dashboard. For our example, name the field interest_area. custom field Form Next, we create an input form with a submit button. In this example, we use a simple form with the following input 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: Add the import statement to the top of the code where we use the snippet. Add an onClick event handler to the button. The code we add to that handler function will create the new contact and email them. Add code that creates the new contact and gives us the contact's ID. Add the snippet code to the handler function and replace the placeholder values. 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: to the top of the code in the page where you want to use the snippet. import wixCrm from 'wix-crm'; 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 event handler to the signUpButton that runs each time it's clicked. onClick() 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 API to create the new contact using the information the site visitor entered in the form fields. createContact wixCRM.createContact({ : $w( ).value, : [$w( ).value], : $w( ).value
}) "firstName" '#nameInput' "emails" "#emailInput" "interest_area" "#interestArea" The function returns the for the newly created contact. We'll use that ID in our snippet to identify the new contact and email them. createContact contactID 4. Add the snippet code to the handler function and replace the placeholder values. The function returns a promise, so we'll add our snippet after it. Now that we have the we will use it in the snippet in place of . createContact contactID <enter-contact-ID-here> We'll also use the values that our site visitor entered in the form fields as the actual values for the and variables in the object. name interest_area variables At this point our code should look like this: {
 wixCRM.createContact({ : $w( ).value, : [$w( ).value], : $w( ).value
  })
  .then( {
   wixCRM.emailContact( , contactId, { : { : $w( ).value, : $w( ).value
    }
   })
  })
} export ( ) function signUpButton_click event "firstName" '#nameInput' "emails" "#emailInput" "interest_area" "#interestArea" ( ) => contactId "newsletter_signup" "variables" "name" '#nameInput' "interest_area" "#interestArea" 5. Add some code to handle success and errors. Since the function returns a Promise, we can define what happens when the Promise resolves successfully or rejects with an error. emailContact() We'll add a and a to handle these. .then .catch Your code should look like this now: wixCRM ;

$w.onReady( {

}); {
 wixCRM.createContact({ : $w( ).value, : [$w( ).value], : $w( ).value
  })
  .then( {
   wixCRM.emailContact( , contactId, { : { : $w( ).value, : $w( ).value
     }
    })
    .then( { })
    .catch( { });
  });
} import from 'wix-crm' ( ) function export ( ) function signUpButton_click event "firstName" '#nameInput' "emails" "#emailInput" "interest_area" "#interestArea" ( ) => contactId "newsletter_signup" "variables" "name" '#nameInput' "interest_area" "#interestArea" => () // do something after the email was sent ( ) => 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. Previously published at https://support.wix.com/en/article/velo-tutorial-sending-a-triggered-email-to-contacts

How To Setup Event Tracking with Velo by Wix

Building Email Forms With Velo by Wix

Develop Smarter, Deliver Faster

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

How To Run Triggered Sends with Velo by Wix

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

5 Hot Velo Practices to Test and Debug Your Website Code

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

5 Hot Velo Practices to Test and Debug Your Website Code

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