CINXE.COM

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Forms setup | Netlify Docs</title> <meta name="generator" content="VuePress 1.9.10"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Roboto+Mono:400"> <link rel="icon" href="/netlify-icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32"> <link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16"> <script>(function (w) { if (!w) return; const darkQuery = w.matchMedia('(prefers-color-scheme: dark)'); const root = document.documentElement; function setTheme(newTheme) { if (newTheme === 'dark' || (newTheme === 'system' && darkQuery.matches)) { root.classList.add('dark-mode'); } else { root.classList.remove('dark-mode'); } w.__theme = newTheme; } w.__setPreferredTheme = function (newTheme) { setTheme(newTheme); try { localStorage.setItem('nf-docs-theme', w.__theme); } catch (err) {} }; // If using system theme, change colors in real time // in response to user settings darkQuery.addEventListener('change', function (event) { if (w.__theme === 'system') { if (event.matches) { root.classList.add('dark-mode'); } else { root.classList.remove('dark-mode'); } } }); let preferredTheme; // Try to get saved theme try { preferredTheme = localStorage.getItem('nf-docs-theme') || 'system'; } catch (err) {} // Initialize preferredTheme setTheme(preferredTheme); })(window);</script> <script src="/rum.js" data-application-id="ededf59a-7705-4933-b2a0-5efa8b35b293" data-client-token="pub1b84fc7c7429f37e025e8160c02da8bb" data-service="docs" data-env="production" defer="true"></script> <meta name="description" content="Use built-in form handling to simplify adding and managing forms for your project. There’s no need to make an API call or include extra form handling code."> <meta property="og:title" content="Forms setup"> <meta property="og:url" content="https://docs.netlify.com/forms/setup/"> <meta property="og:description" content="Use built-in form handling to simplify adding and managing forms for your project. There’s no need to make an API call or include extra form handling code."> <meta property="og:image" content="https://docs.netlify.com/og-image.png"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta prefix="og: http://ogp.me/ns#" property="og:type" content="article"> <meta prefix="og: http://ogp.me/ns#" property="og:article:author" content="Netlify"> <meta name="google-site-verification" content="G4JqDTXMHpDyWoqIRwgw8PBqg-AncXqtdkHehcOR7kc"> <meta name="slack-app-id" content="A05P27DR8C8"> <link href="https://docs.netlify.com/forms/setup/" rel="canonical" /> <link rel="preload" href="/assets/css/0.styles.2d136594.css" as="style"><link rel="preload" href="/assets/js/app.4a12bea4.js" as="script"><link rel="preload" href="/assets/js/6.f7eff80e.js" as="script"><link rel="preload" href="/assets/js/2.1c921067.js" as="script"><link rel="preload" href="/assets/js/145.405faca2.js" as="script"><link rel="preload" href="/assets/js/16.bc1aa620.js" as="script"><link rel="preload" href="/assets/js/32.07d46218.js" as="script"><link rel="preload" href="/assets/js/31.2c355c7b.js" as="script"> <link rel="stylesheet" href="/assets/css/0.styles.2d136594.css"> </head> <body> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NMKKF2M" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar-header"><div class="navbar"><div class="navbar__logo-link"><a href="/" class="router-link-active">Netlify Docs <svg width="146" height="40" viewBox="0 0 146 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="netlify-lockup" data-v-4ee6c329><path d="M22.794 39.79V29.687l.21-.21h2.526l.21.21V39.79l-.21.209h-2.527l-.209-.21ZM22.794 10.314V.21l.21-.209h2.526l.21.21v10.104l-.21.21h-2.527l-.209-.21ZM14.1 32.687h-.347l-1.738-1.738v-.347l3.256-3.26 1.84.004.245.242v1.84L14.1 32.686ZM12.015 9.49v-.35l1.738-1.735h.347l3.256 3.256v1.836l-.246.248h-1.839L12.015 9.49ZM.582 18.524h14.316l.21.21v2.53l-.21.209H.582l-.21-.21v-2.53l.21-.209Z" fill="var(--lockup-lines-fill)" data-v-4ee6c329></path> <path d="M29.005 25.265h-2.526l-.21-.21v-5.912c0-1.054-.412-1.869-1.682-1.895-.654-.016-1.4 0-2.199.033l-.12.12v7.651l-.21.21h-2.526l-.21-.21V14.948l.21-.21h5.684a3.998 3.998 0 0 1 3.998 3.999v6.315l-.21.21v.003ZM41.24 20.841l-.21.21H34.5l-.21.209c0 .422.423 1.685 2.108 1.685.631 0 1.263-.21 1.476-.631l.21-.21h2.525l.21.21c-.21 1.263-1.263 3.16-4.424 3.16-3.58 0-5.265-2.526-5.265-5.477 0-2.952 1.685-5.478 5.055-5.478 3.37 0 5.056 2.526 5.056 5.478v.844Zm-3.161-2.107c0-.21-.21-1.686-1.895-1.686s-1.895 1.476-1.895 1.686l.21.21h3.37l.21-.21ZM47.136 22.104c0 .422.21.632.632.632h1.895l.209.209v2.107l-.21.21h-1.894c-1.895 0-3.58-.845-3.58-3.161v-4.634l-.21-.21h-1.475l-.21-.209v-2.107l.21-.21h1.476l.21-.209v-1.894l.209-.21h2.526l.21.21v1.894l.209.21h2.316l.21.21v2.106l-.21.21h-2.316l-.21.21V22.1l.003.003ZM54.93 25.265h-2.525l-.21-.21V10.73l.21-.21h2.526l.21.21v14.322l-.21.21v.003ZM60.618 13.046h-2.526l-.21-.209V10.73l.21-.21h2.526l.21.21v2.107l-.21.21Zm0 12.22h-2.526l-.21-.21V14.944l.21-.21h2.526l.21.21v10.112l-.21.21ZM70.52 10.73v2.107l-.21.21h-1.894c-.422 0-.632.209-.632.631v.844l.21.21H70.1l.21.21v2.106l-.21.21h-2.107l-.21.21v7.581l-.21.21H65.05l-.21-.21v-7.582l-.21-.21h-1.475l-.21-.209v-2.107l.21-.21h1.476l.21-.209v-.844c0-2.317 1.684-3.161 3.58-3.161h1.894l.21.21-.004.003ZM78.311 25.474c-.844 2.108-1.685 3.37-4.633 3.37h-1.054l-.21-.209v-2.107l.21-.21h1.054c1.053 0 1.263-.209 1.475-.84v-.21l-3.37-8.216v-2.108l.21-.21h1.894l.21.21 2.526 7.163h.21l2.525-7.163.21-.21h1.894l.21.21v2.108l-3.37 8.426.01-.004Z" fill="var(--lockup-wordmark-fill)" data-v-4ee6c329></path> <path d="M94.699 25.205V10.707l-.213-.214H92.78l-.213.214v5.117h-.213c-.661-.853-1.706-1.28-2.772-1.28-2.985 0-4.69 2.346-4.69 5.544 0 3.198 1.705 5.543 4.69 5.543 1.13 0 2.132-.469 2.772-1.28h.213l.213.854.213.213h1.493l.213-.213Zm-2.132-5.117c0 2.558-1.066 3.624-2.772 3.624-1.705 0-2.771-1.258-2.771-3.624 0-2.367 1.066-3.625 2.771-3.625 1.706 0 2.772 1.066 2.772 3.625ZM96.614 20.088c0 3.411 1.918 5.543 5.117 5.543 3.198 0 5.117-2.132 5.117-5.543 0-3.412-1.919-5.544-5.117-5.544s-5.117 2.133-5.117 5.544Zm2.132 0c0-2.346 1.066-3.625 2.985-3.625 1.918 0 2.985 1.28 2.985 3.625 0 2.345-1.067 3.624-2.985 3.624-1.92 0-2.985-1.279-2.985-3.624ZM110.26 20.088c0-2.346 1.066-3.625 2.985-3.625 1.705 0 2.345.853 2.558 1.706l.213.213h1.706l.213-.213c-.213-1.919-1.706-3.625-4.69-3.625-3.199 0-5.117 2.133-5.117 5.544 0 3.411 1.918 5.543 5.117 5.543 2.984 0 4.477-1.706 4.69-3.624l-.213-.213h-1.706l-.213.213c-.213.852-.853 1.705-2.558 1.705-1.919 0-2.985-1.279-2.985-3.624ZM127.733 22.433c0-1.919-1.066-2.772-3.199-3.198-2.132-.426-2.984-.64-2.984-1.706 0-.852.852-1.066 1.918-1.066 1.493 0 1.919.64 1.919 1.28l.214.213h1.705l.213-.213c0-2.132-1.705-3.198-4.051-3.198-2.984 0-4.05 1.492-4.05 2.984 0 1.92 1.279 2.772 3.411 3.198 2.132.427 2.772.64 2.772 1.706 0 .853-.64 1.28-2.133 1.28-1.492 0-2.132-.64-2.132-1.706l-.213-.213h-1.705l-.214.213c0 2.345 1.493 3.624 4.264 3.624 2.985 0 4.265-1.492 4.265-3.198Z" fill="var(--lockup-secondary-text-fill)" data-v-4ee6c329></path> <path d="M131.138 18.524h14.316l.209.21v2.53l-.209.209h-14.316l-.21-.21v-2.53l.21-.209Z" fill="var(--lockup-lines-fill)" data-v-4ee6c329></path></svg></a></div> <div class="navbar__actions-wrapper"><form id="search-form" role="search" class="algolia-search-wrapper search-form"><label class="search-form__label"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 32 32" class="search-form__label-icon-search"><path d="M20.571 15.143c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8 8-3.589 8-8zM29.714 30c0 1.25-1.036 2.286-2.286 2.286-0.607 0-1.196-0.25-1.607-0.679l-6.125-6.107c-2.089 1.446-4.589 2.214-7.125 2.214-6.946 0-12.571-5.625-12.571-12.571s5.625-12.571 12.571-12.571 12.571 5.625 12.571 12.571c0 2.536-0.768 5.036-2.214 7.125l6.125 6.125c0.411 0.411 0.661 1 0.661 1.607z" fill="rgba(175, 180, 182, 0.87)"></path></svg> <input id="algolia-search-input" placeholder="Search our docs by topic..." class="search-form__input"></label> <button tabindex="-1" type="reset" class="search-form__label-icon-close">Close search <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 18 18"><g fill="#A3A9AC" transform="scale(-1 1) rotate(45 .571 -12.959)"><rect width="2.333" height="18.667" x="8.164" y=".003"></rect> <polygon points="8.164 .003 10.497 .003 10.497 18.67 8.164 18.67" transform="rotate(-90 9.33 9.336)"></polygon></g></svg></button> <div class="search-form__content-overlay"></div></form> <div class="navbar__right-actions"><a href="/ask-netlify/" aria-label="ask netlify" class="navbar__ask-netlify-link"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 44 44" class="wrapper__icon-ask-netlify"><path fill="currentColor" d="M18.77 23.56a1.8 1.8 0 1 1-3.6 0 1.8 1.8 0 0 1 3.6 0Zm8.26 1.8a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6Zm-3.86-1.54.03.07v.38l-.03.07-.87 1.77-.12.09h-.32l-.13-.1-.9-1.76-.03-.07v-.38l.03-.07 1-.66h.31l1.03.66Z"></path> <path fill="currentColor" fill-rule="evenodd" d="M22.32 13C28.77 13 34 17.22 34 23.67a6.97 6.97 0 0 1-6.97 6.97H10v-6.97C10 17.22 15.23 13 21.68 13h.64ZM11.55 23.16a5.24 5.24 0 0 1 10.07-2.05h.76l.01-.03a5.24 5.24 0 0 1 10.06 2.08c0 2.65-2.13 5.17-4.53 5.23H16.5a5.24 5.24 0 0 1-4.95-5.23Z" clip-rule="evenodd"></path> <path fill="currentColor" d="m24.47 8.12.07-.16 1.16-.4.15.08.63 1.95-.4.82-.16.06-.82-.4-.63-1.95Zm9.88 3.27.16.06.48 1.13-.07.16-1.9.76-.85-.34-.07-.16.35-.85 1.9-.76ZM30.04 8l.16-.06 1.1.54.05.16-1.14 2.43-.87.3-.15-.08-.3-.86L30.04 8Z" class="ask-netlify-flair"></path></svg> Ask Netlify</a> <div class="user-menu"> <button href="#menu" aria-label="menu" class="menu-trigger is-not-visible-mamabear"><svg viewBox="0 0 31 25" xmlns="http://www.w3.org/2000/svg" class="wrapper__icon-menu"><rect x="0.581177" y="0.71875" width="30" height="4" fill="currentcolor"></rect> <rect x="0.581177" y="10.7188" width="30" height="4" fill="currentcolor"></rect> <rect x="0.581177" y="20.7188" width="30" height="4" fill="currentcolor"></rect></svg></button> <nav aria-label="Netlify navigation" class="navbar__nav is-visible-mamabear navbar__authlinks" data-v-1733a580><div class="navbar__nav-list" data-v-1733a580><a href="https://app.netlify.com/login" rel="noopener noreferrer" class="navbar__nav-link" data-v-1733a580> Log in </a> <a href="https://app.netlify.com/signup" target="self" rel="noopener noreferrer" class="navbar__nav-link signup-button" data-v-1733a580> Sign up </a></div></nav></div></div></div></div></header> <main class="wrapper wrapper--main"><div class="wrapper__sidebar wrapper__navigation"><a class="button button--icon button--close is-not-visible-mamabear"><svg aria-hidden="true" width="24" height="24" viewBox="0 0 16 16" class="icon"><path d="M8,15 C4.13400675,15 1,11.8659932 1,8 C1,4.13400675 4.13400675,1 8,1 C11.8659932,1 15,4.13400675 15,8 C15,11.8659932 11.8659932,15 8,15 Z M10.44352,10.7233105 L10.4528296,10.7326201 L10.7326201,10.4528296 C11.0310632,10.1543865 11.0314986,9.66985171 10.7335912,9.37194437 L9.36507937,8.0034325 L10.7360526,6.63245928 C11.0344957,6.33401613 11.0349311,5.84948135 10.7370237,5.55157401 L10.448426,5.26297627 C10.1505186,4.96506892 9.66598387,4.96550426 9.36754072,5.26394741 L8.00589385,6.62559428 L6.63738198,5.25708241 C6.33947464,4.95917507 5.85493986,4.95961041 5.55649671,5.25805356 L5.26737991,5.54717036 C4.96893676,5.84561351 4.96850142,6.33014829 5.26640876,6.62805563 L6.62561103,7.9872579 L5.25463781,9.35823112 C4.95619466,9.65667427 4.95575932,10.141209 5.25366666,10.4391164 L5.5422644,10.7277141 C5.84017175,11.0256215 6.32470652,11.0251861 6.62314967,10.726743 L7.99412289,9.35576976 L9.36263476,10.7242816 C9.66054211,11.022189 10.1450769,11.0217536 10.44352,10.7233105 Z"></path></svg></a> <div aria-label="Docs" class="sidebar wrapper__sidebar-interior"><nav aria-label="Docs"><div><div class="sidebar__section">Welcome <ul class="sidebar__links"><li class="sidebar__link-item"><div><a href="/" aria-current="page" class="sidebar__link">Home</a></div></li><li class="sidebar__link-item"><div><a href="/get-started/" class="sidebar__link">Get started</a></div></li><li class="sidebar__link-item"><div><a href="/welcome/add-new-site/" class="sidebar__link">Add new site</a></div></li><li class="sidebar__link-item"><div><a href="/welcome/build-with-ai/" class="sidebar__link">Build with AI</a></div></li><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Get help </button>  </section></li></ul></div><div class="sidebar__section">Platform <ul class="sidebar__links"><li class="sidebar__link-item"><div><a href="/platform/what-is-netlify/" class="sidebar__link">What is Netlify?</a></div></li><li class="sidebar__link-item"><div><a href="/platform/who-is-netlify-for/" class="sidebar__link">Who is Netlify for?</a></div></li><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Checklists </button>  </section></li><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> How we release </button>  </section></li></ul></div><div class="sidebar__section">Platform primitives <ul class="sidebar__links"><li class="sidebar__link-item"><div><a href="/platform/primitives/" class="sidebar__link">Overview</a></div></li><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Functions </button>  </section></li><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Edge Functions </button>  </section></li><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Image CDN </button>  </section></li><li class="sidebar__link-item"><div><a href="/blobs/overview/" class="sidebar__link">Blobs</a></div></li><li class="sidebar__link-item"><div><a href="/platform/caching/" class="sidebar__link">Caching</a></div></li><li class="sidebar__link-item"><div><a href="/platform/dev-server/" class="sidebar__link">Dev Server</a></div></li><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Platform extensions </button>  </section></li></ul></div><div class="sidebar__section">Frameworks <ul class="sidebar__links"><li class="sidebar__link-item"><div><a href="/frameworks/" class="sidebar__link">Overview</a></div></li><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Framework support </button>  </section></li><li class="sidebar__link-item"><div><a href="/frameworks/environment-variables/" class="sidebar__link">Use environment variables with frameworks</a></div></li><li class="sidebar__link-item"><div><a href="/frameworks-api/" class="sidebar__link">Frameworks API</a></div></li></ul></div><div class="sidebar__section">Developer tools <ul class="sidebar__links"><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> CLI </button>  </section></li><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> API </button>  </section></li><li class="sidebar__link-item"><div><a href="/terraform-provider/" class="sidebar__link">Terraform Provider</a></div></li><li class="sidebar__link-item"><div><a href="https://developers.netlify.app/sdk/get-started/introduction/" target="_blank" rel="noopener noreferrer" class="sidebar__link">Netlify SDK</a></div></li><li class="sidebar__link-item"><div><a href="/welcome/command-palette/" class="sidebar__link">Command Palette</a></div></li></ul></div><div class="sidebar__section">Integrate & extend <ul class="sidebar__links"><li class="sidebar__link-item"><div><a href="/integrations/overview/" class="sidebar__link">Overview</a></div></li><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Integrations </button>  </section></li><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Build Plugins </button>  </section></li><li class="sidebar__link-item"><div><a href="/slack-app/" class="sidebar__link">Netlify App for Slack</a></div></li><li class="sidebar__link-item"><div><a href="/integrations/extend-netlify/" class="sidebar__link">Extend Netlify</a></div></li></ul></div><div class="sidebar__section">Configure & deploy site <ul class="sidebar__links"><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Git </button>  </section></li><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Environment variables </button>  </section></li><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Configure builds </button>  </section></li><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Site deploys </button>  </section></li><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Domains & HTTPS </button>  </section></li><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Static routing </button>  </section></li><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button aria-expanded="true" tabIndex="-1" class="sidebar__group-heading open"> Forms </button> <ul class="sidebar__links sidebar__group-items"><li class="sidebar__link-item"><div><a href="/forms/setup/" aria-current="page" class="active sidebar__link">Setup</a></div></li><li class="sidebar__link-item"><div><a href="/forms/spam-filters/" class="sidebar__link">Spam filters</a></div></li><li class="sidebar__link-item"><div><a href="/forms/submissions/" class="sidebar__link">Submissions</a></div></li><li class="sidebar__link-item"><div><a href="/forms/notifications/" class="sidebar__link">Notifications</a></div></li><li class="sidebar__link-item"><div><a href="/forms/troubleshooting-tips/" class="sidebar__link">Troubleshooting tips</a></div></li><li class="sidebar__link-item"><div><a href="/forms/usage-and-billing/" class="sidebar__link">Usage & billing</a></div></li></ul> </section></li></ul></div><div class="sidebar__section">Visual editing <ul class="sidebar__links"><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Visual Editor </button>  </section></li><li class="sidebar__link-item"><div><a href="/ai-assisted-publishing/" class="sidebar__link">AI-Assisted Publishing</a></div></li><li class="sidebar__link-item"><div><a href="https://visual-editor-reference.netlify.com/" target="_blank" rel="noopener noreferrer" class="sidebar__link">Visual editor reference</a></div></li></ul></div><div class="sidebar__section">Manage data <ul class="sidebar__links"><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Connect </button>  </section></li></ul></div><div class="sidebar__section">Site & team management <ul class="sidebar__links"><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Accounts & billing </button>  </section></li><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Security </button>  </section></li><li class="sidebar__link-item"><section tabIndex="-1" class="sidebar__group collapsable is-sub-group"><button tabIndex="-1" class="sidebar__group-heading"> Monitor sites </button>  </section></li></ul></div></div></nav> <div aria-labelledby="#external-link__header" class="external-links" data-v-bad94b42> Contact <ul class="external-links__list" data-v-bad94b42><li class="external-links__item" data-v-bad94b42><a href="https://answers.netlify.com" target="_blank" rel="noopener noreferrer" class="external-links__link" data-v-bad94b42> Forums </a></li> <li class="external-links__item" data-v-bad94b42><a href="https://www.netlify.com/support/" target="_blank" rel="noopener noreferrer" class="external-links__link" data-v-bad94b42> Contact support </a></li></ul></div> <nav aria-label="Netlify navigation" class="navbar__nav is-visible-mamabear navbar__authlinks is-not-visible-mamabear" data-v-1733a580><div class="navbar__nav-list" data-v-1733a580><a href="https://app.netlify.com/login" rel="noopener noreferrer" class="navbar__nav-link" data-v-1733a580> Log in </a> <a href="https://app.netlify.com/signup" target="self" rel="noopener noreferrer" class="navbar__nav-link signup-button" data-v-1733a580> Sign up </a></div></nav></div></div> <div class="wrapper__sidebar wrapper__toc"><nav aria-label="On this page" data-toc="" class="contents wrapper__sidebar-interior"> <details><summary class="contents__header">On this page</summary> <ol><li><a href="/forms/setup/#automatic-form-detection" data-slug="automatic-form-detection">Automatic form detection</a> <ul><li><a href="/forms/setup/#enable-form-detection" data-slug="enable-form-detection">Enable form detection</a> </li><li><a href="/forms/setup/#disable-form-detection" data-slug="disable-form-detection">Disable form detection</a> </li><li><a href="/forms/setup/#re-enable-form-detection" data-slug="re-enable-form-detection">Re-enable form detection</a> </li></ul></li><li><a href="/forms/setup/#html-forms" data-slug="html-forms">HTML forms</a> <ul><li><a href="/forms/setup/#submit-html-forms-with-ajax" data-slug="submit-html-forms-with-ajax">Submit HTML forms with AJAX</a> </li></ul></li><li><a href="/forms/setup/#javascript-forms" data-slug="javascript-forms">JavaScript forms</a> <ul><li><a href="/forms/setup/#forms-for-next-js-or-ssr-frameworks" data-slug="forms-for-next-js-or-ssr-frameworks">Forms for Next.js or SSR frameworks</a> </li><li><a href="/forms/setup/#work-with-javascript-rendered-forms" data-slug="work-with-javascript-rendered-forms">Work with JavaScript-rendered forms</a> </li><li><a href="/forms/setup/#submit-javascript-rendered-forms-with-ajax" data-slug="submit-javascript-rendered-forms-with-ajax">Submit JavaScript-rendered forms with AJAX</a> </li></ul></li><li><a href="/forms/setup/#success-messages" data-slug="success-messages">Success messages</a> <ul><li><a href="/forms/setup/#custom-success-page" data-slug="custom-success-page">Custom success page</a> </li><li><a href="/forms/setup/#custom-success-alert" data-slug="custom-success-alert">Custom success alert</a> </li></ul></li><li><a href="/forms/setup/#file-uploads" data-slug="file-uploads">File uploads</a> <ul><li><a href="/forms/setup/#file-upload-security" data-slug="file-upload-security">File upload security</a> </li><li><a href="/forms/setup/#limitations" data-slug="limitations">Limitations</a> </li><li><a href="/forms/setup/#submit-file-uploads-with-ajax" data-slug="submit-file-uploads-with-ajax">Submit file uploads with AJAX</a> </li></ul></li><li><a href="/forms/setup/#set-up-notifications" data-slug="set-up-notifications">Set up notifications</a> </li><li><a href="/forms/setup/#review-forms-usage" data-slug="review-forms-usage">Review forms usage</a> </li><li><a href="/forms/setup/#more-forms-resources" data-slug="more-forms-resources">More Forms resources</a> </li></ol></details></nav></div> <section class="wrapper__content"><header class="content__default"><div class="wrapper__breadcrumbs">Configure & deploy site /Forms /</div> <h1>Forms setup</h1></header> <div class="content__default">Netlify’s serverless form handling allows you to manage forms without extra API calls or additional JavaScript. Once enabled, the built-in form detection feature allows our build system to automatically parse your HTML at deploy time, so there’s no need for you to make an API call or include extra JavaScript on your site. To get started, enable <a href="#automatic-form-detection">automatic form detection</a> and then add a <code>netlify</code> attribute to your <a href="#html-forms">HTML form</a>. <div class="custom-block netlify-tip">Wondering how Netlify handles form submissions? Visit our <a href="/forms/submissions/">form submissions</a> doc to learn more about the form submissions UI, API endpoints, and more.</div> <h2 id="automatic-form-detection"><a href="#automatic-form-detection" class="header-anchor">#</a> Automatic form detection</h2> If you would like Netlify to automatically manage your form submissions, you need to enable form detection. <h3 id="enable-form-detection"><a href="#enable-form-detection" class="header-anchor">#</a> Enable form detection</h3> To enable form detection for your site: <ol><li>In the Netlify UI, go to <div aria-label="Navigation path" class="nav-path-container">Forms</div>.</li> <li>Select Enable form detection.</li></ol> Starting with your next site deploy, Netlify will automatically scan your deploys for forms that require submission handling. If you previously used Netlify Forms and disabled automatic form detection, follow the steps to <a href="#re-enable-form-detection">re-enable form detection</a> and start accepting submissions again. <h3 id="disable-form-detection"><a href="#disable-form-detection" class="header-anchor">#</a> Disable form detection</h3> You may want to disable form detection if your site doesn’t have forms anymore or if you decide not to use Netlify to manage your forms. Disabling form detection will reduce post processing and may speed up deploys. To disable form detection for your site: <ol><li>In the Netlify UI, go to <div aria-label="Navigation path" class="nav-path-container">Forms > Usage and configuration > Form detection</div>.</li> <li>Select Disable form detection.</li> <li>A confirmation prompt will appear. To continue, enter the name of your site and select Disable form detection.</li></ol> Starting with your next site deploy, Netlify will no longer scan your deploys for forms and will disable <a href="/forms/submissions/#form-submissions-ui">form submission</a> handling for any new or updated forms. <div class="custom-block netlify-warning">Warning Disabling form detection is intended only for sites that don’t use Netlify Forms. If your site does use Netlify Forms, we recommend removing forms from your site code or altering your code to handle submissions by other means before disabling form detection.</div> <h3 id="re-enable-form-detection"><a href="#re-enable-form-detection" class="header-anchor">#</a> Re-enable form detection</h3> If you previously used Netlify Forms and disabled automatic form detection, follow these steps to re-enable form detection: <ol><li>In the Netlify UI, go to <div aria-label="Navigation path" class="nav-path-container">Forms > Usage and configuration > Form detection</div>.</li> <li>Select Enable form detection.</li> <li>Redeploy your site.</li></ol> Once you redeploy your site, Netlify will automatically scan your deploys for forms and start accepting submissions again. <h2 id="html-forms"><a href="#html-forms" class="header-anchor">#</a> HTML forms</h2> Once you <a href="#enable-form-detection">enable form detection</a>, add an HTML form to your site with a <code>data-netlify="true"</code> or a <code>netlify</code> attribute in the <code><form></code> tag. Deploy your site with that form included and you can start receiving <a href="/forms/submissions/">submissions</a> in your Netlify site admin panel. Your form’s <code>name</code> attribute determines what we call the form in the Netlify UI. If you have more than one form on a site, each form should have a different <code>name</code> attribute. Here’s an example of how to use the <code>data-netlify="true"</code> attribute or the <code>netlify</code> attribute in your form: <div class="theme-code-group" data-v-5f0a03e0><div class="theme-code-group__nav" data-v-5f0a03e0><ul role="tablist" class="theme-code-group__ul" data-v-5f0a03e0><li class="theme-code-group__li" data-v-5f0a03e0><button class="theme-code-group__nav-tab" data-v-5f0a03e0> Loading error: Refresh the page to access this code sample </button></li></ul></div> <div role="tabpanel" id="form-with-data-netlify-attribute-tab" tabindex="0" class="theme-code-block" data-v-12d54b40><div class="language-html extra-class" data-v-12d54b40><pre class="language-html" data-v-12d54b40><code data-v-12d54b40><form name="contact" method="POST" data-netlify="true"> <p> <label>Your Name: <input type="text" name="name" /></label> </p> <p> <label>Your Email: <input type="email" name="email" /></label> </p> <p> <label>Your Role: <select name="role[]" multiple> <option value="leader">Leader</option> <option value="follower">Follower</option> </select></label> </p> <p> <label>Message: <textarea name="message"></textarea></label> </p> <p> <button type="submit">Send</button> </p> </form> </code></pre></div></div> <div role="tabpanel" id="form-with-netlify-attribute-tab" tabindex="0" class="theme-code-block" data-v-12d54b40><div class="language-html extra-class" data-v-12d54b40><pre class="language-html" data-v-12d54b40><code data-v-12d54b40><form name="contact" method="POST" netlify> <p> <label>Your Name: <input type="text" name="name" /></label> </p> <p> <label>Your Email: <input type="email" name="email" /></label> </p> <p> <label>Your Role: <select name="role[]" multiple> <option value="leader">Leader</option> <option value="follower">Follower</option> </select></label> </p> <p> <label>Message: <textarea name="message"></textarea></label> </p> <p> <button type="submit">Send</button> </p> </form> </code></pre></div></div></div> When Netlify parses the static HTML for a form you’ve added, the build system automatically strips the <code>data-netlify="true"</code> or <code>netlify</code> attribute from the <code><form></code> tag and injects a hidden input named <code>form-name</code>. In the resulting HTML that’s deployed, the <code>data-netlify="true"</code> or <code>netlify</code> attribute is gone, and the hidden <code>form-name</code> input’s <code>value</code> matches the <code>name</code> attribute of <code><form></code> like this: <div class="language-html extra-class"><pre class="language-html"><code><input type="hidden" name="form-name" value="contact" /> </code></pre></div><h3 id="submit-html-forms-with-ajax"><a href="#submit-html-forms-with-ajax" class="header-anchor">#</a> Submit HTML forms with AJAX</h3> You don’t have to, but you can submit static HTML forms using AJAX. A static HTML form submitted this way must have <code>data-netlify=true</code> or a <code>netlify</code> attribute inside its <code><form></code> tag. For an example of how to set these attributes, review the <a href="#html-forms">HTML forms</a> section. Here’s an AJAX form submission example using the <code>fetch</code> API for a static HTML form: <div class="language-js extra-class"><pre class="language-js"><code>const handleSubmit = event => { event.preventDefault(); const myForm = event.target; const formData = new FormData(myForm); fetch("/", { method: "POST", headers: { "Content-Type": "application/x-www-form-urlencoded" }, body: new URLSearchParams(formData).toString() }) .then(() => console.log("Form successfully submitted")) .catch(error => alert(error)); }; document.querySelector("form").addEventListener("submit", handleSubmit); </code></pre></div>Requirements for the request: <ul><li>The body of the request must be URL-encoded. In the above example, the form is passed to a <code>FormData</code> constructor. That object is then encoded using the <code>URLSearchParams</code> constructor and converted to a string. Note that Netlify Forms does not support JSON form data at this time.</li> <li>If the form accepts alphanumeric data only, the request should include the header <code>"Content-Type": "application/x-www-form-urlencoded"</code>. If the form accepts <a href="/forms/setup/#file-uploads">file uploads</a>, including a <code>Content-Type</code> header is not recommended.</li></ul> <h2 id="javascript-forms"><a href="#javascript-forms" class="header-anchor">#</a> JavaScript forms</h2> You don’t need to include extra JavaScript on your site to use Netlify Forms. But, if you want to, you can use JavaScript to render a form client-side. You can also submit JavaScript-rendered forms over AJAX. <h3 id="forms-for-next-js-or-ssr-frameworks"><a href="#forms-for-next-js-or-ssr-frameworks" class="header-anchor">#</a> Forms for Next.js or SSR frameworks</h3> If you’re using a pure JavaScript form or SSR (Server Side Rendering), you must include an HTML form that meets this <a href="https://answers.netlify.com/t/support-guide-form-problems-form-debugging-404-when-submitting/92#p-141-form-handling-works-automatically-for-html-forms-that-meet-the-following-requirements-2" target="_blank" rel="noopener noreferrer">HTML form criteria</a>, including all the input tags with the same names as the JavaScript form. For instructions and examples specific to Next.js 13.5 and above, visit <a href="/frameworks/next-js/overview/#v5-breaking-changes">breaking changes for the Next.js runtime</a>. <div id="javascript-rendered-forms" class="legacy-anchor"></div> <h3 id="work-with-javascript-rendered-forms"><a href="#work-with-javascript-rendered-forms" class="header-anchor">#</a> Work with JavaScript-rendered forms</h3> The Netlify build system finds your forms by parsing the HTML of your site when the build completes. This means that if you’re using JavaScript to render a form client-side, our build system won’t find it in the pre-built files. You can work around this: <ul><li>Create a hidden HTML form with the <code>data-netlify="true"</code> attribute or a <code>netlify</code> attribute and input fields with <code>name</code> attributes to match the inputs of your JavaScript-rendered form. You need to apply the same work around if you want to use our <a href="/forms/spam-filters/#recaptcha-2-challenge">reCAPTCHA 2 integration</a>, and create a <code>div</code> element in the hidden HTML with the <code>data-netlify-recaptcha="true"</code> attribute.</li> <li>Add a hidden input to the JavaScript-rendered form or JSX form: <div class="language-js extra-class"><pre class="language-js"><code><input type="hidden" name="form-name" value="name_of_my_form" /> </code></pre></div></li></ul> You can also find related tutorials on our blog: <ul><li><a href="https://www.netlify.com/blog/2017/07/19/how-to-integrate-netlifys-form-handling-in-a-react-app/" target="_blank" rel="noopener noreferrer">How to Integrate Netlify’s Form Handling in a React App</a></li> <li><a href="https://www.netlify.com/blog/2018/09/07/how-to-integrate-netlify-forms-in-a-vue-app/" target="_blank" rel="noopener noreferrer">How to Integrate Netlify forms in a Vue App</a></li></ul> While the two articles are fairly framework-specific, the code demonstrates how to prerender forms when working with them in a web application. <div id="ajax-form-submissions" class="legacy-anchor"></div> <div id="submit-forms-via-ajax" class="legacy-anchor"></div> <h3 id="submit-javascript-rendered-forms-with-ajax"><a href="#submit-javascript-rendered-forms-with-ajax" class="header-anchor">#</a> Submit JavaScript-rendered forms with AJAX</h3> To submit a JavaScript-rendered form built with a framework like Gatsby or Nuxt, you can send an AJAX POST request to any path on your site. Requirements for the request: <ul><li>You need to URL-encode your form data in the body of the request.</li> <li>If you haven’t added a hidden <code>form-name</code> input to your JavaScript-rendered form, you need to send a <code>form-name</code> attribute in the AJAX POST request body.</li> <li>If the form accepts alphanumeric data only, the request should include the header <code>"Content-Type": "application/x-www-form-urlencoded"</code>. If the form accepts <a href="/forms/setup/#file-uploads">file uploads</a>, including a <code>Content-Type</code> header is not recommended.</li></ul> Here’s an AJAX form submission code sample using the <code>fetch</code> API for a JavaScript-rendered form. It uses Gatsby’s <code>navigate</code> function to redirect to a custom page on form submission success. <div class="language-js extra-class"><pre class="language-js"><code>const handleSubmit = event => { event.preventDefault(); const myForm = event.target; const formData = new FormData(myForm); fetch("/", { method: "POST", headers: { "Content-Type": "application/x-www-form-urlencoded" }, body: new URLSearchParams(formData).toString() }) .then(() => navigate("/thank-you/")) .catch(error => alert(error)); }; </code></pre></div>For a JavaScript-rendered form, you need to add a hidden <code>input</code> with <code>name="form-name"</code> to the returned form elements. Here’s an example: <div class="language-jsx extra-class"><pre class="language-jsx"><code>return ( <form data-netlify="true" name="pizzaOrder" method="post" onSubmit={handleSubmit} > <input type="hidden" name="form-name" value="pizzaOrder" /> <label> What order did the pizza give to the pineapple? <input name="order" type="text" onChange={handleChange} /> </label> <input type="submit" /> </form> ); </code></pre></div>In the code sample above, a <code>handleChange</code> function updates the form’s state, which ultimately gets sent in a POST request to Netlify. <h2 id="success-messages"><a href="#success-messages" class="header-anchor">#</a> Success messages</h2> By default, when visitors complete a form, they are redirected to a page with a generically styled success message with a link back to the form page. <img src="/images/forms-default-generic-success-message.png" alt="Generic forms success message displayed."> <h3 id="custom-success-page"><a href="#custom-success-page" class="header-anchor">#</a> Custom success page</h3> You can replace the default success page with a custom page you create by adding an <code>action</code> attribute to the <code><form></code> tag, entering the path of your custom page (like <code>"/pages/success"</code>) as the value. The path must be relative to the site root, starting with a <code>/</code>. Here’s an example: <div class="language-html extra-class"><pre class="language-html"><code><form name="contact" action="/pages/success" method="POST" data-netlify="true" ></form> </code></pre></div>If you submit your form using AJAX, reference this <a href="#submit-javascript-rendered-forms-with-ajax">Gatsby-specific example</a> of how to set a custom success page. <h3 id="custom-success-alert"><a href="#custom-success-alert" class="header-anchor">#</a> Custom success alert</h3> If you use AJAX to submit the form, you can substitute an alert instead of redirecting to a generic or custom page. Here’s an example for an HTML form: <div class="language-js extra-class"><pre class="language-js"><code>const handleSubmit = event => { event.preventDefault(); const myForm = event.target; const formData = new FormData(myForm); fetch("/", { method: "POST", headers: { "Content-Type": "application/x-www-form-urlencoded" }, body: new URLSearchParams(formData).toString() }) .then(() => alert("Thank you for your submission")) .catch(error => alert(error)); }; document.querySelector("form").addEventListener("submit", handleSubmit); </code></pre></div><h2 id="file-uploads"><a href="#file-uploads" class="header-anchor">#</a> File uploads</h2> <noscript> For information about interacting with uploaded files, visit the <a href="/forms/submissions/#file-uploads">submissions page</a>. </noscript> Netlify Forms can receive files uploaded with form submissions. To do this, add an input with <code>type="file"</code> to any form. Although most browsers will detect the encoding automatically, you can optionally include <code>enctype="multipart/form-data"</code> in the <code><form></code> tag, Here’s a sample HTML form with a file upload field: <div class="language-html extra-class"><pre class="language-html"><code><form name="fileForm" enctype="multipart/form-data" data-netlify="true"> <p> <label> <span>Name:</span> <input name="name" type="text" /> </label> </p> <p> <label> <span>Add file:</span> <input name="file" type="file" /> </label> </p> <button>Submit</button> </form> <p class="result"></p> </code></pre></div><h3 id="file-upload-security"><a href="#file-upload-security" class="header-anchor">#</a> File upload security</h3> Forms that accept file uploads that contain personally identifiable information (PII) require additional security configuration. We recommend using the <a href="https://www.netlify.com/integrations/very-good-security/" target="_blank" rel="noopener noreferrer">Very Good Security</a> integration for this type of secure form upload. <h3 id="limitations"><a href="#limitations" class="header-anchor">#</a> Limitations</h3> Keep the following considerations in mind when working with file uploads in forms. <ul><li>Only one file upload per field is supported. For multiple file uploads, use multiple fields.</li> <li>The form request has a maximum size limit of 8 MB.</li> <li>File uploads time out after 30 seconds.</li></ul> <h3 id="submit-file-uploads-with-ajax"><a href="#submit-file-uploads-with-ajax" class="header-anchor">#</a> Submit file uploads with AJAX</h3> When submitting a form with a file upload, including a <code>Content-Type</code> header is not recommended. The browser should detect and set the <code>Content-Type</code> automatically. Here’s an AJAX form submission code sample using the <code>fetch</code> API for the above HTML form with file upload: <div class="language-js extra-class"><pre class="language-js"><code>document.forms.fileForm.addEventListener("submit", event => { event.preventDefault(); const result = document.querySelector(".result"); fetch("/", { body: new FormData(event.target), method: "POST" }) .then(() => { result.innerText = "Success"; }) .catch(error => { result.innerText = `Failed: ${error}`; }); }); </code></pre></div><h2 id="set-up-notifications"><a href="#set-up-notifications" class="header-anchor">#</a> Set up notifications</h2> To monitor the content of your form submissions, you can set up notifications to send the content of the form submissions to an email address or to an external service with an HTTP POST request. Learn more about <a href="/forms/notifications/">forms notifications</a>. To set up notifications for your site’s form submissions: <ol><li>For your site go to <div aria-label="Navigation path" class="nav-path-container"> Configuration > Notifications > Form submission notifications</div>, and select Add notification.</li></ol> <h2 id="review-forms-usage"><a href="#review-forms-usage" class="header-anchor">#</a> Review forms usage</h2> For the last month (or billing period), you can review how many verified form submissions were made and the total storage size of all files uploaded. <ol><li>For your site, go to <div aria-label="Navigation path" class="nav-path-container">Forms > Usage and configuration > Usage</div>.</li></ol> Learn more about <a href="/forms/usage-and-billing/">reviewing and managing forms usage</a>. <h2 id="more-forms-resources"><a href="#more-forms-resources" class="header-anchor">#</a> More Forms resources</h2> <ul><li><a href="/forms/spam-filters/">Spam filters</a></li> <li><a href="/forms/submissions/">Form submissions</a></li> <li><a href="/forms/notifications/">Form submission notifications</a></li> <li><a href="/functions/trigger-on-events/">Form-triggered functions</a></li> <li><a href="/forms/troubleshooting-tips/">Troubleshooting tips</a></li> <li><a href="/forms/usage-and-billing/">Forms usage and billing</a></li></ul></div>  <div class="content__default wrapper__last_updated has_page_nav"><time datetime="2024-11-06"> Last updated: November 6, 2024 </time></div> <div class="footer-page-nav"> <a href="/forms/spam-filters/"> Spam filters </a> → </div> <div class="feedback"><div class="media"><div class="media__body"><h4 class="media__title"> Did you find this doc useful? </h4>  Your feedback helps us improve our docs.  </div> <div class="media__figure"><button aria-label="upvote" class="feedback__vote feedback__vote--upvote"><svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" aria-hidden="true"><g fill="none" fill-rule="evenodd"><circle cx="32" cy="32" r="32" fill="none" fill-rule="nonzero"></circle> <g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M40 29h-7.645l1.473-3.889c.377-.996.042-2.135-.803-2.73-.963-.679-2.263-.427-2.936.569L26 29v9a4 4 0 0 0 4 4h6.517c1.51 0 2.893-.852 3.573-2.203L42 36v-5a2 2 0 0 0-2-2zM22 29v12"></path></g></g></svg></button><button aria-label="downvote" class="feedback__vote feedback__vote--downvote"><svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" aria-hidden="true"><g fill="none" fill-rule="evenodd"><circle cx="32" cy="32" r="32" fill="none" fill-rule="nonzero"></circle> <g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M23 35h7.645l-1.473 3.889c-.377.996-.042 2.135.803 2.73.963.679 2.263.427 2.936-.569l4.09-6.05v-9a4 4 0 0 0-4-4h-6.518c-1.51 0-2.893.852-3.573 2.202L21 28v5a2 2 0 0 0 2 2zM41 35V23"></path></g></g></svg></button></div></div> <div><form class='form form--floating-labels feedback__form--appear' method='post' name='feedback'><input type="hidden" name="form-name" value="feedback"> <input type="hidden" name="path" value="/forms/setup/"> <input type="hidden" name="vote" value=""> <label class="visuallyhidden"> Do not fill in this field <input name="verification" value=""></label> <div class="form__field"><label><div class="form__label"> What else would you like to tell us about this doc? </div> <textarea name="feedback" class="form__textarea"></textarea></label></div> <div class="btn-group"><button disabled="disabled" class="btn"> Send </button></div></form></div></div> <footer class="footer"><div class="footer-wrapper"><nav aria-label="Footer navigation" class="footer-nav"><ul class="footer__nav"><li class="footer__nav-item"><a href="https://netlify.com/" class="footer__nav-link"> Netlify </a></li> <li class="footer__nav-item"><a href="https://netlify.com/careers/" class="footer__nav-link"> Careers </a></li> <li class="footer__nav-item"><a href="https://netlify.com/blog/" class="footer__nav-link"> Blog </a></li> <li class="footer__nav-item"><a href="https://www.netlify.com/legal/terms-of-use/" class="footer__nav-link"> Terms </a></li> <li class="footer__nav-item"><a href="https://www.netlify.com/privacy/" class="footer__nav-link"> Privacy </a></li></ul></nav> <div class="dark-mode-widget footer__theme-toggle" data-v-0d17f8d5><label for="theme-select" class="visuallyhidden" data-v-0d17f8d5>Select a theme</label> <div class="forms-select-c" data-v-0d17f8d5><div class="theme-toggle-icon" data-v-0d17f8d5><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-0d17f8d5><path fill-rule="evenodd" clip-rule="evenodd" d="M14 7C14 10.866 10.866 14 7 14C3.13401 14 0 10.866 0 7C0 3.13401 3.13401 0 7 0C10.866 0 14 3.13401 14 7ZM7 12.2C6.99999 12.2 7.00001 12.2 7 12.2C4.12812 12.2 1.8 9.87188 1.8 7C1.8 4.12812 4.12812 1.8 7 1.8C7.00001 1.8 6.99999 1.8 7 1.8V12.2Z" fill="currentColor"></path></svg>  </div> <select value="system" name="theme-select" id="theme-select" class="forms-input"> <option value="system" data-v-0d17f8d5>System</option><option value="light" data-v-0d17f8d5>Light</option><option value="dark" data-v-0d17f8d5>Dark</option></select> <svg width="21" height="13" viewBox="0 0 21 13" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-arrow-down forms-select-c-arrow"><path d="M20.7656 1.82812C21.0156 2.10938 21.0156 2.375 20.7656 2.625L10.9219 12.4688C10.6719 12.7188 10.4219 12.7188 10.1719 12.4688L0.328125 2.625C0.078125 2.375 0.078125 2.10938 0.328125 1.82812L1.26562 0.9375C1.51562 0.65625 1.78125 0.65625 2.0625 0.9375L10.5469 9.375L19.0312 0.9375C19.3125 0.65625 19.5781 0.65625 19.8281 0.9375L20.7656 1.82812Z"></path></svg></div></div></div> © 2025 Netlify</footer></section></main></div><div class="global-ui"></div></div> <script src="/assets/js/app.4a12bea4.js" defer></script><script src="/assets/js/6.f7eff80e.js" defer></script><script src="/assets/js/2.1c921067.js" defer></script><script src="/assets/js/145.405faca2.js" defer></script><script src="/assets/js/16.bc1aa620.js" defer></script><script src="/assets/js/32.07d46218.js" defer></script><script src="/assets/js/31.2c355c7b.js" defer></script> <script src="/netlify-cnm/cnm.js" async defer></script> <script async id="netlify-rum-container" src="/.netlify/scripts/rum" data-netlify-rum-site-id="90a54386-9477-4113-bd6a-b9227b573d00" data-netlify-deploy-branch="main" data-netlify-deploy-context="production" data-netlify-cwv-token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzaXRlX2lkIjoiOTBhNTQzODYtOTQ3Ny00MTEzLWJkNmEtYjkyMjdiNTczZDAwIiwiYWNjb3VudF9pZCI6IjU4ZGE4ODkzZDY4NjVkMzVjOTJhNzJiOCIsImRlcGxveV9pZCI6IjY3YWY5MjQyM2MyMzIwMDAwOGVkNWViYiIsImlzc3VlciI6Im5mc2VydmVyIn0.ITO2hYKD-bfMx7Aojk4qxSrtteyJXD3ljjojUDrlsYA"></script><script type="text/javascript"> if (window.location.host === "docs.netlify.com") { !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics.SNIPPET_VERSION="4.13.1"; analytics.load("kjz0qkJslzzHMcNGI3GkDb9HDZ6vspYZ"); }}(); } </script></body> </html>