03-theming.html

<!doctype html>
<!--
  Styling: the same lead form, styled three ways.
    1. Theme settings on the element (they override the Design tab).
    2. CSS custom properties, here on a dark section. The form's colours
       follow the text colour around it, so it suits dark backgrounds.
       --sclf-accent in your CSS overrides data-accent, theme.accent and the
       Design tab's colour.
    3. Your own rules on the form's classes. Our styles have zero
       specificity (they use :where), so your rules override them without
       !important.
  For a form with none of our styles at all, use data-styles="false" (or
  init({ styles: false })).

  Replace lfk_YOUR_KEY with your form's key.
-->
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Lead form: styling</title>
  <style>
    /* 2. Custom properties on one form. */
    #brand-form {
      --sclf-accent: #fbbf24;
      --sclf-accent-text: #111;
      --sclf-radius: 14px;
      --sclf-gap: .75rem;
      --sclf-font: Georgia, 'Times New Roman', serif;
      --sclf-input-bg: rgba(255, 255, 255, .06);
    }
    .dark { background: #111827; color: #e5e7eb; padding: 1.5rem; border-radius: 10px; }

    /* 3. Your own rules on the form's classes. */
    .site-form .sclf-label { text-transform: uppercase; letter-spacing: .05em; font-size: .75rem; }
    .site-form .sclf-input { border-width: 0 0 2px; border-radius: 0; }
    .site-form .sclf-button { width: 100%; justify-content: center; }
  </style>
</head>
<body>
  <h1>Styling</h1>
  <p>The same lead form, styled three ways. Settings on the element override the Design tab. CSS custom
    properties restyle it from your stylesheet. Your own CSS on its classes overrides our styles.</p>

  <h2>1. Theme settings on the element</h2>
  <div data-subcontext-leadform
       data-title="Get a quote"
       data-fields="first_name, email"
       data-submit-label="Go"
       data-layout="inline"
       data-radius="none"
       data-font="system"
       data-accent="#0a7f3b"
       data-heading-level="3"></div>

  <h2>2. Custom properties on a dark section</h2>
  <section class="dark">
    <div id="brand-form" data-subcontext-leadform
         data-fields="first_name, email, message"
         data-heading-level="3"></div>
  </section>

  <h2>3. Your own CSS on the form's classes</h2>
  <div class="site-form" data-subcontext-leadform data-fields="name, phone"></div>

  <!-- lfk_YOUR_KEY: your form's key (starts lfk_). Find it in Subcontext on the lead form's Install tab. -->
  <script src="https://js.subcontext.com/leadform-latest.js" data-key="lfk_YOUR_KEY" defer></script>
</body>
</html>