---
title: "Javascript Forms Responsive form Example | Mobiscroll"
component: "Forms"
framework: "JavaScript"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/javascript/forms/responsive"
---

# Responsive form - JavaScript Forms demo

Responsive Javascript form using grid layout. Define how the form elements behaves across multiple screen sizes. Plain JavaScript API.

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

## Description

Build in responsiveness into your javascript form using the grid layout. Define how the form elements behave across multiple screen sizes.

- The column widths will adapt to the screen size based on the predefined **.mbsc-col-{breakpoint}-{size}** classes.
- The examples are using the **.mbsc-col-md-6**, **.mbsc-col-lg-6** and **.mbsc-col-lg-3** classes.

## What this demo shows

- Shows a sesponsive form grid which adapts the form layout to different viewport widths.
- **Breakpoint behavior** Changes fields from a single-column layout to multiple columns as more horizontal space becomes available.
- **Column spans** Uses different column widths to control how much horizontal space each field occupies at each breakpoint.
- **Screen sizes** Uses the same form configuration to create layouts suited to mobile, tablet, and desktop screens.
- **Form controls** Includes text and password inputs with a Create account button.
- **Grid classes** Uses Mobiscroll grid classes to build one responsive form instead of maintaining separate layouts for each screen size.

## Best for

- **Account registration** Arrange sign-up fields clearly across phones, tablets, and desktop screens.
- **Checkout forms** Reflow customer, shipping, and payment fields as the available width changes.
- **Profile and settings forms** Present related fields in columns on wider screens while keeping them readable on smaller devices.
- **Contact and application forms** Support forms that need to work across a range of devices without separate layouts.

## Tutorial

```html
<div class="mbsc-row">
    <div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
        <label>
            <input mbsc-input data-label="Email" data-input-style="box" data-label-style="floating" placeholder="Enter your email address" />
        </label>
    </div>
    <div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
        <label>
            <input mbsc-input data-label="Password" data-input-style="box" data-label-style="floating" type="password" placeholder="Set a password" data-password-toggle="true" />
        </label>
    </div>
    <div class="mbsc-col-12 mbsc-col-lg-6">
        <label>
            <input mbsc-input data-label="Address" data-input-style="box" data-label-style="floating" placeholder="What is your address?" />
        </label>
    </div>
</div>
<div class="mbsc-row">
    <div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
        <label>
            <input mbsc-input data-label="Town" data-input-style="box" data-label-style="floating" placeholder="Enter your town" />
        </label>
    </div>
    <div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
        <label>
            <input mbsc-input data-label="State" data-input-style="box" data-label-style="floating" placeholder="Select your state" />
        </label>
    </div>
    <div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
        <label>
            <input mbsc-input data-label="Zip" data-input-style="box" data-label-style="floating" placeholder="What is your zip code" />
        </label>
    </div>
    <div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
        <label>
            <input mbsc-input data-label="Country" data-input-style="box" data-label-style="floating" placeholder="Select your country" />
        </label>
    </div>
</div>
<div class="mbsc-row">
    <div class="mbsc-col-12 mbsc-col-md-12 mbsc-col-lg-3">
        <div class="mbsc-button-group-block">
            <button mbsc-button data-color="success">
                Create account
            </button>
        </div>
    </div>
</div>
```

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});
```

### HTML

```html
<div class="mbsc-grid mbsc-form-grid">
    <div class="mbsc-row">
        <div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
            <label>
                <input mbsc-input data-label="Email" data-input-style="box" data-label-style="floating" type="text" placeholder="Enter your email address" />
            </label>
        </div>
        <div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
            <label>
                <input mbsc-input data-label="Password" data-input-style="box" data-label-style="floating" type="password" placeholder="Set a password" data-password-toggle="true" />
            </label>
        </div>
        <div class="mbsc-col-12 mbsc-col-lg-6">
            <label>
                <input mbsc-input data-label="Address" data-input-style="box" data-label-style="floating" placeholder="What is your address?" />
            </label>
        </div>
    </div>
    <div class="mbsc-row">
        <div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
            <label>
                <input mbsc-input data-label="Town" data-input-style="box" data-label-style="floating" type="text" placeholder="Enter your town" />
            </label>
        </div>
        <div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
            <label>
                <input mbsc-input data-label="State" data-input-style="box" data-label-style="floating" type="text" placeholder="Select your state" />
            </label>
        </div>
        <div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
            <label>
                <input mbsc-input data-label="Zip" data-input-style="box" data-label-style="floating" type="text" placeholder="What is your zip code" />
            </label>
        </div>
        <div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
            <label>
                <input mbsc-input data-label="Country" data-input-style="box" data-label-style="floating" type="text" placeholder="Select your country" />
            </label>
        </div>
    </div>
    <div class="mbsc-row">
        <div class="mbsc-col-12 mbsc-col-md-16 mbsc-col-lg-3">
            <div class="mbsc-button-group-block">
                <button mbsc-button data-color="success">Create account</button>
            </div>
        </div>
    </div>
</div>
```

### CSS

```css
.mbsc-ios .mbsc-form-grid .mbsc-textfield-wrapper {
    margin: 0.75em 1em;
}
```

## Implementation notes

- The layout uses Mobiscroll's grid CSS classes, not a component option: a `.mbsc-grid`/`.mbsc-form-grid` wrapper contains one or more `.mbsc-row` elements, each holding column `<div>`s.
- Column width per breakpoint is set with `.mbsc-col-{breakpoint}-{size}` classes (size out of 12), stacked per element: e.g. `mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3` renders full width below the `md` breakpoint, half width at `md`, and quarter width at `lg` and above.
- A field with no breakpoint-specific class keeps its base `mbsc-col-12` width (full row) at every viewport size until a narrower class overrides it, e.g. `mbsc-col-12 mbsc-col-lg-6` stays full width until `lg`.
- The same markup/component tree is reused across breakpoints - only the grid classes change; there is no separate mobile vs. desktop form definition.
- `inputStyle="box"` and `labelStyle="floating"` are applied to each `Input`/`mbsc-input` field for the boxed-input-with-floating-label appearance used throughout the grid (JS/jQuery: `data-input-style="box"` / `data-label-style="floating"` attributes).
- `passwordToggle` (JS/jQuery: `data-password-toggle="true"`) adds a show/hide toggle to a `type="password"` input.
- Framework markup differences: JS/jQuery wraps plain `<input mbsc-input>` elements in `<label>`s inside `<div class="mbsc-col-...">` wrappers; React uses `<Input .../>` inside `<div className="mbsc-col-...">`; Angular uses `<mbsc-input ...></mbsc-input>` inside `<div class="mbsc-col-...">`, with boolean options like `[passwordToggle]="true"` bound; Vue uses `<MbscInput .../>` inside `<div class="mbsc-col-...">`, with boolean options like `:passwordToggle="true"`.
- A `Button`/`<button mbsc-button>` with `color="success"` (JS/jQuery: `data-color="success"`) submits the form; it sits in its own row/column span like any other grid item.

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

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

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

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

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

## Related demos

- Previous: [Inline desktop form](https://demo.mobiscroll.com/javascript/forms/desktop.md) - Javascript single and multi-column desktop form. Render forms right on the page with a consistent look & feel.
- Next: [Inside a modal](https://demo.mobiscroll.com/javascript/forms/popup.md) - Javascript embedded forms in modal or pop-over. Perfect layout for contextual add/edit forms.