Sign In Page: Form-First Layout

When to Use & Primary Value

When to Use: When most users are returning and speed to login is the top priority, but registration still matters.

Primary Value: Minimizes friction for returning users while continuing to drive new registrations.

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 3: Form-First + Registration CTA -->
<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-opt3').length) return;

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

      var html = `
        <div class="ti-opt3">
          <div class="ti3-wrap">
            <div class="ti3-left">
              <h2>Returning Users</h2>
              <p>Sign in to access your learning dashboard.</p>
              <div class="ti3-formslot"></div>
            </div>

            <div class="ti3-right">
              <h2>New here?</h2>
              <ul>
                <li>Access onboarding and training</li>
                <li>Track your progress</li>
                <li>Earn certificates</li>
              </ul>
              <a class="ti3-btn" href="/learn/sign_up">Create Account →</a>
            </div>
          </div>
        </div>
      `;

      $form.before(html);
      $('.ti3-formslot').append($form);
      $form.show();
    });
  }

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

Step 3: Add CSS

Paste into Custom Code:

/* Option 3: Form-First + Registration CTA */
.ti-opt3 { max-width: 1000px; margin: 50px auto; padding: 20px; }
.ti3-wrap { display: grid; grid-template-columns: 1.3fr .7fr; gap: 18px; }

.ti3-left, .ti3-right {
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 10px;
  padding: 26px;
  box-shadow: 0 2px 14px rgba(0,0,0,.06);
}

.ti3-left h2, .ti3-right h2 { margin: 0 0 8px; color:#1a1a1a; }
.ti3-left p { margin: 0 0 14px; color:#666; }

.ti3-right {
  background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
  color: #fff;
  border: none;
}
.ti3-right ul { margin: 14px 0 18px; padding-left: 18px; }
.ti3-right li { margin: 8px 0; }

.ti3-btn {
  display:inline-block;
  background:#fff;
  color:#3b1d88;
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration:none;
  font-weight:700;
}

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

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