Example file

03-theming.html

Matching your website with theme, displayFont, a labelled stepper (steps), showHeader and reworded buttons (strings).

Download Quote form

To try this page, download it, replace the placeholders and put it on a test page of your website. Opening the file from your computer won't work, because the embeds check the website address they're on.

03-theming.html · HTML Download 
<!doctype html>
<!--
  Matching the quote form to your website: brand colours and fonts through the
  shared theme object, a display font for the big headings, a labelled stepper
  instead of the product heading, and reworded buttons through strings.
  The form doesn't load fonts itself, so load them on your page as usual.

  Replace qfk_YOUR_KEY, YOUR_PRODUCT_SLUG and YOUR_JOURNEY_SLUG with your own
  values, and the colours, fonts and wording with your own.
-->
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Quote form: theming and copy</title>
  <!-- Your website's fonts. The quote form uses whatever fonts the page has loaded. -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Figtree:wght@400;600;700&family=Fraunces:wght@600&display=swap">
</head>
<body>
  <h1>Theming and copy</h1>

  <div id="quote"></div>

  <script src="https://js.subcontext.com/quoteform-latest.js"></script>
  <script>
    Subcontext.Quote.init({
      container: '#quote',
      // The quote form's key (starts qfk_) is the data-key in "The code to paste" on the
      // quote form's page in the dashboard (CRM, Campaigns, open the campaign, Lead capture tab).
      key: 'qfk_YOUR_KEY',
      // The product and journey are the data-product and data-journey in the same code.
      productSlug: 'YOUR_PRODUCT_SLUG',
      journeySlug: 'YOUR_JOURNEY_SLUG',

      // Buttons, focus rings, sliders and progress use primaryColor; hovers and the
      // quote price use accentColor. backgroundColor colours the form's card, and
      // mode: 'dark' gives light text on a dark card. fontSize is used by the other
      // Subcontext embeds and ignored here.
      theme: {
        primaryColor: '#0f766e',
        accentColor: '#115e59',
        backgroundColor: '#fbfdfc',
        fontFamily: 'Figtree, system-ui, sans-serif'
      },
      // The big headings (question headlines, the price). Body text keeps fontFamily.
      displayFont: 'Fraunces, Georgia, serif',

      // No product name heading; a three-step stepper instead. Its first step is the
      // cover page, the second the pages before the quote, the third the quote onwards.
      showHeader: false,
      steps: ['Your cover', 'About you', 'Your price'],

      // Copy overrides, group by group. Only the keys you give change. Where the
      // default is built from values (stepOf), a string template works: {0}, {1}...
      strings: {
        nav: { submit: 'Show me my price', stepOf: 'Page {0} of {1}' },
        quote: { buyCta: 'Take out this policy' },
        common: { restart: 'Start over' }
      }
    })
  </script>
</body>
</html>

Stuck, or something missing?

Get in touch and a person on the team will help.

Contact us