> ## 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.

# Angular

> Learn how to integrate your Formbox form with <a href="https://angular.io" target="_blank" rel="noopener noreferrer">Angular</a>.

## What is Angular?

Angular is a development platform, built on <a href="https://www.typescriptlang.org" target="_blank" rel="noopener noreferrer">TypeScript</a>.

As a platform, Angular includes:

* A component-based framework for building scalable web applications
* A collection of well-integrated libraries that cover a wide variety of features, including routing, forms management, client-server communication, and more
* A suite of developer tools to help you develop, build, test, and update your code

With Angular, you're taking advantage of a platform that can scale from single-developer projects to enterprise-level applications.

## 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 Angular project

If you don't have the Angular CLI installed, you can install it by running the following command:

```bash theme={null}
npm install -g @angular/cli
```

To get up and running quickly, we will follow the official Angular <a href="https://angular.io/guide/setup-local#install-the-angular-cli" target="_blank" rel="noopener noreferrer">installation</a> guide to create a new Angular project. In your terminal, run the following command:

```bash theme={null}
ng new angular-with-formbox
```

After the prompts, the Angular CLI 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 angular-with-formbox
```

Start the development server:

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

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

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

## Adding your Formbox form to your Angular project

Now that we have a new Angular 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 Angular <a href="https://tailwindcss.com/docs/guides/angular" target="_blank" rel="noopener noreferrer">installation guide</a>.

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

Open up the `app.component.html` file within the root of the `src/app` directory and replace everything in the file with the following code block:

```html app.component.html 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>

<router-outlet />
```

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:4200` 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>
