Food Delivery App Phone Login

A food delivery app phone login screen built with Bootstrap 6: an HTML mobile template with a food photo header, a searchable country code picker, a phone number field, an SMS code step and a "Continue as guest" option. Use this phone number sign-in UI on mobile ordering sites and PWAs, or package it as a native app with Capacitor.

How it works

The root .fdl-app is a 430 px app column. The .fdl-hero header shows a cover photo with a dark gradient, the brand and a short delivery promise. Below it, the rounded .fdl-sheet overlaps the photo and holds three .fdl-step sections that are switched with the hidden attribute:

• phone: the Bootstrap 6 Combobox (.combobox-toggle.fdl-cc with data-bs-search="true") lists country codes. Each .menu-item carries data-min and data-max digit counts, and data-bs-name="country" adds a hidden country input for form posts. The type="tel" field uses autocomplete="tel-national".
• code: a Bootstrap 6 OtpInput (.otp[data-bs-otp]) with autocomplete="one-time-code", so phones can fill the SMS code. A 30-second timer turns into a "Resend code" button.
• done: a confirmation with a "Start ordering" button.

script.js listens to change.bs.combobox to update the ISO badge (.fdl-cc-iso), validates the number length for the chosen country, shows a spinner while it "sends" the code, and submits the code form automatically on complete.bs.otpInput. "Continue as guest" shows a Bootstrap 6 Toast.

Customization

• --fdl-orange on .fdl-app: changes the brand color of the logo, buttons and focus states; --bs-primary-bg keeps the btn-solid theme-primary buttons in sync.
• Swap the photo in .fdl-hero-img and adjust height on .fdl-hero for a taller or shorter header.
• Add countries by copying a .menu-item inside .fdl-cc-menu with its dial code, name, data-bs-value, data-min and data-max.
• Change the countdown in startTimer() (30 seconds by default).
• Replace the timeouts in the phoneForm and codeForm submit handlers with fetch() calls to your SMS and verification endpoints.
• Edit .fdl-hero-title and .fdl-hero-meta for your own tagline and delivery time.

Use cases

• Food delivery and takeaway apps: passwordless sign-in before checkout.
• Grocery and meal kit apps: phone login with a guest option for browsing.
• Restaurant ordering PWAs: quick SMS verification for repeat customers.
• Ride and courier apps: the same phone plus code pattern with your own photo.

Accessibility

Every field has a visible label or aria-label. Errors are written into the linked aria-describedby message, the field gets aria-invalid, and focus returns to the field. The Combobox supports arrow keys, Enter and Escape; after a pick, focus moves to the number field. Step headings receive focus when the step changes, and the toast uses role="status". All buttons are at least 44 px tall.

Bootstrap 6 notes

Built on Bootstrap 6.0.0-alpha.1 (alpha APIs can still change). The country picker uses the new Combobox instead of a form-select, the code field uses OtpInput, buttons use btn-solid theme-primary and btn-outline theme-secondary, and the Toast is imported from the bundle as an ES module. Photo from Unsplash; replace it with your own image.