Sign In Page: Three-Column Layout

When to Use & Primary Value

When to Use: When you have exactly three login paths that are equally important and should be visible at the same time, typically New Users, Returning Users, and SSO Login.

Primary Value: Creates a balanced experience where all login options are easy to scan and understand.

What You Need

• Thought Industries admin access (Manager/Admin)
• Access to:
  • Settings → Connections → Tracking Scripts
  • Site Builder → Custom Code → CSS
• Your destination URLs ready (SSO + sign-up)

Important Placeholders to Replace

In the code you’ll see placeholders like:

• [INSERT_SSO_URL] → replace with your actual SSO URL
• /learn/sign_up → replace if your sign-up path differs
• Brand text (“Your Academy”) → replace with your brand
• Brand colors (#0891B2) → replace with your brand

Hidden Elements to know about

$form.hide();

• What it hides: The native sign-in form ($('form.session__form')).
• When: It hides the native form when the page loads, allowing the custom multi-path card layout to be displayed instead.

$('.ti-opt1').hide();

• What it hides: The custom multi-path card layout (< div class="ti-opt1">).
• When: It is called within the click handler for buttons with the class .ti-showform (e.g., the "Login →" buttons for Partners and New here?), which hides the custom layout and then shows the native sign-in form ($form.show();).

Where to Paste Things

1) Header Scripts

Settings → Connections → Tracking Scripts → Header Scripts

2) Footer Scripts

Settings → Connections → Tracking Scripts → Footer Scripts

3) CSS

Site Builder → Custom Code → CSS

Steps

Step 1: Add jQuery (Header Scripts)

Paste into header scripts:

<!-- jQuery Library - Required for custom sign-in UI -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

Step 2: Add jQuery (Footer Scripts)

Paste into footer scripts:

<!-- Option 2: Three-Column Layout -->
<script>
(function() {
  'use strict';

  function init() {
    if (typeof jQuery === 'undefined') { setTimeout(init, 50); return; }

    jQuery(function($) {
      if (!window.location.pathname.includes('/sign_in')) return;
      if ($('.ti-opt2').length) return;

      var $form = $('form.session__form');
      if (!$form.length) return;

      // Build container and move native form into Column 3
      var html = `
        <div class="ti-opt2">
          <div class="ti-opt2-wrap">
            <div class="ti-opt2-col">
              <h2>New User</h2>
              <p>Create an account to access learning.</p>
              <a class="ti2-btn ti2-primary" href="/learn/sign_up">Create Account →</a>
            </div>

            <div class="ti-opt2-col">
              <h2>SSO Login</h2>
              <p>Use your company credentials.</p>
              <a class="ti2-btn ti2-accent" href="[INSERT_SSO_URL]">Continue with SSO →</a>
            </div>

            <div class="ti-opt2-col ti-opt2-formcol">
              <h2>Returning User</h2>
              <p>Sign in with your email and password.</p>
              <div class="ti-opt2-formslot"></div>
            </div>
          </div>
        </div>
      `;

      // Insert new layout before original form, then move form into slot
      $form.before(html);
      $('.ti-opt2-formslot').append($form);
      $form.show();
    });
  }

  init();
})();
</script>

Step 3: Add CSS

Paste into Custom Code:

/* Option 2: Three-Column Layout */
.ti-opt2 { max-width: 1100px; margin: 50px auto; padding: 20px; }
.ti-opt2-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.ti-opt2-col {
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 14px;
  padding: 26px;
  box-shadow: 0 2px 14px rgba(0,0,0,.06);
}

.ti-opt2-col h2 { margin: 0 0 8px; font-size: 1.35rem; color: #1a1a1a; }
.ti-opt2-col p { margin: 0 0 14px; color: #666; line-height: 1.35; }

.ti2-btn {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  transition: .2s;
}

.ti2-primary { background: #1a1a1a; color: #fff; }
.ti2-accent { background: #0891B2; color: #fff; }

@media (max-width: 900px) {
  .ti-opt2-wrap { grid-template-columns: 1fr; }
}

/* Keep native form spacing tidy inside the column */
.ti-opt2-formcol form { margin-top: 10px; }

Final Step: Save & Test

1. Make sure you saved your Tracking Scripts and CSS.
2. Open an incognito window.
3. Visit: https://[your-domain].thoughtindustries.com/learn/sign_in
4. Confirm:
   • Buttons go to the right destinations
   • Native sign-in form works
   • Mobile layout stacks correctly