Embed

<div class="jnc-estimator jnc-appear" role="region" aria-label="Data Migration Cost Estimator">
  <style>
    .jnc-estimator{
      --brand-terracotta:#C86F4D; --brand-terracotta-hover:#B96344;
      --ink:#101418; --ink-sub:#4A5560;
      --card-bg:#fff; --card-border:#EBEDF0;
      --card-shadow:0 18px 48px rgba(16,20,24,.10), 0 4px 12px rgba(16,20,24,.06);
      font-family: Inter, system-ui, sans-serif; color: var(--ink);
      max-width: 780px; margin: 0 auto; background: var(--card-bg);
      border:1px solid var(--card-border); border-radius:24px;
      padding:36px 40px 32px; box-shadow: var(--card-shadow);
      position:relative; overflow:hidden;
    }
    .jnc-estimator h3{ margin:0 0 12px; font-size:30px; line-height:1.15; letter-spacing:-.015em; }
    .jnc-sub{ display:none; }

    .jnc-instructions{ margin:10px 0 14px; background:#FFF9EE; border-left:4px solid var(--brand-terracotta);
      padding:10px 16px; border-radius:6px; font-size:15px; line-height:1.5; color:var(--ink-sub);}

    .jnc-row{ display:grid; gap:8px; margin:16px 0 8px; }
    .jnc-row label{ font-weight:650; font-size:16px; }

    .jnc-input{ width:100%; padding:14px 16px; border:1px solid #D6DBE0; border-radius:12px; font-size:17px;
      background:#fff; outline:none; transition:border-color .2s, box-shadow .2s; }
    .jnc-input:focus{ border-color:var(--brand-terracotta);
      box-shadow:0 0 0 4px color-mix(in srgb, var(--brand-terracotta) 25%, transparent); }
    .jnc-input.jnc-error{ border-color:#d64545 !important; box-shadow:0 0 0 4px rgba(214,69,69,.2); }
    .jnc-input::-webkit-outer-spin-button,.jnc-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
    .jnc-input[type=number]{ -moz-appearance:textfield; }

    .jnc-error-msg{ color:#d64545; font-size:14px; display:none; }

    /* Unified button design */
    .jnc-btn, .jnc-lead button{
      width:100%; margin-top:18px; border:0; border-radius:9999px; padding:18px 24px;
      font-weight:700; font-size:18px; cursor:pointer; background:var(--brand-terracotta); color:#111;
      box-shadow:0 12px 26px rgba(200,111,77,.28); transition:transform .06s, box-shadow .2s, background .15s;
    }
    .jnc-btn:hover, .jnc-lead button:hover{ background:var(--brand-terracotta-hover); box-shadow:0 16px 32px rgba(200,111,77,.35); }
    .jnc-btn:active, .jnc-lead button:active{ transform:translateY(1px); }

    .jnc-lead{ margin-top:24px; padding-top:18px; border-top:1px solid #eee; display:none; }
    .jnc-lead.is-visible{ display:block; }
    .jnc-lead label{ font-weight:600; font-size:15px; display:block; margin:8px 0 4px; color:var(--ink-sub); }
    .jnc-lead input{ width:100%; padding:12px 14px; border:1px solid #D6DBE0; border-radius:10px; font-size:16px; margin-bottom:8px; }

    .jnc-success{ margin-top:10px; color:#0D8545; font-weight:600; font-size:15px; display:none; }

    @keyframes jnc-pop{ from{transform:translateY(8px);opacity:0;} to{transform:translateY(0);opacity:1;} }
    .jnc-appear{ animation: jnc-pop .45s ease both; }

    @media (max-width:600px){
      .jnc-estimator{ padding:28px 22px; border-radius:18px; }
      .jnc-estimator h3{ font-size:26px; }
    }
  </style>

  <h3>Data Migration Project Cost Estimator</h3>

  <div class="jnc-instructions">
    Enter the number of job records that you are looking to transfer to your new CRM.
  </div>

  <div class="jnc-row">
    <label for="jnc-jobs">Number of Jobs</label>
    <input class="jnc-input" id="jnc-jobs" type="number" min="0" step="1" placeholder="e.g., 500">
    <div class="jnc-error-msg" id="jnc-error">Enter number of jobs</div>
  </div>

  <button class="jnc-btn" id="jnc-continue" type="button">Continue</button>

  <div class="jnc-lead" id="jnc-lead">
    <label for="crm">What CRM are you migrating from?</label>
    <input type="text" id="crm" class="jnc-input" placeholder="e.g., AccuLynx, JobNimbus, MarketSharp...">

    <label for="migrateTo">What CRM are you migrating to?</label>
    <input type="text" id="migrateTo" class="jnc-input" placeholder="e.g., JobTread, Buildertrend, Salesforce...">

    <label for="name">What's your name?</label>
    <input type="text" id="name" class="jnc-input" placeholder="Enter your name">

    <label for="email">Enter your email</label>
    <input type="email" id="email" class="jnc-input" placeholder="you@company.com">

    <label for="phone">Enter your phone</label>
    <input type="tel" id="phone" class="jnc-input" placeholder="e.g., +1 (555) 123-4567">

    <button type="button" id="sendQuote">Send My Quote</button>
    <div class="jnc-success" id="jnc-success">✅ Quote sent! Check your email.</div>
  </div>
</div>

<script>
(function(){
  const root = document.currentScript.previousElementSibling;
  if(!root) return;

  const jobsInput  = root.querySelector('#jnc-jobs');
  const contBtn    = root.querySelector('#jnc-continue');
  const errorMsg   = root.querySelector('#jnc-error');
  const leadForm   = root.querySelector('#jnc-lead');
  const sendBtn    = root.querySelector('#sendQuote');
  const successMsg = root.querySelector('#jnc-success');
  const crmInput   = root.querySelector('#crm');
  const migrateToInput = root.querySelector('#migrateTo');
  const nameInput  = root.querySelector('#name');
  const emailInput = root.querySelector('#email');
  const phoneInput = root.querySelector('#phone');

  const INSTALL = 2000, RATE = 0.40, MAX = 10000;
  const WEBHOOK_URL = "https://hook.us1.make.com/wxz7t3bhgkys6071ofypux67ch8wzc3c";

  let currentJobs = 0;

  function show(el){ el.classList.add('is-visible'); }
  function hide(el){ el.classList.remove('is-visible'); }
  function isValidEmail(v){ return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v); }
  function isValidPhone(v){
    const digits = (v || '').replace(/\D/g,'');
    return digits.length >= 7; // minimal sanity check
  }

  contBtn.addEventListener('click', ()=>{
    const raw = (jobsInput.value || '').trim();
    if(raw === '' || isNaN(raw)){
      jobsInput.classList.add('jnc-error');
      errorMsg.style.display = 'block';
      hide(leadForm);
      return;
    }
    jobsInput.classList.remove('jnc-error');
    errorMsg.style.display = 'none';
    currentJobs = Math.max(0, parseInt(raw,10) || 0);
    show(leadForm);
    nameInput.focus();
  });

  function postToWebhook(payload){
    return new Promise((resolve)=>{
      const frameName = "jnc-make-" + Math.random().toString(36).slice(2);
      const iframe = document.createElement("iframe");
      iframe.name = frameName; iframe.style.display="none";
      document.body.appendChild(iframe);

      const form = document.createElement("form");
      form.action = WEBHOOK_URL; form.method = "POST"; form.target = frameName; form.style.display="none";
      Object.entries(payload).forEach(([k,v])=>{
        const inp = document.createElement("input");
        inp.type="hidden"; inp.name=k; inp.value=String(v);
        form.appendChild(inp);
      });
      document.body.appendChild(form);

      const cleanup = ()=>{ try{ form.remove(); iframe.remove(); }catch(e){} };
      iframe.addEventListener("load", ()=>{ cleanup(); resolve(true); });
      setTimeout(()=>{ cleanup(); resolve(true); }, 800);
      form.submit();
    });
  }

  sendBtn.addEventListener('click', async ()=>{
    const name         = nameInput.value.trim();
    const email        = emailInput.value.trim();
    const phone        = phoneInput.value.trim();
    const migrate_from = crmInput.value.trim();
    const migrate_to   = migrateToInput.value.trim();

    successMsg.style.display = "none";

    if(!name){ return showError("Please enter your name.", nameInput); }
    if(!migrate_from){ return showError("Please enter the CRM you are migrating from.", crmInput); }
    if(!migrate_to){ return showError("Please enter the CRM you are migrating to.", migrateToInput); }
    if(!isValidEmail(email)){ return showError("Not a valid email.", emailInput); }
    if(!isValidPhone(phone)){ return showError("Not a valid phone number.", phoneInput); }

    let variable = currentJobs * RATE;
    let total = INSTALL + variable;
    if(total > MAX){ total = MAX; }

    sendBtn.disabled = true; sendBtn.textContent = "Sending…";

    const ok = await postToWebhook({
      name, email, phone,
      migrate_from, migrate_to,
      job_count: currentJobs,
      estimated_total: total
    });

    if(ok){
      successMsg.textContent = "✅ Quote sent! Check your email.";
      successMsg.style.display = "block"; successMsg.style.color = "#0D8545";
      sendBtn.textContent = "Sent!";
    }else{
      showError("Something went wrong, please try again.");
      sendBtn.disabled = false; sendBtn.textContent = "Send My Quote";
    }
  });

  function showError(msg, focusEl){
    successMsg.textContent = "⚠️ " + msg;
    successMsg.style.display = "block";
    successMsg.style.color = "#d64545";
    if(focusEl) focusEl.focus();
  }
})();
</script>

Josh No Code

Josh No Code is a modern-day guild of automation craftsmen. We blend human insight with technological precision to design systems that simplify, empower, and endure — not just for efficiency’s sake, but to elevate how teams work and think. As certified experts in Zapier, Make.com, and Airtable, we build custom automations and perform high-volume CRM data migrations for platforms like Acculynx and HubSpot. Whether you're routing leads, syncing records, onboarding clients, or migrating legacy data, we craft solutions that are thoughtful, reliable, and built to last. Designed for humans, powered by precision — our work feels like tools made just for you, because they are.