Quick Answer
Mobile-responsive forms adapt to screen size for optimal usability. The problem: Desktop forms (1,000px wide) on mobile (375px) = 60% cut off, tiny 12px buttons = impossible to tap, poor column stacking = fields overlap. The solution: (1) Single-column layouts: Use col="2" on <group> (auto-stacks to 1 column on mobile). (2) Touch-friendly buttons: min-height: 48px, min-width: 120px, font-size: 16px. (3) Full-width fields: colspan="2" on inputs for full-width in single-column. (4) CSS media queries: @media (max-width: 767px) for mobile-specific styles (single column, large buttons, 16px font on inputs). (5) Touch widgets: Use widget="date" with touch picker, widget="many2one" with search, widget="many2many_tags". Statistics: 70% of Odoo users access mobile weekly, 40% mobile-only, 100% warehouse/field staff mobile. Impact: Desktop-only forms = $40k-$100k opportunity cost. Mobile-responsive = 95%+ adoption, field team loves system, productivity soars.
The Mobile Form Problem
Your D2C sales team is in the field. A customer calls: "I need to update my order status." Your salesman pulls out his phone, opens Odoo, and...
Scenario A (Bad Design)
- ✗ Form spans off the right side (can't see half the fields)
- ✗ Buttons are tiny, hard to tap
- ✗ Dropdown takes 5 swipes to reach the bottom
- ✗ Date picker doesn't work on mobile
- ✗ Takes 2 minutes to fill one form
- He gives up, calls the office
Scenario B (Good Design)
- ✓ Full-width single column on mobile
- ✓ Large, easy-to-tap buttons
- ✓ Touch-optimized date/time pickers
- ✓ Form fills in 20 seconds
- ✓ Salesman updates order in 30 seconds
- Customer is impressed
The difference: $15,000/year in lost productivity vs. happy, efficient team.
We've implemented 150+ Odoo systems. The ones where developers design mobile-first? Field teams love the system, adoption is 95%+, productivity soars. The ones with desktop-only forms? Teams find workarounds, adopt competitor systems, lose $40,000-$100,000 in opportunity cost.
Mobile Usage Statistics
| User Type | Mobile Usage | Impact |
|---|---|---|
| All Odoo users | 70% access mobile weekly | Must support mobile |
| Mobile-only users | 40% no desktop | Mobile is only option |
| Warehouse/field staff | 100% mobile | Critical for operations |
| Office staff | 60% mobile | Flexibility needed |
Mobile Form Problems
Desktop forms: 1,000px wide (mobile: 375px - 60% cut off)
Tiny buttons: 12px (need 44px for reliable tapping)
Poor column stacking: Fields overlap on small screens
Unresponsive widgets: Date picker doesn't work touch
Slow loading: Heavy computations timeout on 4G
Part 1: Responsive Form Layout
Basic Responsive Structure
<!-- views/sale_order_form.xml -->
<record id="view_order_form" model="ir.ui.view">
<field name="name">Sale Order Form - Mobile Responsive</field>
<field name="model">sale.order</field>
<field name="arch" type="xml">
<form>
<!-- HEADER: Always visible, stacks on mobile -->
<header>
<button name="action_confirm" type="object"
string="Confirm" class="btn-primary oe_highlight"
style="min-width: 120px; min-height: 48px; font-size: 16px;"/>
<button name="action_cancel" type="object"
string="Cancel"
style="min-width: 120px; min-height: 48px; font-size: 16px;"/>
</header>
<!-- SHEET: Main content area -->
<sheet>
<!-- TITLE: Responsive -->
<div class="oe_title">
<h1>
<field name="name" placeholder="Order #"/>
</h1>
</div>
<!-- CUSTOMER GROUP: Single column on mobile, 2 on desktop -->
<group string="Customer Information" col="2">
<!-- On mobile (<576px): 1 column
On tablet (576px+): 2 columns
On desktop (992px+): 2 columns
-->
<field name="partner_id" colspan="2"
widget="many2one"
placeholder="Select customer..."
options="{'no_create': True}"/>
<field name="email" colspan="2"
widget="email"
placeholder="customer@example.com"/>
<field name="phone" colspan="1"
widget="phone"/>
<field name="mobile" colspan="1"
widget="phone"/>
</group>
<!-- ORDER DETAILS: Stack on mobile -->
<group string="Order Details" col="2">
<field name="order_date" colspan="1"/>
<field name="delivery_date" colspan="1"/>
<field name="amount_total" colspan="2"/>
</group>
</sheet>
</form>
</field>
</record>Key Responsive Attributes
| Attribute | Purpose | Example |
|---|---|---|
| col="2" | 2 columns on desktop, auto-stacks to 1 on mobile | <group col="2"> |
| colspan="2" | Field spans full width (2 columns) | <field colspan="2"/> |
| colspan="1" | Field takes half width (1 column) | <field colspan="1"/> |
| class="oe_title" | Responsive title section | <div class="oe_title"> |
Part 2: Mobile-Optimized Widgets
Touch-Friendly Button Sizes
WRONG (Tiny Buttons)
<!-- WRONG: Tiny buttons (impossible to tap) -->
<button string="OK" class="btn btn-sm"/> <!-- 8x24px -->RIGHT (Touch-Friendly)
<!-- RIGHT: Touch-friendly buttons (44x44px minimum) -->
<button name="action_confirm" type="object"
string="Confirm"
class="btn btn-primary oe_highlight"
style="min-width: 120px; min-height: 48px; font-size: 16px;"/>Mobile-Optimized Date Picker
<!-- With mobile-friendly date picker -->
<field name="order_date"
widget="date"
options="{'datepicker': {'useVirtualKeyboard': False}}"
placeholder="Select date"/>
<!-- Time picker -->
<field name="delivery_time"
widget="float_time"
placeholder="HH:MM"/>
<!-- Currency field (Monetary) -->
<field name="amount_total"
widget="monetary"
options="{'currency_field': 'currency_id'}"/>Mobile-Friendly Selection Dropdown
<!-- Single selection (dropdown) -->
<field name="state"
widget="selection"
options="{'no_create': True}"/>
<!-- Many2one (searchable dropdown) -->
<field name="partner_id"
widget="many2one"
options="{'no_create': True, 'highlight_first_line': True}"
placeholder="Search customer..."/>
<!-- Many2many tags -->
<field name="tag_ids"
widget="many2many_tags"
placeholder="Add tags..."/>Part 3: CSS Media Queries
Advanced responsiveness with CSS media queries for precise control at different breakpoints.
<!-- In your form view or separate CSS file -->
<style>
/* Desktop (large screens) */
@media (min-width: 1200px) {
.oe_form_group {
columns: 2; /* 2-column layout */
}
}
/* Tablet (medium screens) */
@media (min-width: 768px) and (max-width: 1199px) {
.oe_form_group {
columns: 1.5; /* Between 1-2 columns */
}
}
/* Mobile (small screens) */
@media (max-width: 767px) {
.oe_form_group {
columns: 1; /* Single column */
}
/* Large touch targets on mobile */
button {
min-height: 48px;
min-width: 100px;
font-size: 16px;
padding: 12px;
}
/* Full-width inputs on mobile */
input, select, textarea {
width: 100% !important;
font-size: 16px; /* Prevents zoom on iOS */
padding: 12px;
}
/* Better spacing on mobile */
.oe_form_group {
margin-bottom: 24px;
}
}
</style>Real D2C Example: Complete Mobile-Responsive Order Form
<!-- Complete responsive form -->
<record id="view_order_mobile_form" model="ir.ui.view">
<field name="name">Sale Order - Mobile Responsive</field>
<field name="model">sale.order</field>
<field name="arch" type="xml">
<form>
<style>
/* Mobile responsive styles */
@media (max-width: 767px) {
button {
min-height: 48px;
min-width: 100px;
font-size: 16px;
display: block;
width: 100%;
margin: 8px 0;
}
input, select, textarea, .o_field_widget {
font-size: 16px !important;
}
.oe_form_group {
margin-bottom: 24px;
}
.oe_title h1 {
font-size: 24px;
}
}
@media (min-width: 768px) {
button {
min-height: 40px;
min-width: 100px;
margin: 4px;
}
}
</style>
<header>
<button name="action_confirm" type="object"
string="✓ Confirm Order" class="btn-primary oe_highlight"/>
<button name="action_cancel" type="object"
string="✗ Cancel"/>
</header>
<sheet>
<div class="oe_title">
<h1><field name="name"/></h1>
</div>
<!-- CUSTOMER: Full-width on mobile -->
<group string="Customer" col="2">
<field name="partner_id" colspan="2"
placeholder="Search customer..."/>
<field name="email" colspan="2"/>
<field name="phone" colspan="1"/>
<field name="mobile" colspan="1"/>
</group>
<!-- ORDER DETAILS -->
<group string="Order Details" col="2">
<field name="order_date" colspan="1" widget="date"/>
<field name="delivery_date" colspan="1" widget="date"/>
<field name="amount_total" colspan="2" widget="monetary"/>
</group>
<!-- ORDER LINES: Full-width table -->
<notebook>
<page string="Order Lines">
<field name="order_line">
<tree editable="bottom">
<field name="product_id"/>
<field name="product_qty"/>
<field name="price_unit"/>
<field name="price_subtotal"/>
</tree>
</field>
</page>
</notebook>
</sheet>
</form>
</field>
</record>Mobile Best Practices Checklist
Layout
❏ Single-column layouts on mobile (max 375px width)
❏ 2-column layouts on tablet (768px+)
❏ 2-3 column layouts on desktop (1200px+)
❏ Use colspan to control width on each breakpoint
❏ Stack all full-width elements on mobile
Touch Targets
❏ Minimum 44x44px for buttons (iOS) / 48x48px (Android)
❏ Minimum 12px padding inside buttons
❏ Large font: 16px minimum (prevents iOS zoom)
❏ Adequate spacing: 16px between interactive elements
Inputs
❏ Full-width inputs on mobile
❏ Touch-friendly pickers (no keyboard required)
❏ Clear placeholder text
❏ Show input types (email, phone, date, number)
❏ Disable autocapitalize on normal text fields
Performance
❏ Minimize server calls on mobile (slower network)
❏ Use onchange sparingly (expensive computations)
❏ Cache data when possible
❏ Lazy-load images/lists
❏ Test on 4G networks
Action Items: Build Mobile-First Forms
Design for Mobile First
❏ Plan layout for 375px width (iPhone SE)
❏ Ensure single-column works (stacked fields)
❏ Scale up to tablet (768px) with 2 columns
❏ Expand to desktop (1200px+) if needed
Implement Responsive Forms
❏ Use colspan="2" for full-width on single-column rows
❏ Use col="2" on groups (auto-stacks on mobile)
❏ Set button min-height to 48px
❏ Set input font-size to 16px minimum
❏ Test on real devices (not just browser zoom)
Optimize for Touch
❏ Large buttons (not tiny links)
❏ Touch-friendly date/time pickers
❏ Searchable dropdowns (not multi-level menus)
❏ Swipe-friendly scrolling (not horizontal scroll)
Frequently Asked Questions
How do I make Odoo forms responsive on mobile devices?
Use col="2" on <group> elements—this creates 2 columns on desktop and automatically stacks to 1 column on mobile (breakpoint <576px). For individual fields, use colspan="2" for full-width or colspan="1" for half-width. Add CSS media queries with @media (max-width: 767px) for mobile-specific styles: single-column layout, 48px button height, 16px font on inputs. Key attributes: class="oe_title" for responsive title section, widget="date" for touch-friendly date picker, widget="many2one" with options="{'no_create': True}" for searchable dropdown. Test on real devices (iPhone 375px width, Android 360px) not just browser zoom.
What are the minimum button sizes for mobile-friendly Odoo forms?
iOS standard: 44x44px minimum. Android standard: 48x48px minimum. Recommend min-height: 48px and min-width: 120px for buttons with font-size: 16px. Add padding: 12px inside buttons for comfortable tapping. Implementation: <button style="min-width: 120px; min-height: 48px; font-size: 16px;"/>. Common mistake: Using btn-sm class = 8x24px buttons = impossible to tap on mobile. Spacing: Minimum 16px between interactive elements to prevent accidental taps. For mobile-specific styles, use @media (max-width: 767px) to make buttons full-width (width: 100%) and block-level (display: block).
Why does my Odoo form zoom in on iOS when users tap input fields?
iOS automatically zooms when input font-size is less than 16px. Solution: Set font-size: 16px (or larger) on all input, select, and textarea elements. Implementation: Add CSS media query: @media (max-width: 767px) { input, select, textarea, .o_field_widget { font-size: 16px !important; } }. This prevents the zoom behavior. Additional fix: Set viewport meta tag in your template: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">. Best practice: Use 16px minimum across all mobile inputs—improves readability and prevents zoom disruption.
How do I test Odoo mobile forms on real devices?
Never rely on browser zoom alone. Testing methods: (1) Physical devices: Test on actual iPhone (375px width) and Android (360px width) phones. (2) Chrome DevTools: Open DevTools (F12), click device toolbar icon, select iPhone SE or Pixel 5, refresh page. (3) Safari Responsive Design Mode: Develop → Enter Responsive Design Mode, choose iOS device. (4) Test checklist: Tap button sizes (44-48px minimum), input zoom behavior (16px font prevents zoom), column stacking (single column on mobile), touch picker functionality (date/time widgets), scroll behavior (no horizontal scroll), form submission workflow. Test on 4G network (not just WiFi) to catch performance issues. Use real user scenarios (field sales updating order, warehouse scanning inventory).
Free Mobile Design Audit
Stop building desktop-only forms. We'll review your current forms for mobile usability, identify mobile-breaking issues, design responsive layouts, implement touch-friendly interactions, test on real devices, and train your team on mobile-first design. Most D2C brands have field teams struggling with mobile forms. Fixing it improves productivity $20,000-$50,000/year. Building mobile-first from the start costs nothing extra.