Mobile Sign Up with Password Strength

Mobile sign up screen with name, email and a password strength meter, live password rules checklist, terms checkbox, validation and a verify-your-email state.

Also known as: create account screen, registration form mobile, password strength meter, password requirements checklist, app sign up page

Pure CSS Mobile Login & Sign Up Responsive #form #mobile #password #signup #validation

Mobile Sign Up with Password Strength live demo

Open in new tab

Pure CSS code (HTML, CSS, JS)

Beautify

A mobile sign up screen in pure CSS and vanilla JavaScript with a live password strength meter and a requirements checklist. This create account form validates name, email, password and terms before a simulated request, then switches to a "Verify your email" state. It is an HTML mobile template for mobile websites and PWAs and can be packaged as a native app with Capacitor.

How it works

The root .msp-app is a 430 px app column with a top bar (back button, brand, Log in link) and two views: [data-msp-view="form"] and [data-msp-view="success"]. The form uses real input types and autocomplete values (name, email, new-password) and has novalidate, so the script shows its own messages.

On every keystroke in the password field, updateStrength() runs the four functions in the RULES object (length, upper and lower case, number, symbol). Each matching .msp-rule item gets .is-met, which turns its circle into a green tick, and a hidden text updates to "met" or "not met" for screen readers. The number of passed rules sets data-level (0–4) on [data-msp-meter], which colours the four segments, and the label reads Weak, Fair, Good or Strong. Short passwords stay Weak; passwords of 14 or more characters get one bonus point.

The eye button toggles the field between password and text. On submit every field is checked, invalid ones get aria-invalid="true" and a visible error, and focus moves to the first problem. A valid form shows a spinner for SUBMIT_DELAY milliseconds and then the success view with the entered email.

Customization

--msp-primary and --msp-primary-dark in style.css: button, ticks, checkbox and focus colours.
--msp-weak, --msp-fair, --msp-good and --msp-strong: the meter colour for each level.
RULES in script.js: add or change a rule, then add a matching [data-msp-rule] item to .msp-rules.
LEVELS in script.js: the strength labels shown after "Password strength".
SUBMIT_DELAY in script.js: length of the simulated request; replace the timeout with your fetch() call.
Remove the value attributes from the three inputs: the demo starts pre-filled to show a "Good" password.

Use cases

SaaS and productivity apps: the account creation step of a free trial.
Shopping and booking apps: register before checkout with clear password rules.
Community and learning platforms: sign up on a mobile website or PWA.
Internal tools packaged with Capacitor: first-run registration screen.

Accessibility

Every field has a visible label; errors are linked with aria-describedby and shown only after an attempt. The strength text is a polite live region, and each rule has hidden "met / not met" text. The eye button uses aria-pressed and an updated label. The custom checkbox keeps the native input for keyboard and screen readers, all targets are at least 44 px and focus rings are visible. Transitions are removed under prefers-reduced-motion.

Usage notes

Validation here is for the user experience only; repeat it on the server. Uses DM Sans from Google Fonts and Bootstrap Icons.

Mobile Sign Up with Password Strength at a glance

Framework: Pure CSS
Code: HTML, CSS, JavaScript
JavaScript: Vanilla JavaScript, no jQuery
Dependencies: fonts.googleapis.com, Bootstrap Icons
Layout: Mobile-first app screen, centred on wider screens
Category: Mobile Login & Sign Up
License: Free for personal and commercial use

Questions about this template

Can I use the Mobile Sign Up with Password Strength code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

Load fonts.googleapis.com and Bootstrap Icons from a CDN (the links are under Requirements). Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Can I turn this screen into an iOS or Android app?

Yes. It is plain HTML, CSS and JavaScript, so it works in a mobile website or progressive web app as it is. To ship it as a store app, put it in the web folder of a Capacitor or Cordova project and build it for iOS and Android; replace the sample data with calls to your own API.

How does it look on a desktop screen?

The screen is designed for phones. On wider screens it stays at phone width in the middle of the page, so it still looks like an app. The live demo opens at mobile width; use the Tablet and Desktop buttons to check other sizes.

Requirements

Add these to your page (already included in the download):

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">