> ## Documentation Index
> Fetch the complete documentation index at: https://docs.formbox.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Astro

> Learn how to integrate your Formbox form with <a href="https://astro.build" target="_blank" rel="noopener noreferrer">Astro</a>.

## What is Astro?

Astro is the web framework for building content-driven websites like blogs, marketing, and e-commerce. Astro is best-known for pioneering a new frontend architecture to reduce JavaScript overhead and complexity compared to other frameworks.

## Prerequisites

Before you begin, you'll need to have a Formbox form. If you don't have one yet, you can create a new form by following the steps in the [Introduction](/introduction#step-2-creating-a-form-in-formbox) guide. Once you have your form, make a note of the form's endpoint url in the setup tab of your form page, as you'll need it later.

## Creating a new Astro project

To get up and running quickly, we will follow the official Astro <a href="https://docs.astro.build/en/install/auto" target="_blank" rel="noopener noreferrer">installation</a> guide to create a new Astro project. In your terminal, run the following command:

```bash theme={null}
npm create astro@latest
```

After the prompts, the create astro command will create a folder with your project name and install the required dependencies.

Go to the new directory for the new website:

```bash theme={null}
cd astro-with-formbox
```

Start the development server:

```bash theme={null}
npm run dev
```

Open your browser and navigate to `http://localhost:4321`. You should see a new Astro application running.

<Frame>
  <img src="https://mintcdn.com/formbox/05sa9iZ1Da5XhrTY/images/astro-project.png?fit=max&auto=format&n=05sa9iZ1Da5XhrTY&q=85&s=d2013a8381937f253f6c3eea1896ea83" style={{ borderRadius: "0.5rem" }} width="2142" height="1490" data-path="images/astro-project.png" />
</Frame>

## Adding your Formbox form to your Astro project

Now that we have a new Astro project set up, let's add our Formbox form to it.

For styling purposes, we'll use <a href="https://tailwindcss.com/" target="_blank" rel="noopener noreferrer">Tailwind CSS</a>. You can learn how to add Tailwind CSS to your project by following the Astro <a href="https://tailwindcss.com/docs/guides/astro" target="_blank" rel="noopener noreferrer">installation guide</a>.

Once you have Tailwind CSS set up, let's add our form.

Open up the `index.astro` file within the root of the `pages` directory and replace everything in the file with the following code block:

```jsx index.astro theme={null}
<main>
  <div class="max-w-md mx-auto py-20 bg-white">
    <h2 class="text-2xl font-semibold mb-6">Get in Touch</h2>
    <form action="https://api.formbox.app/s/{your-form-id}" method="POST">
      <div class="mb-4">
        <label for="name" class="block text-gray-700 text-sm font-bold mb-2">
          Name
        </label>
        <input
          type="text"
          id="name"
          name="name"
          placeholder="John Doe"
          required
          class="w-full px-3 py-2 border rounded-md focus:outline-none focus:border-blue-500"
        />
      </div>
      <div class="mb-4">
        <label for="email" class="block text-gray-700 text-sm font-bold mb-2">
          Email
        </label>
        <input
          type="email"
          id="email"
          name="email"
          placeholder="john@example.com"
          required
          class="w-full px-3 py-2 border rounded-md focus:outline-none focus:border-blue-500"
        />
      </div>
      <div class="mb-6">
        <label for="message" class="block text-gray-700 text-sm font-bold mb-2">
          Message
        </label>
        <textarea
          id="message"
          name="message"
          rows={4}
          placeholder="How can we help you?"
          class="w-full px-3 py-2 border rounded-md focus:outline-none focus:border-blue-500"
        ></textarea>
      </div>
      <button
        type="submit"
        class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:shadow-outline-blue"
      >
        Send Message
      </button>
    </form>
  </div>
</main>
```

Paste the form endpoint url you copied from Formbox into your form’s `action` attribute as shown in the code block above.

Save the file and navigate to `http://localhost:4321` in your browser. You should see a form that you can fill out and submit.

<Frame>
  <img src="https://mintcdn.com/formbox/27_5fcxY_YavrIb7/images/tailwind-form.png?fit=max&auto=format&n=27_5fcxY_YavrIb7&q=85&s=eef3bd6f1e5754e78cbf34a5fc4ff64c" style={{ borderRadius: "0.5rem" }} width="2166" height="1524" data-path="images/tailwind-form.png" />
</Frame>

**And that's it!** Now after filling out and submitting the form you should see the default submission success page displayed.

<Frame>
  <img src="https://mintcdn.com/formbox/27_5fcxY_YavrIb7/images/success-page.png?fit=max&auto=format&n=27_5fcxY_YavrIb7&q=85&s=edcf9974c15138f25a71dd8545dbefd9" style={{ borderRadius: "0.5rem" }} width="2034" height="1382" data-path="images/success-page.png" />
</Frame>

Comming soon...
