Embed

<section class="jnc-sms-proof">
  <div class="jnc-sms-card">

    <div class="jnc-kicker">SMS CONSENT</div>

    <h1>Text updates from Josh No Code</h1>

    <p class="jnc-intro">
      This page represents the SMS consent step shown to users during our
      multi-step migration quote request form.
    </p>

    <div class="jnc-field-group">
      <label for="jnc-proof-phone">What’s your phone number?</label>

      <input
        id="jnc-proof-phone"
        type="tel"
        placeholder="+1 (555) 123-4567"
        aria-label="Phone number"
      />
    </div>

    <label class="jnc-consent-row">
      <input type="checkbox" />

      <span>
        <strong>Text me about my migration inquiry.</strong>
        By checking this box, I agree to receive SMS from Josh No Code regarding
        my migration inquiry, consultation scheduling, project or service updates,
        information requests, and customer support.
        Msg frequency varies. Msg &amp; data rates may apply.
        Reply STOP to opt out or HELP for help.
        You may review our
        <a
          href="https://joshnocode.com/privacy-policy"
          target="_blank"
          rel="noopener noreferrer"
        >
          Privacy Policy
        </a>
        to learn how your data is used.
      </span>
    </label>

    <button type="button" class="jnc-submit-btn">
      Submit
    </button>

    <div class="jnc-note">
      SMS consent is optional. The phone number is collected as part of the
      migration inquiry process.
    </div>

  </div>
</section>

<style>
  .jnc-sms-proof {
    --brand: #E58B63;
    --brand-dark: #D97750;
    --ink: #101418;
    --muted: #4A5560;
    --border: #E2E6EB;
    --soft: #FDF8F2;

    min-height: 100vh;
    padding: 72px 24px;
    box-sizing: border-box;
    background: var(--soft);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);

    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  .jnc-sms-card {
    width: 100%;
    max-width: 760px;
    box-sizing: border-box;

    background: #fff;
    border: 1px solid rgba(229, 139, 99, 0.28);
    border-radius: 28px;
    padding: 56px;

    box-shadow:
      0 24px 70px rgba(16, 20, 24, 0.08),
      0 8px 24px rgba(16, 20, 24, 0.04);

    position: relative;
    overflow: hidden;
  }

  .jnc-sms-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 4px;
    background: var(--brand);
    border-radius: 0 0 999px 999px;
  }

  .jnc-kicker {
    color: var(--brand-dark);
    font-size: 14px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 14px;
  }

  .jnc-sms-card h1 {
    margin: 0 0 14px;
    font-size: 42px;
    line-height: 1.08;
    letter-spacing: -0.03em;
  }

  .jnc-intro {
    margin: 0 0 38px;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.55;
  }

  .jnc-field-group label {
    display: block;
    margin-bottom: 12px;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 800;
  }

  .jnc-field-group input {
    width: 100%;
    box-sizing: border-box;

    padding: 20px 22px;
    border: 2px solid var(--border);
    border-radius: 16px;

    background: #FAFBFC;
    color: var(--ink);

    font-size: 20px;
    line-height: 1.35;

    outline: none;
    transition:
      border-color 0.18s ease,
      box-shadow 0.18s ease;
  }

  .jnc-field-group input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 6px rgba(229, 139, 99, 0.16);
  }

  .jnc-field-group input::placeholder {
    color: #9AA3AF;
  }

  .jnc-consent-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin-top: 20px;

    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;

    cursor: pointer;
  }

  .jnc-consent-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    flex: 0 0 auto;
    accent-color: var(--brand);
  }

  .jnc-consent-row strong {
    color: var(--ink);
  }

  .jnc-consent-row a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .jnc-submit-btn {
    display: block;
    width: 100%;
    margin-top: 28px;
    padding: 18px 24px;

    border: 0;
    border-radius: 9999px;

    background: var(--brand);
    color: #111;

    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;

    cursor: pointer;

    box-shadow:
      0 14px 30px rgba(229, 139, 99, 0.22);

    transition:
      background-color 0.18s ease,
      transform 0.08s ease,
      box-shadow 0.18s ease;
  }

  .jnc-submit-btn:hover {
    background: var(--brand-dark);
    box-shadow:
      0 16px 34px rgba(229, 139, 99, 0.26);
  }

  .jnc-submit-btn:active {
    transform: scale(0.99);
  }

  .jnc-note {
    margin-top: 24px;
    padding: 16px 18px;

    background: var(--soft);
    border-left: 3px solid var(--brand);
    border-radius: 10px;

    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
  }

  @media (max-width: 700px) {
    .jnc-sms-proof {
      padding: 36px 18px;
    }

    .jnc-sms-card {
      padding: 38px 24px;
      border-radius: 22px;
    }

    .jnc-sms-card h1 {
      font-size: 32px;
    }

    .jnc-intro {
      font-size: 16px;
      margin-bottom: 30px;
    }

    .jnc-field-group label {
      font-size: 19px;
    }

    .jnc-field-group input {
      font-size: 18px;
      padding: 18px;
    }

    .jnc-consent-row {
      font-size: 13px;
    }

    .jnc-submit-btn {
      font-size: 17px;
      padding: 17px 20px;
    }
  }
</style>

Josh No Code

Josh No Code provides fast, automated CRM and CompanyCam data migrations for contractors. We move jobs, contacts, photos, documents, notes, activity history, and financials into CRMs like AccuLynx, JobNimbus, JobTread, Leap, BuilderPrime, and Proline, as well as into CompanyCam when needed. Our end-to-end process is accurate, secure, and built to help teams switch platforms without downtime.