> ## Documentation Index
> Fetch the complete documentation index at: https://fillout-005a867b-dependabot-npm-and-yarn-fast-uri-3-1-5.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-fast-uri-3-1-5/1fceTP_vigEOW21v/images/Screenshot2025-11-17at4.48.40PM.png?fit=max&auto=format&n=1fceTP_vigEOW21v&q=85&s=25c15ae8040f47acc641ba3603fff80a" 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-fast-uri-3-1-5/JHl-63R-nbU7sUC2/images/Screenshot2025-02-17at1.35.31PM.png?fit=max&auto=format&n=JHl-63R-nbU7sUC2&q=85&s=cefcf5b6249c5da117129fceb955c7b3" 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-fast-uri-3-1-5/1fceTP_vigEOW21v/images/Screenshot2025-11-17at4.58.43PM.png?fit=max&auto=format&n=1fceTP_vigEOW21v&q=85&s=a168087a074e8800440e0bcb332a935c" 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-fast-uri-3-1-5/1fceTP_vigEOW21v/images/Screenshot2025-11-17at5.00.32PM.png?fit=max&auto=format&n=1fceTP_vigEOW21v&q=85&s=39ff967b6c8145e9360817de0ecd6f4f" 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-fast-uri-3-1-5/JHl-63R-nbU7sUC2/images/Screenshot2025-02-17at1.45.33PM.png?fit=max&auto=format&n=JHl-63R-nbU7sUC2&q=85&s=9db6de0a72a027073514d4c232fb33fe" 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-fast-uri-3-1-5/JHl-63R-nbU7sUC2/images/Screenshot2025-02-17at1.57.16PM.png?fit=max&auto=format&n=JHl-63R-nbU7sUC2&q=85&s=76ac18926a3f74f20713026e2ddeb258" 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-fast-uri-3-1-5/JHl-63R-nbU7sUC2/images/Screenshot2025-02-17at1.58.32PM.png?fit=max&auto=format&n=JHl-63R-nbU7sUC2&q=85&s=2671f0a7437c877c70743053930379d5" 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-fast-uri-3-1-5/JHl-63R-nbU7sUC2/images/Screenshot2025-02-17at2.02.23PM.png?fit=max&auto=format&n=JHl-63R-nbU7sUC2&q=85&s=4671a117f54b0b5f4ed1253ca2fee517" 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-fast-uri-3-1-5/MpUI6qtYBM7MoTLo/images/ScreenShot2023-10-09at4.51.44PM.png?fit=max&auto=format&n=MpUI6qtYBM7MoTLo&q=85&s=eabf74cbd05b870a7e957e7fccfb41ec" 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 />
