Skip to main content

How to style your Concierge Form

The Concierge Form embed supports custom branding through CSS custom properties (CSS variables). You can control colours, corner radius, and shadows by setting these variables on the concierge-form element in your website's stylesheet.

Quick start​

Add the following to your page's <style> block and adjust the values to match your brand:

concierge-form {
  --concierge-primary: #E63946;
  --concierge-bg: #F8F9FA;
  --concierge-radius: 8px;
  --concierge-radius-input: 4px;
}

Available variables​

  • --concierge-primary — Default: #1877F2. Submit button and form heading colour
  • --concierge-text — Default: #1C252E. Body and label text
  • --concierge-muted — Default: #637381. Description and placeholder text
  • --concierge-border — Default: rgba(145,158,171,0.32). Input border colour
  • --concierge-border-strong — Default: rgba(145,158,171,0.5). Input border colour on hover
  • --concierge-bg — Default: #FFFFFF. Card and input background
  • --concierge-radius — Default: 16px. Card corner radius
  • --concierge-radius-input — Default: 8px. Input and button corner radius
  • --concierge-shadow — Default: Blue drop shadow. Card shadow
  • --concierge-heading-font-size — Default: 1.125rem. Title font size
  • --concierge-description-font-size — Default: 0.875rem. Description font size
  • --concierge-label-font-size — Default: 0.875rem. Field label font size

Related Articles