Request a Quote

{%- comment -%}
  JAKs Diesel — "Request a Quote" page content (with conversion on submit)
  WHERE:
   1) Online Store > Pages > Add page. Title: "Request a Quote"
      (this gives it the URL /pages/request-a-quote).
   2) In the page editor, click "< >" (Show HTML) and paste this snippet,
      OR add a "Custom Liquid" section to the page template and paste it.
  The CONVERSION (generate_lead, lead_source: quote_form) fires automatically
  when the form is submitted successfully. Submissions email jaksdiesel@gmail.com
  (your store contact email).
{%- endcomment -%}

<div class="jd-quote-form">
  {%- form 'contact' -%}
    {%- if form.posted_successfully? -%}
      <p class="jd-form-success">✅ Thanks — we got your request and will reply with a quote shortly.</p>
      <script>
        try{
          Shopify.analytics.publish('jaksdiesel:lead', {
            lead_source: 'quote_form',
            method: 'form_submit'
          });
        }catch(e){}
      </script>
    {%- endif -%}

    {%- if form.errors -%}
      <p class="jd-form-error">Please complete the required fields and try again.</p>
    {%- endif -%}

    <label>Name *</label>
    <input type="text" name="contact[name]" required>

    <label>Email *</label>
    <input type="email" name="contact[email]" required>

    <label>Phone</label>
    <input type="tel" name="contact[phone]">

    <label>Part number or vehicle (year / make / model)</label>
    <input type="text" name="contact[Part or Vehicle]">

    <label>What do you need a quote on? *</label>
    <textarea name="contact[body]" rows="5" required></textarea>

    <button type="submit" class="jd-form-submit">Request My Quote</button>
  {%- endform -%}
</div>

<style>
  .jd-quote-form{max-width:620px;margin:0 auto;}
  .jd-quote-form label{display:block;margin:14px 0 5px;font-weight:600;}
  .jd-quote-form input,.jd-quote-form textarea{width:100%;padding:11px;
    border:1px solid #ccc;border-radius:6px;font-size:16px;}
  .jd-form-submit{margin-top:18px;padding:14px 22px;border:0;border-radius:8px;
    background:#e0a100;color:#111;font-weight:700;font-size:16px;cursor:pointer;}
  .jd-form-success{padding:12px;background:#e7f6e7;border-radius:6px;}
  .jd-form-error{padding:12px;background:#fdecec;border-radius:6px;}
</style>