Tutorial | Send Emails with the SendGrid npm Package

In this tutorial, you'll learn how to set up a complete email system that allows site visitors to send emails through a custom form on your Wix site. The solution uses SendGrid's API to handle email delivery while maintaining security best practices by storing sensitive API keys in Wix's Secrets Manager.

SendGrid is a cloud-based email delivery platform that provides reliable email infrastructure for businesses and developers. By integrating SendGrid with your Wix site, you can send emails such as contact form submissions, order confirmations, password resets, or custom notifications to your users. This approach gives you more control over email delivery, better tracking capabilities, and higher deliverability rates compared to basic email services.

To set up your site to send emails with the SendGrid service, you'll need to perform the following steps:

1. Create a SendGrid account.
2. Set up your site.
3. Write the backend code.
4. Write the frontend code.

Step 1 | Create a SendGrid account

To use the SendGrid service on your Wix site, you'll need to create a SendGrid account. The email address you verify in the account will be the sender address for the emails you send from your Wix site.

Once you've created an account, create an API key. Copy the key from your dashboard and store it in the Secrets Manager in your Wix site (see the next step).

Step 2 | Set up the site

In this step, you'll configure your Wix site by securely storing your SendGrid credentials and installing the required npm package.

For security purposes, it's best to store sensitive content such as API keys in the Secrets Manager:

1. Navigate to Developer Tools in the Code sidebar.

2. Under the Security section, select Secrets Manager.

3. In the top right, click Add Secret.

4. Set the Secret Name to sendGridSecret.

5. Store both your SendGrid API key and the verified email address associated with your SendGrid account in the secret value. Your secret value will look like this:

   Copy

6. Click Save.

7. Go back to the site editor and install the npm package.

Step 3 | Create a custom form

On your Home page, create a custom form and add the following elements:

• Input elements for the recipient's email and subject line. Give elements the IDs of #toEmail and #subject.
• Text box for the email body text. Give the element the ID of #emailContent.
• Submit button for sending the email. Give the element the ID of #sendButton.
• Text element for displaying success and error messages. Give the element the ID of #messageText.

Step 4 | Add backend code

In this step, you'll securely retrieve your SendGrid credentials and handle the email sending process using SendGrid's API.

1. Add a web module to your site code and call it sendEmail.web.js.

2. Import the modules you'll need:

   Copy

3. In the sendEmail function, get the SendGrid API key and sender email address that you saved in the Secrets Manager, and set the API key to enable usage of the SendGrid service. For this, use the Secrets API:

   Copy

4. Set the data for the email to be sent, such as the recipient's email address and the text of the email body. The sender email was extracted from the Secrets Manager and the rest of the information is entered by site visitors on the frontend by using input elements. Call the send() function to send the email.

   Copy

Step 5 | Add frontend code

In this step, you'll handle user interactions with the email form, validate input fields, and communicate with the backend function to send emails.

1. Open the page code file and import the function from the backend:

   Copy

2. Add the checkFormFields() function to make sure all form field input values are valid before sending an email:

   Copy

3. Add the clearFields() function to reset the form fields following a successful email transmission. The resetValidityIndication() function resets the inputs' visual validity indications. Some elements have a visual cue, such as a red outline, that indicates when the current value isn't valid. This function clears any indications.

   Copy

4. Add the displayMessage() function to temporarily show a success or error message following an attempt to send an email:

   Copy

5. When a site visitor clicks the Send button, do the following:

   1. Check whether all form field values are valid.
   2. If they're valid, send the email with the values extracted from the form inputs. If the form fields aren't valid, show an error message.
   3. If the email transmission request is successful, clear the form fields and display a success message. If the request fails, show an error message.
   Copy

Example code

Here is the complete code for this example:

Backend code file

Frontend code file