--- title: "Deploy An Astro site with Forms, Serverless Functions, and Redirects" description: "Build and deploy an Astro site utilizing Netlify serverless Functions, Forms, and Redirects." source: "https://www.netlify.com/blog/deploy-an-astro-site-with-forms-serverless-functions-and-redirects/" last_updated: "2026-07-09T01:21:49.000Z" --- ![image](https://cdn.sanity.io/images/o0o2tn5x/production/e009277a7e8e3553eae9b208a8071850b1edcb3f-1200x968.webp) We created an [Astro Quickstart Template](https://github.com/netlify-templates/astro-quickstart) that lets you hit the ground running with a site deployed to Netlify but what about when you’re ready to do more like pull in data with a serverless function, create a contact form or redirect users? Well, now we have a template for that too! The Astro Toolbox template gives you all the code you need to incorporate [Netlify Functions](https://ntl.fyi/3ymoWYK), [Netlify Forms](https://ntl.fyi/3PfrLlm), and [Redirects](https://ntl.fyi/3uvt2ww). Here’s the info: - [Live Demo](https://astro-toolbox.netlify.app/) - [Template Codebase Repo](https://github.com/netlify-templates/astro-toolbox) - Check out the video walkthrough here: [https://youtu.be/GrSLYq6ZTes](https://youtu.be/GrSLYq6ZTes) Click this button to clone the repo, make a new Netlify project from it, and get it deployed ASAP! [![Deploy to Netlify Button](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/netlify-templates/astro-toolbox?utm_campaign=template-team&utm_source=dtn-button&utm_medium=dtn-button&utm_term=astro-tt-dtn-button&utm_content=astro-tt-dtn-button) Let’s make this template your own, get it up and running then dig into each of the features! ## Clone, Deploy, & Develop! The Netlify CLI offers a quick way to clone the template to a GitHub account, create a Netlify project with it, and deploy it with the command `sites:create-template`. Once the CLI is installed, this command can be run like this or with the URL of the template of your choosing. Here’s what that would look like with the Astro Toolbox template. ``` npm install netlify-cli -g netlify sites:create-template https://github.com/netlify-templates/astro-toolbox ``` ![screenshot of sites:create-template command](https://res.cloudinary.com/dzkoxrsdj/image/upload/v1657311024/CleanShot_2022-07-08_at_16.09.41_2x_n3zyxs.jpg) Once this command is run you can click the - **Admin URL** - to see the project dashboard on Netlify - **URL** - to see the project live online - **Repo URL** - to go to the project repo on GitHub To work on the project locally clone your new repo to a local directory with the command `git clone `, change into that directory, then run `netlify init` to link it to your Netlify project. ![screenshot of cloning and initiating project](https://res.cloudinary.com/dzkoxrsdj/image/upload/v1657314300/CleanShot_2022-07-08_at_17.03.53_2x_hv8pl6.jpg) Now you can run `netlify dev` and head to [http://localhost:8888](http://localhost:8888) to see the project and try out any changes. ## All The Pieces Now that we have the project as our very own, let’s dig into each of the Netlify features we get to play with (and by “play with” I obviously mean do very serious business things). ### Netlify Forms There are two new files created to bring forms into the Astro app: a feedback form component and an optional success page. #### The Form Component [`components/FeedbackForm.js`](https://github.com/netlify-templates/astro-toolbox/blob/main/src/components/FeedbackForm.astro) - has all the code needed for a Netlify form. Inside the form component there are a few special attributes - `netlify`: which lets Netlify know that this form should be treated as a Netlify form - `netlify-honeypot`: to activate the one of [Netlify’s spam filters](https://ntl.fyi/3bWOAf8) - `action="/success"`: which will take users to the custom success page Then inside the form there is a hidden `p` class to keep away those bots. Learn more about this [honeypot strategy here](https://ntl.fyi/3bWOAf8). ``` ``` One other input field will be marked as `hidden` to ``` ``` This field is here because with JavaScript-rendered forms our buildbots won’t find it in the pre-built files so this will help them find it ([here’s more info on that in the docs](https://docs.netlify.com/forms/setup/#work-with-javascript-rendered-forms)). #### The Success Page [`pages/success.js`](https://github.com/netlify-templates/astro-toolbox/blob/main/src/pages/success.astro) (_optional_) - if you would like a custom page to let users know the submission was successful, otherwise there is a default one from Netlify. This page for our example lets users know the submission was successful but this can be anything your little heart desires as long as you link to it inside the forms `action=` attribute. #### Forms Dashboard As soon as the form is deployed it can be viewed from the ‘Forms’ dashboard on the project’s top navigation menu. ![Forms Dashboard screenshot](https://res.cloudinary.com/dzkoxrsdj/image/upload/v1657551435/CleanShot_2022-07-08_at_23.53.30_2x_1_nygbrn.jpg) When submissions start rolling in they can be viewed from the forms dashboard as well as deleted, marked as SPAM, and exported as a CSV file. Beyond the dashboard Netlify Form submissions can also be handled with serverless functions by utilizing [the Netlify Form API](https://ntl.fyi/3c7ZAqh). ![Submission Dashboard screenshot](https://res.cloudinary.com/dzkoxrsdj/image/upload/v1657339363/CleanShot_2022-07-08_at_23.53.42_2x_kdexa0.jpg) ### Netlify Functions Using serverless function like, [Netlify Functions](https://ntl.fyi/3ymoWYK), can make your application more robust by pulling in information from data sources or using different API libraries. In this example we have a list of jokes in a JSON file that we use the function to pull from and display a random joke with each click of the button. For this example, the functions and their data live in the default folder `netlify/functions` that Netlify automatically looks for, but if you want them to live somewhere else you can [specify it in the `netlify.toml` configuration file](https://ntl.fyi/3RmigCG). In that directory we have the JSON file of jokes and `joke.js` function file. [`/netlify/functions/joke.js`](https://github.com/netlify-templates/astro-toolbox/blob/main/netlify/functions/joke.js) ``` import jokes from "./jokes.json"; export const handler = async () => { const randomIndex = Math.floor(Math.random() * jokes.length); const randomJoke = jokes[randomIndex]; return { statusCode: 200, body: randomJoke, };}; ``` This function uses the Netlify Functions async format to grab and return a random joke from the JSON list of jokes. You can learn more about this function in the [project repo](https://github.com/netlify-templates/astro-toolbox#netlify-functions) and more about Netlify Functions [in the Netlify docs](https://ntl.fyi/3awAfpd). ### Redirects There is a lot that can be done with redirects, you can learn more about all that here. In this example we kept it pretty simple by shortening the URL to call the function from `/.netlify/functions/joke.js` to `/api/joke.js` to save keystrokes. We set this up in the `netlify.toml` configuration file but it can also be set in a specific redirects file, [more info on that here](https://docs.netlify.com/routing/redirects/#syntax-for-the-redirects-file). [`netlify.toml`](https://github.com/netlify-templates/astro-toolbox/blob/main/netlify.toml) ``` ...[[redirects]] from = "/api/*" # simplify all calls to serverless functions to = "/.netlify/functions/:splat" # all function calls will go to this path status = 200 # ok code force = true # ensure to always redirect ``` Beyond testing redirects using `netlify dev` local development process, the Deploy Summary on each individual Deploy page will show that there has been “1 redirect rule processed”. ![screenshot of deploy dashboard](https://res.cloudinary.com/dzkoxrsdj/image/upload/v1657505687/CleanShot_2022-07-10_at_22.12.25_2x_s20voa.jpg) ## Blast Off! We’ve covered cloning, deploying, development, serverless functions, forms, and redirects. Now, you can make it your own and get your fantastic project out into the world. Here are the project resources again: - [Live Demo](https://astro-toolbox.netlify.app/) - [Template Codebase Repo](https://github.com/netlify-templates/astro-toolbox) We can’t wait to see what you create! Have a template you’d like to see in the future? Drop us a note at [templates@netlify.com](mailto:tempaltes@netlify.com). Until next template, happy coding 👩🏻‍💻! ### Share - [X (fka Twitter)](https://twitter.com/intent/tweet?text=Deploy An Astro site with Forms, Serverless Functions, and Redirects&url=https://www.netlify.com/blog/deploy-an-astro-site-with-forms-serverless-functions-and-redirects/) - [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2Fdeploy-an-astro-site-with-forms-serverless-functions-and-redirects%2F) - [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/deploy-an-astro-site-with-forms-serverless-functions-and-redirects/) - [Bluesky](https://bsky.app/intent/compose?text=Deploy An Astro site with Forms, Serverless Functions, and Redirects+https://www.netlify.com/blog/deploy-an-astro-site-with-forms-serverless-functions-and-redirects/) * * * ### Tags - [templates](/blog/tags/templates/) - [astro](/blog/tags/astro/) - [Netlify Functions](/blog/tags/netlify-functions/) - [Netlify forms](/blog/tags/netlify-forms/) - [Redirects](/blog/tags/redirects/) ## Keep reading ![](/images/blog-fallback-thumbnail.svg) Guides & Tutorials June 13, 2022 [ ### How to deploy an Astro site ](/blog/how-to-deploy-astro) - ![Profile picture of Salma Alam-Naylor](/_astro/824da0593d02b9571a577aed4ff1d70073e3c797-1000x1000_Z2qMuVc.webp) Salma Alam-Naylor ![](/_astro/29b8dd85ebfde464131da88c2906b83933a2f949-2197x1613_1MQAeD.webp) Guides & Tutorials May 16, 2022 [ ### Make and Deploy an Astro Project in Minutes ](/blog/deploy-your-astro-project-fast) - ![Profile picture of Tara Z. Manicsic](/_astro/2ac74d0595066130d59f8c97e61332017cdbcb94-1000x921_ZyTafG.webp) Tara Z. Manicsic ## Recent posts News & Announcements June 25, 2026 [ ### Netlify Functions, designed for Agent Experience ](/blog/netlify-functions-designed-for-agent-experience) - ![Profile picture of Eduardo Bouças](/_astro/52958f21e8450baf6d8e60302341a984e220c0cd-512x512_13VDlu.webp) Eduardo Bouças News & Announcements June 24, 2026 [ ### How we measure Netlify’s Agent Experience ](/blog/how-we-measure-netlify-agent-experience) - ![Profile picture of Sean Roberts](/_astro/bbf2243f8171dbddd80ab2103622106cef84d125-512x512_Z1d2LKE.webp) Sean Roberts Guides & Tutorials May 15, 2026 [ ### How to build a real-time AI chatbot in minutes with Netlify Agent Runners (no backend) ](/blog/how-to-build-a-real-time-ai-chatbot-in-minutes-with-netlify-agent-runners-no-backend) - ![Profile picture of Nahrin Jalal](/_astro/f0e7c8f227a03fe58340c99ef5439d5a896c0733-272x272_Z23kDpD.webp) Nahrin Jalal ![](/_astro/3f255b372fa958df35802666ee33b4609b2d71bd-1200x1586_1VtE2D.webp) ### How do the best dev and marketing teams work together? [Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)