Angular

​

What is Angular?

Angular is a development platform, built on TypeScript.

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

npm install -g @angular/cli

To get up and running quickly, we will follow the official Angular installation guide to create a new Angular project. In your terminal, run the following command:

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:

cd angular-with-formbox

Start the development server:

npm run start

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

​

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 Tailwind CSS. You can learn how to add Tailwind CSS to your project by following the Angular installation guide.

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:

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

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