Business form layouts

<form data-business-form="businessForm" novalidate>
<div class="form-grid">
<label class="field">
<span>Organization</span>
<input name="organization" type="text" value="" required maxlength="100">
</label>
<label class="field">
<span>Website URL</span>
<input name="website" type="url" value="" placeholder="https://example.com">
</label>
<label class="field">
<span>Industry</span>
<select name="industry" >
<option value="Commerce">Commerce</option>
<option value="Services">Services</option>
<option value="Education">Education</option>
<option value="Technology">Technology</option>
</select>
</label>
<label class="field">
<span>Team size</span>
<select name="teamSize" >
<option value="1–5">1–5</option>
<option value="6–20">6–20</option>
<option value="21–50">21–50</option>
<option value="50+">50+</option>
</select>
</label>
</div>
<label class="checkbox-label section-copy">
<input type="checkbox" name="consent" required>I understand this form is a local demo.</label>
<p class="form-message" role="alert" hidden>
</p>
<div class="form-footer">
<button class="btn btn-secondary" type="reset">Reset demo</button>
<button class="btn btn-primary" type="submit">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m5 12 4 4L20 5"/>
</svg>Save changes</button>
</div>
</form>

<form data-business-form="billingForm" novalidate>
<div class="form-grid">
<label class="field">
<span>Company</span>
<input name="company" type="text" value="" required>
</label>
<label class="field">
<span>Street address</span>
<input name="street" type="text" value="" required>
</label>
<label class="field">
<span>City</span>
<input name="city" type="text" value="" required>
</label>
<label class="field">
<span>Postal code</span>
<input name="postal" type="text" value="" required maxlength="20">
</label>
</div>
<label class="checkbox-label section-copy">
<input type="checkbox" name="consent" required>I understand this form is a local demo.</label>
<p class="form-message" role="alert" hidden>
</p>
<div class="form-footer">
<button class="btn btn-secondary" type="reset">Reset demo</button>
<button class="btn btn-primary" type="submit">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m5 12 4 4L20 5"/>
</svg>Save changes</button>
</div>
</form>

<form data-business-form="contactForm" novalidate>
<div class="form-grid">
<label class="field">
<span>Full name</span>
<input name="name" type="text" value="" required>
</label>
<label class="field">
<span>Email address</span>
<input name="email" type="email" value="" required>
</label>
<label class="field">
<span>Phone number</span>
<input name="phone" type="tel" value="" maxlength="30">
</label>
<label class="field">
<span>Message</span>
<textarea name="message" required maxlength="2000">
</textarea>
</label>
</div>
<label class="checkbox-label section-copy">
<input type="checkbox" name="consent" required>I understand this form is a local demo.</label>
<p class="form-message" role="alert" hidden>
</p>
<div class="form-footer">
<button class="btn btn-secondary" type="reset">Reset demo</button>
<button class="btn btn-primary" type="submit">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m5 12 4 4L20 5"/>
</svg>Save changes</button>
</div>
</form>

<form data-business-form="productForm" novalidate>
<div class="form-grid">
<label class="field">
<span>Product name</span>
<input name="name" type="text" value="" required>
</label>
<label class="field">
<span>SKU</span>
<input name="sku" type="text" value="" required>
</label>
<label class="field">
<span>Price</span>
<input name="price" type="number" value="0" required min="0" step="0.01">
</label>
<label class="field">
<span>Stock</span>
<input name="stock" type="number" value="0" required min="0" step="1">
</label>
</div>
<label class="checkbox-label section-copy">
<input type="checkbox" name="consent" required>I understand this form is a local demo.</label>
<p class="form-message" role="alert" hidden>
</p>
<div class="form-footer">
<button class="btn btn-secondary" type="reset">Reset demo</button>
<button class="btn btn-primary" type="submit">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m5 12 4 4L20 5"/>
</svg>Save changes</button>
</div>
</form>

<form data-business-form="preferencesForm" novalidate>
<div class="form-grid">
<label class="field">
<span>Currency</span>
<select name="currency" >
<option value="USD">USD</option>
<option value="EUR">EUR</option>
<option value="GBP">GBP</option>
<option value="ILS">ILS</option>
</select>
</label>
<label class="field">
<span>Timezone</span>
<select name="timezone" >
<option value="Asia/Jerusalem">Asia/Jerusalem</option>
<option value="Asia/Amman">Asia/Amman</option>
<option value="Europe/London">Europe/London</option>
<option value="UTC">UTC</option>
</select>
</label>
<label class="field">
<span>Navigation layout</span>
<select name="layout" >
<option value="sidebar">Full sidebar</option>
<option value="compactSidebar">Compact sidebar</option>
<option value="topNavigation">Top navigation</option>
</select>
</label>
<label class="field">
<span>Appearance</span>
<select name="theme" >
<option value="light">Light</option>
<option value="dark">Dark</option>
<option value="system">System</option>
</select>
</label>
</div>
<label class="checkbox-label section-copy">
<input type="checkbox" name="consent" required>I understand this form is a local demo.</label>
<p class="form-message" role="alert" hidden>
</p>
<div class="form-footer">
<button class="btn btn-secondary" type="reset">Reset demo</button>
<button class="btn btn-primary" type="submit">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m5 12 4 4L20 5"/>
</svg>Save changes</button>
</div>
</form>