---
title: "Angular Forms Mobile form Example | Mobiscroll"
component: "Forms"
framework: "Angular"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/angular/forms/mobile"
---

# Mobile form - Angular Forms demo

Angular Single column mobile form example with field groups. Deliver different fields types with a consistent look & feel.

- [Live demo](https://demo.mobiscroll.com/angular/forms/mobile)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/tree/main/src/demos/form-components/forms/mobile)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/forms/mobile.md), [jQuery](https://demo.mobiscroll.com/jquery/forms/mobile.md), [React](https://demo.mobiscroll.com/react/forms/mobile.md), [Vue](https://demo.mobiscroll.com/vue/forms/mobile.md)

## Description

Easily create single column layouts and render mobile forms using the various form elements like [buttons](https://demo.mobiscroll.com/angular/forms/buttons), [inputs](https://demo.mobiscroll.com/angular/forms/inputs-text-areas-date-fields), [radio buttons](https://demo.mobiscroll.com/angular/forms/radio-button) and more.

Use the [global options](https://mobiscroll.com/docs/angular/core-concepts/global-options) for setting the theme, localization options and everything that should be consistent across your app.

**Building for larger screens?** [See how to make forms for tablets & desktops →](https://demo.mobiscroll.com/angular/forms/desktop)

## What this demo shows

- Shows a clean, single-column form designed for touch-friendly data entry on mobile devices.
- **Form sections** Related fields are organized into separate User Data and Phone Number sections.
- **Text inputs** Fields collect a name, username, company, email address, and phone numbers.
- **Placeholder text** Descriptive placeholders indicate the expected value for each field.
- **Checkbox** A checkbox is paired with additional explanatory text.
- **Combined controls** Text inputs and a checkbox are presented together in one consistent mobile form.

## Best for

- **Account registration** Collecting identity, username, company, and contact details during mobile sign-up.
- **User profiles** Creating or editing personal and business contact information from a phone.
- **Customer onboarding** Gathering user and phone details in a clear, step-by-step mobile form.
- **Contact management** Adding or updating records that include email addresses and multiple phone numbers.
- **Forms with acknowledgments** Combining contact fields with a checkbox and supporting explanatory text.

## Code

### Component

```ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { MbscModule, setOptions } from '@mobiscroll/angular';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html',
  standalone: true,
  imports: [CommonModule, MbscModule],
})
export class AppComponent {}
```

### Template

```html
<mbsc-page>
  <div class="mbsc-form-group">
    <div class="mbsc-form-group-title">User Data</div>
    <mbsc-input label="First name" type="text" placeholder="First Name"></mbsc-input>
    <mbsc-input label="Last name" type="text" placeholder="Last Name"></mbsc-input>
    <mbsc-input label="User name" type="text" placeholder="User Name"></mbsc-input>
    <mbsc-input label="Company" type="text" placeholder="Company Name"></mbsc-input>
    <mbsc-input label="Email" type="text" placeholder="Email Address"></mbsc-input>
  </div>
  <div class="mbsc-form-group">
    <div class="mbsc-form-group-title">Phone Number</div>
    <mbsc-input label="Home" type="text" placeholder="Home"></mbsc-input>
    <mbsc-input label="Business" type="text" placeholder="Business"></mbsc-input>
    <mbsc-input label="Fax" type="text" placeholder="Fax"></mbsc-input>
  </div>
</mbsc-page>
```

## Implementation notes

- The single-column layout needs no grid classes - `Input`/`mbsc-input` fields are stacked directly inside an `mbsc-form-group` container and default to full width, which is what makes the layout mobile-friendly without any breakpoint-specific markup.
- Related fields are grouped into separate `mbsc-form-group` blocks, each with an `mbsc-form-group-title` (a plain `<div>`) labeling the section - e.g. "User Data" and "Phone Number" as two adjacent groups.
- `label` sets each field's title text (JS/jQuery: `data-label` attribute); `placeholder` sets the empty-state hint text shown inside the input.
- A checkbox is added with a `Checkbox`/`mbsc-checkbox`-family component; `label`/`description` (JS/jQuery: `data-label`/`data-description`) attach the acknowledgment title and explanatory text next to it, the same pattern used for other form fields.
- This is the same `Input`/grid-free layout used across the "desktop" demo's single-column variant - the "desktop" demo ([desktop demo](https://demo.mobiscroll.com/angular/forms/desktop)) adds the `.mbsc-col-*` grid classes on top of the same field set to span multiple columns on wider screens.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-angular.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config angular
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   ng serve
   ```

On a trial, add `--trial` to the config command: `mobiscroll config angular --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/angular/getting-started/installation

## Related demos

- Next: [Inline desktop form](https://demo.mobiscroll.com/angular/forms/desktop.md) - Angular single and multi-column desktop form. Render forms right on the page with a consistent look & feel.