> ## Documentation Index
> Fetch the complete documentation index at: https://fillout-005a867b-dependabot-npm-and-yarn-ip-address-10-4-0.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Send email notifications with SendGrid

> Notify respondents after they submit your Fillout form with customizable emails that can include dynamic data. Add or update their existing contact information.

export const SupportBanner = () => {
  const titleId = React.useId();
  return <div className="support-banner" role="region" aria-labelledby={titleId}>
      <span className="support-banner__ring support-banner__ring--outer" aria-hidden="true" />
      <span className="support-banner__ring support-banner__ring--middle" aria-hidden="true" />
      <span className="support-banner__ring support-banner__ring--inner" aria-hidden="true" />
      <span className="support-banner__ring support-banner__ring--center" aria-hidden="true" />

      <div className="support-banner__content">
        <div className="support-banner__title" id={titleId} role="heading" aria-level="2">Still have questions?</div>

        <div className="support-banner__copy">
          <span className="support-banner__line">Our team is happy to help. Start a live chat using the</span>
          <span className="support-banner__line">
            chat bubble <span className="support-banner__chat-icon" aria-hidden="true" /> in the bottom right, or email us at
          </span>
          <span className="support-banner__line">
            <a href="mailto:support@fillout.com">support{'@'}fillout.com</a>
          </span>
        </div>

        <a className="support-banner__cta" href="mailto:support@fillout.com">Contact us</a>
      </div>
    </div>;
};

## What is SendGrid?

[**SendGrid**](https://sendgrid.com/) is a service that helps websites and apps send emails to their users. It is handy for businesses and developers who want a reliable way to send emails, like signup confirmations or newsletters, to their users.

## How it works

<Steps>
  <Step title="Link your Fillout form to SendGrid">
    Open your form. Click `Integrate` from top followed by `SendGrid`.

    <img src="https://mintcdn.com/fillout-005a867b-dependabot-npm-and-yarn-ip-address-10-4-0/XNNcm48HjjqAo6_p/images/Screenshot2025-11-17at4.48.40PM.png?fit=max&auto=format&n=XNNcm48HjjqAo6_p&q=85&s=134aff8c38f1bedb797aac59e72ef520" alt="Screenshot 2025-11-17 at 4.48.40 PM.png" width="2617" height="1435" data-path="images/Screenshot2025-11-17at4.48.40PM.png" />

    Enter your **API Key** in Fillout. You can find this in the **Settings** section of your SendGrid dashboard. `Create API Key` on the upper right corner. Enter a **Name**, then go with the default `Full Access` permission.

    <img src="https://mintcdn.com/fillout-005a867b-dependabot-npm-and-yarn-ip-address-10-4-0/XahTuqICjFMdisFn/images/Screenshot2025-02-17at1.35.31PM.png?fit=max&auto=format&n=XahTuqICjFMdisFn&q=85&s=0564862cd00c5a9728974a67aec8f87c" alt="Screenshot of the Fillout form creation page" width="1749" height="1222" data-path="images/Screenshot2025-02-17at1.35.31PM.png" />
  </Step>

  <Step title="Choose to send email with template">
    If you don’t have a template on SendGrid yet, select `Email API` on the left-hand panel followed by `Dynamic Templates` and `Create Dynamic Template`.

    <img src="https://mintcdn.com/fillout-005a867b-dependabot-npm-and-yarn-ip-address-10-4-0/XNNcm48HjjqAo6_p/images/Screenshot2025-11-17at4.58.43PM.png?fit=max&auto=format&n=XNNcm48HjjqAo6_p&q=85&s=a737e7a9743350176d0328e6376d79b6" alt="Screenshot 2025-11-17 at 4.58.43 PM.png" width="2527" height="600" data-path="images/Screenshot2025-11-17at4.58.43PM.png" />

    Click `Add Version` and start with a **blank template** or choose a **SendGrid Email Design**. Customize your email template as you see fit.

    <img src="https://mintcdn.com/fillout-005a867b-dependabot-npm-and-yarn-ip-address-10-4-0/XNNcm48HjjqAo6_p/images/Screenshot2025-11-17at5.00.32PM.png?fit=max&auto=format&n=XNNcm48HjjqAo6_p&q=85&s=b3c79da3003c9647a5269a844edaf092" alt="Screenshot 2025-11-17 at 5.00.32 PM.png" width="2074" height="834" data-path="images/Screenshot2025-11-17at5.00.32PM.png" />
  </Step>

  <Step title="Map your form fields">
    On Fillout, [link your form fields](https://www.fillout.com/help/additional-integration-mappings#how-to-map-fields-manually) to the corresponding fields in your SendGrid contacts. For example, link the email address to its respective field. Then, fill out the **Sender identity** section.

    <img src="https://mintcdn.com/fillout-005a867b-dependabot-npm-and-yarn-ip-address-10-4-0/XahTuqICjFMdisFn/images/Screenshot2025-02-17at1.45.33PM.png?fit=max&auto=format&n=XahTuqICjFMdisFn&q=85&s=67afb211c08b81a81e5fa1e9518118a8" alt="Screenshot of the Fillout form creation page" width="2662" height="1415" data-path="images/Screenshot2025-02-17at1.45.33PM.png" />

    You can personalize emails, by inserting dynamic data under **Template variables**. For example, we want the "Name" to change depending on the customer’s name. Once everything is set, click `Finish setup`.
  </Step>

  <Step title="Publish and share">
    Once you’ve finished creating your form, you’re ready to go! Simply `Publish` and share the link. Respondents will now receive the email template.

    <Check>
      SendGrid's Free plan lets you send up to 100 emails per day, while the Essentials paid plan lets you send up to 50,000 emails per month.
    </Check>
  </Step>
</Steps>

## Send a freeform email

You can also send a plain custom-formatted email by choosing `Send email without template` and entering the recipient and sender details. [Reference form fields](https://www.fillout.com/help/additional-integration-mappings#how-to-map-fields-manually) by clicking <Icon icon="square-plus" iconType="solid" /> or typing **@**.

<img src="https://mintcdn.com/fillout-005a867b-dependabot-npm-and-yarn-ip-address-10-4-0/XahTuqICjFMdisFn/images/Screenshot2025-02-17at1.57.16PM.png?fit=max&auto=format&n=XahTuqICjFMdisFn&q=85&s=e098d89fba14919bf011ccf5390c6169" alt="Screenshot of the Fillout form creation page" width="2057" height="782" data-path="images/Screenshot2025-02-17at1.57.16PM.png" />

## Add or update contact information

Skip sending an email and simply `Add or update contact`. Choose a **List** in your SendGrid account. Then, link the **Email address field** and `+ Add new` **Contact fields** as you see fit. [Map](https://www.fillout.com/help/additional-integration-mappings#how-to-map-fields-manually) the SendGrid fields on the left to their respective Fillout fields on the right.

<img src="https://mintcdn.com/fillout-005a867b-dependabot-npm-and-yarn-ip-address-10-4-0/XahTuqICjFMdisFn/images/Screenshot2025-02-17at1.58.32PM.png?fit=max&auto=format&n=XahTuqICjFMdisFn&q=85&s=a37e4c770467e3025a8f5a21d59e970f" alt="Screenshot of the Fillout form creation page" width="2054" height="848" data-path="images/Screenshot2025-02-17at1.58.32PM.png" />

## Specify a condition

If necessary, you can run your integration only when a specific condition is met. Click [here](/conditional-integration) to learn how to.

## Personalize your email in Sendgrid

You can use **handlebars** in Sendgrid to [pipe a respondent's information](https://docs.sendgrid.com/for-developers/sending-email/using-handlebars) in the notification email. For example, we'll personalize the email by adding the respondent's name. Simply type `{{ name }}` anywhere on your email.

<img src="https://mintcdn.com/fillout-005a867b-dependabot-npm-and-yarn-ip-address-10-4-0/XahTuqICjFMdisFn/images/Screenshot2025-02-17at2.02.23PM.png?fit=max&auto=format&n=XahTuqICjFMdisFn&q=85&s=8b2ddce9fb00cf2d38fa1fa21033f4b6" alt="Screenshot of the Fillout form creation page" width="1931" height="1095" data-path="images/Screenshot2025-02-17at2.02.23PM.png" />

When a respondent completes your form, they will be receiving a personalized email like the one below.

<img src="https://mintcdn.com/fillout-005a867b-dependabot-npm-and-yarn-ip-address-10-4-0/AmW_eRpblTJGb3lb/images/ScreenShot2023-10-09at4.51.44PM.png?fit=max&auto=format&n=AmW_eRpblTJGb3lb&q=85&s=338a68153e527a50bcdd6f501f1ecf6b" alt="Screenshot of the Fillout form creation page" width="871" height="509" data-path="images/ScreenShot2023-10-09at4.51.44PM.png" />

## Related articles

<CardGroup cols={3}>
  <Card title="Integration logic" icon="gear-complex" iconType="regular" color="#FFC738" href="/conditional-integration">
    Perform an integration only when a certain condition is met.
  </Card>

  <Card title="Calculations" icon="calculator-simple" iconType="regular" color="#FFC738" href="/calculations">
    Calculate prices for order forms, compute quiz scores, and more.
  </Card>

  <Card title="Send messages with Twilio" icon="message-sms" iconType="regular" color="#FFC738" href="/twilio">
    Automate SMS updates to customers.
  </Card>
</CardGroup>

<SupportBanner />
