{
  "Templates": [
    {
      "id": "formtemplate-1",
      "category": "Contact",
      "image": "BookshelfForm.webp",
      "pages": [
        {
          "name": "Contact Us Popup",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; position:relative; height:100vh; width:100vw; overflow:hidden; font-family:Arial, sans-serif;'>\n\n  <style>\n    @media screen and (max-width: 768px) {\n      .responsive-section {\n        flex-direction: column-reverse !important;\n      }\n      .responsive-section .left-column,\n      .responsive-section .right-column {\n        width: 100% !important;\n      }\n      .responsive-section .right-column img {\n        width: 100% !important;\n        height: auto !important;\n        border-radius: 10px 10px 0 0 !important;\n        object-fit: cover !important;\n      }\n      .responsive-section .left-column {\n        padding: 20px 16px !important;\n      }\n      .responsive-section h2 {\n        font-size: 18px !important;\n        margin-bottom: 16px !important;\n      }\n      .responsive-section input,\n      .responsive-section textarea,\n      .responsive-section button {\n        font-size: 13px !important;\n        padding: 10px !important;\n      }\n    }\n  </style>\n\n  <section data-gjs-type='column' class='responsive-section' style='max-width:700px; width:100%; margin:100px auto 40px auto; box-shadow:0 10px 30px rgba(0,0,0,0.2); border-radius:10px; display:flex; overflow:hidden;'>\n\n    <!-- Left Column: Form -->\n    <form class='left-column' data-gjs-type='column' style='flex:1; background-color:#FCF7EE; padding:30px 24px; display:flex; flex-direction:column; justify-content:center;'>\n      <h2 style='font-size:22px; text-align:center; font-weight:bold; color:#000000; margin-bottom:24px;'>Start The Conversation</h2>\n\n        <input type='text' data-gjs-type='name-input' placeholder='Name' style='width:100%; padding:10px; margin-bottom:14px; border-radius:8px; border:1px solid #ddd; font-size:14px; background-color:#F8F3E3;'>\n        <input type='email' placeholder='Email' style='width:100%; padding:10px; margin-bottom:14px; border-radius:8px; border:1px solid #ddd; font-size:14px; background-color:#F8F3E3;'>\n        <textarea data-gjs-type='message' placeholder='Message' rows='3' style='width:100%; padding:10px; margin-bottom:20px; border-radius:8px; border:1px solid #ddd; font-size:14px; background-color:#F8F3E3;'></textarea>\n        <button type='submit' style='width:100%; padding:10px; background-color:#B46A3F; color:#ffffff; font-size:14px; border:1px solid #ddd; border-radius:24px; cursor:pointer;'>Email</button>\n      </form>\n        <!-- Right Column: Image -->\n    <div class='right-column' data-gjs-type='column' style='flex:1; display:flex;'>\n      <img src='/wp-content/plugins/ysleadgen/assets/images/form-images/Bookshelf.webp' alt='Office Interior' style='width:100%; height:auto; object-fit:cover;'>\n    </div>\n\n  </section>\n</body>"
            }
          ]
        }
      ]
    },
    {
      "id": "formtemplate-2",
      "category": "Contact",
      "image": "supportform.webp",
      "pages": [
        {
          "name": "Let's Talk Contact Form",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; position:relative; height:100vh; width:100vw; overflow:hidden; font-family:Arial, sans-serif;'>\n  <style>\n    @media (min-width: 768px) {\n      .responsive-section {\n        flex-direction: row;\n      }\n    }\n    @media screen and (max-width: 768px) {\n      .responsive-section {\n        flex-direction: column !important;\n      }\n      .responsive-section .right-column img {\n        border-radius: 10px 10px 0 0 !important;\n      }\n    }\n  </style>\n\n  <section data-gjs-type='column' class='responsive-section' style='max-width:700px; width:100%; margin:100px auto 40px auto; box-shadow:0 10px 30px rgba(0,0,0,0.2); border-radius:10px; display:flex; overflow:hidden; background-color:#ffffff;'>\n\n    <!-- Image Column (Left on desktop) -->\n    <div class='left-column' data-gjs-type='column' style='flex:1; display:flex;'>\n      <img src='/wp-content/plugins/ysleadgen/assets/images/form-images/support-agent.webp' alt='Support Agent' style='width:100%; height:auto; object-fit:cover;' onerror=\"this.style.display='none';\">\n    </div>\n\n        <form class='right-column' data-gjs-type='column' style='flex:1; padding:30px 24px; display:flex; flex-direction:column; justify-content:center;'>\n      <h2 style='font-size:22px; text-align:center; font-weight:bold; color:#000000; margin-bottom:16px;'>Let’s Talk!</h2>\n      <p style='font-size:14px; text-align:center; color:#333; margin-bottom:20px;'>Have a question or idea? Drop us a message</p>\n\n            <input type='text' name='name' placeholder='Name' style='width:100%; padding:10px; margin-bottom:14px; border-radius:8px; border:1px solid #dddddd; font-size:14px; background-color:#f6f6f6;'>\n        <input type='email' name='email' placeholder='Email' style='width:100%; padding:10px; margin-bottom:14px; border-radius:8px; border:1px solid #dddddd; font-size:14px; background-color:#f6f6f6;'>\n        <textarea name='message' placeholder='Message' rows='3' style='width:100%; padding:10px; margin-bottom:20px; border-radius:8px; border:1px solid #ddd; font-size:14px; background-color:#f6f6f6;'></textarea>\n        <button type='submit' style='width:100%; padding:10px; background-color:#f47c2c; color:#ffffff; font-size:14px; border:1px solid #ddd; border-radius:24px; cursor:pointer;'>Send Message</button>\n      <p style='font-size:12px; text-align:center; color:#888; margin-top:12px;'>We typically respond within 24 hours</p>\n    </form>\n\n  </section>\n</body>"
            }
          ]
        }
      ]
    },
    {
      "id": "formtemplate-3",
      "category": "Contact",
      "image": "contactusform.webp",
      "pages": [
        {
          "name": "Contact Us Popup",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; font-family:Arial, sans-serif;'>\n  <style>\n    .contact-flex-section {\n      display: flex;\n      flex-wrap: wrap;\n      max-width: 700px;\n      width: 100%;\n      margin: 100px auto 40px auto;\n      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\n      border-radius: 10px;\n      overflow: hidden;\n    }\n\n    .form-section {\n      flex: 1;\n      background-color: #03081C;\n      color: #ffffff;\n      padding: 30px 24px;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n    }\n\n    .form-section h2 {\n      font-size: 22px;\n      font-weight: bold;\n      margin-bottom: 24px;\n      text-align: center;\n    }\n\n    .form-section form {\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n    }\n\n    .form-section input,\n    .form-section textarea {\n      padding: 10px;\n      border-radius: 8px;\n      border: 1px solid #666;\n      background-color: transparent;\n      color: #ffffff;\n      font-size: 14px;\n    }\n\n    .form-section button {\n      padding: 10px;\n      border: none;\n      border-radius: 24px;\n      background-color: #ED7B2F;\n      color: #ffffff;\n      font-size: 14px;\n      font-weight: bold;\n      cursor: pointer;\n    }\n\n    .contact-image {\n      flex: 1;\n      background: #fefefe;\n      display: flex;\n    }\n\n    .contact-image img {\n      width: 100%;\n      height: auto;\n      object-fit: cover;\n      display: block;\n    }\n\n    @media screen and (max-width: 768px) {\n      .contact-flex-section {\n        flex-direction: column-reverse;\n        margin: 20px auto;\n        width: 95%;\n      }\n\n      .contact-image img {\n        border-radius: 10px 10px 0 0;\n      }\n\n      .form-section {\n        padding: 20px 16px;\n      }\n\n      .form-section h2 {\n        font-size: 18px;\n        margin-bottom: 16px;\n      }\n\n      .form-section input,\n      .form-section textarea,\n      .form-section button {\n        font-size: 13px;\n        padding: 10px;\n      }\n    }\n  </style>\n\n  <section data-gjs-type='column' class='contact-flex-section'>\n       <form data-gjs-type='column' class='form-section'>\n      <h2 style='color:#ffffff;'>Get in Touch With Us</h2>\n        <input type='text' style='width:100%; padding:10px; margin-bottom:14px;' placeholder='Name' name='name'>\n        <input type='email' style='width:100%; padding:10px; margin-bottom:14px;' placeholder='Email' name='email'>\n        <textarea name='message' style='width:100%; padding:10px; margin-bottom:14px;' placeholder='Your Message' rows='3'></textarea>\n        <button type='submit'>Send Message</button>\n      </form>\n    \n\n    <!-- Image Section -->\n    <div data-gjs-type='column' class='contact-image'>\n      <img src='/wp-content/plugins/ysleadgen/assets/images/form-images/contactus1.webp' alt='Contact Illustration' onerror=\"this.style.display='none';\">\n    </div>\n  </section>\n</body>"
            }
          ]
        }
      ]
    },
    {
      "id": "formtemplate-4",
      "category": "Call to Action",
      "image": "manform.webp",
      "pages": [
        {
          "name": "Elevate Hero Section",
          "frames": [
            {
              "component": "<body data-gjs-type='body'>\n  <section style='background-color: #ffffff; max-width: 400px; width: 100%; margin: 90px auto; font-family: Helvetica Neue, sans-serif; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08); border-radius: 0; overflow: hidden;'>\n\n    <!-- CTA/Text Section -->\n    <form data-gjs-type='column' style='padding: 50px 20px 40px; text-align: center;'>\n      <h2 style='font-size: 26px; font-weight:bold; color: #111; margin: 0 0 12px;'>Ready to Elevate Your Life?</h2>\n      <p style='font-size: 15px; color: #666; margin-bottom: 30px;'>Let’s make your next move your best one yet</p>\n     <button type='submit' style='padding: 14px 32px; background-color: #4a5a5f; color: #ffffff; font-weight: bold; font-size: 15px; border: none; border-radius: 40px; cursor: pointer;'>GET STARTED</button>\n    \n\n    <!-- Bottom Hero Image -->\n    <div style='width: 100%; height: auto;'>\n      <img src='/wp-content/plugins/ysleadgen/assets/images/form-images/Mountainview.webp' alt='Mountain Hero' style='width: 100%; height: auto; display: block; object-fit: cover;' onerror=\"this.style.display='none';\">\n    </div>\n\n  </section>\n</body>"
            }
          ]
        }
      ]
    },
    {
      "id": "formtemplate-5",
      "category": "Contact",
      "image": "Emailsubscribeform.webp",
      "pages": [
        {
          "name": "Newsletter Subscription Form",
          "frames": [
            {
              "component": "<section data-gjs-type='column' style='display:flex; flex-wrap:wrap; max-width:720px; width:100%; margin:100px auto 40px auto; box-shadow:0 10px 30px rgba(0,0,0,0.1); border-radius:10px; overflow:hidden;'>\n\n  <!-- Left Illustration -->\n  <div data-gjs-type='column' style='flex:1 1 50%; background:#fefefe;'>\n    <img src='/wp-content/plugins/ysleadgen/assets/images/form-images/TwoDImage.webp' alt='Subscribe Illustration' style='width:100%; height:100%; object-fit:cover;' onerror=\"this.style.display='none';\">\n  </div>\n\n  <!-- Right Form Section -->\n  <div data-gjs-type='column' style='flex:1 1 50%; background-color:#215b5d; color:#ffffff; padding:40px; display:flex; flex-direction:column; justify-content:center;'>\n    <h2 style='font-size:24px; font-weight:bold; margin-bottom:24px; text-align:center;'>Get Fresh Insights to Your Inbox</h2>\n\n    <form style='display:flex; flex-direction:column; gap:16px;'>\n      <input type='text' placeholder='Name' name='name' style='padding:12px; border-radius:6px; border:1px solid #ddd; font-size:14px;'>\n      <input type='email' placeholder='Email' name='email' style='padding:12px; border-radius:6px; border:1px solid #ddd; font-size:14px;'>\n      <button type='submit' style='padding:12px; border:1px solid #ddd; border-radius:30px; background-color:#64c19e; color:#ffffff; font-size:16px; font-weight:bold; cursor:pointer;'>Subscribe</button>\n    </form>\n  </div>\n\n</section>"
            }
          ]
        }
      ]
    },
    {
      "id": "formtemplate-6",
      "category": "Contact",
      "image": "helpsupport.webp",
      "pages": [
        {
          "name": "We're Here To Help",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; position:relative; height:100vh; width:100vw; font-family:Arial, sans-serif;'>\n  <style>\n    @media screen and (max-width: 768px) {\n      .help-section {\n        flex-direction: column !important;\n        width: 100% !important;\n        max-width: 100% !important;\n        margin: 20px auto !important;\n        border-radius: 0 !important;\n      }\n      .help-section .help-image {\n        width: 100% !important;\n        height: 140px !important;\n      }\n      .help-section .help-image img {\n        height: 100% !important;\n        width: 100% !important;\n        object-fit: cover;\n      }\n      .help-section .help-form {\n        width: 100% !important;\n        padding: 20px 16px !important;\n      }\n      .help-section h2 {\n        font-size: 18px !important;\n        margin-bottom: 8px !important;\n      }\n      .help-section p {\n        font-size: 13px !important;\n        margin-bottom: 16px !important;\n      }\n      .help-section input,\n      .help-section textarea {\n        font-size: 13px !important;\n        padding: 10px !important;\n      }\n      .help-section button {\n        padding: 10px !important;\n        font-size: 14px !important;\n      }\n    }\n  </style>\n\n  <section data-gjs-type='column' class='help-section' style='display:flex; width:720px; margin:100px auto 40px auto; box-shadow:0 10px 30px rgba(0,0,0,0.1); border-radius:10px; overflow:hidden;'>\n\n    <!-- Left Image -->\n    <div data-gjs-type='column' class='help-image' style='width:450px; background:#ffffff;'>\n      <img src='/wp-content/plugins/ysleadgen/assets/images/form-images/Reachout.webp' alt='Support Agent' style='width:100%; height:100%; object-fit:cover;' onerror=\"this.style.display='none';\">\n    </div>\n\n    <!-- Right Form -->\n    <form data-gjs-type='column' class='help-form' style='width:450px; background:#f9f9f9; padding:40px; display:flex; flex-direction:column; justify-content:center;'>\n      <h2 style='font-size:24px; font-weight:bold; color:#1c2b4a; margin-bottom:10px; text-align:center;'>We’re Here To Help</h2>\n      <p style='font-size:14px; color:#666; margin-bottom:24px; text-align:center;'>Have a question or idea? Drop us a message</p>\n\n  <input type='text' name='name' placeholder='Name' style='padding:12px; border-radius:8px; border:1px solid #ddd; font-size:14px; margin-bottom:10px'>\n        <input type='email' name='email' placeholder='Email' style='padding:12px; border-radius:8px; border:1px solid #ddd; font-size:14px; margin-bottom:10px;'>\n        <textarea name='message' rows='3' placeholder='Message' style='padding:12px; border-radius:8px; border:1px solid #ddd; font-size:14px; resize:none;margin-bottom:10px;'></textarea>\n        <button type='submit' style='padding:12px; background-color:#b262f2; color:#fff; font-weight:bold; font-size:15px; border:1px solid #ddd; border-radius:30px; cursor:pointer;'>Reach Out</button>\n     \n    </form>\n\n  </section>\n</body>"
            }
          ]
        }
      ]
    },
    {
      "id": "formtemplate-7",
      "category": "Contact",
      "image": "plantform.webp",
      "pages": [
        {
          "name": "Grow Ideas Form",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; height:100vh; width:100vw; font-family:Arial, sans-serif;'>\n  <style>\n    @media screen and (max-width: 768px) {\n      .grow-section {\n        flex-direction: column !important;\n        width: 95% !important;\n        max-width: 380px !important;\n        margin: 30px auto !important;\n        height: auto !important;\n      }\n      .grow-section .grow-image {\n        width: 100% !important;\n        height: 140px !important;\n        order: -1 !important;\n      }\n      .grow-section .grow-image img {\n        height: 100% !important;\n        object-fit: cover;\n        width: 100%;\n        display: block;\n      }\n      .grow-section .grow-form {\n        width: 100% !important;\n        padding: 20px 16px !important;\n      }\n      .grow-section h2 {\n        font-size: 18px !important;\n        margin-bottom: 8px !important;\n      }\n      .grow-section p {\n        font-size: 13px !important;\n        margin-bottom: 16px !important;\n      }\n      .grow-section input,\n      .grow-section textarea {\n        font-size: 13px !important;\n        padding: 10px !important;\n      }\n      .grow-section button {\n        padding: 10px !important;\n        font-size: 14px !important;\n      }\n    }\n  </style>\n\n  <div data-gjs-type='column' class='grow-section' style='display:flex; width:720px; height:auto; margin:90px auto 40px auto; box-shadow:0 6px 16px rgba(0,0,0,0.06); border-radius:8px; overflow:hidden;'>\n\n    <!-- Left Section (Text + Form) -->\n    <form data-gjs-type='column' class='grow-form' style='width:360px; background-color:#ffffff; padding:30px 20px; display:flex; flex-direction:column; justify-content:center;'>\n      <h2 style='font-size:22px; font-weight:bold; color:#132047; margin-bottom:10px; text-align:center;'>Let Ideas Grow<br>With You</h2>\n      <p style='font-size:13px; color:#666; margin-bottom:20px; text-align:center;'>Join us and watch your ideas take root</p>\n\n           <input type='text' name='name' placeholder='Name' style='padding:10px; border-radius:20px; border:1px solid #999; font-size:13px; margin-bottom:10px'>\n        <input type='email' name='email' placeholder='Email' style='padding:10px; border-radius:20px; border:1px solid #999; font-size:13px; margin-bottom:10px'>\n        <textarea data-gjs-type='message' name='message' rows='3' placeholder='Message' style='padding:10px; border-radius:20px; border:1px solid #999; font-size:13px; resize:none; margin-bottom:10px;'></textarea>\n        <button type='submit' style='padding:12px; background-color:#656632; color:#ffffff; font-weight:bold; font-size:14px; border:1px solid #ddd; border-radius:20px; cursor:pointer;'>Reach Out</button>\n          </form>\n\n    <!-- Right Section (Image) -->\n    <div data-gjs-type='column' class='grow-image' style='width:360px; background-color:#f4f4f4;'>\n      <img src='/wp-content/plugins/ysleadgen/assets/images/form-images/Plant.webp' alt='Plant with Mug' style='width:100%; height:100%; object-fit:cover;' onerror=\"this.style.display='none';\">\n    </div>\n\n  </div>\n</body>"
            }
          ]
        }
      ]
    },
    {
      "id": "formtemplate-8",
      "category": "Contact",
      "image": "FruitsForm.webp",
      "pages": [
        {
          "name": "Juicy Contact Form",
          "frames": [
            {
              "component": "<body data-gjs-type='body'>\n  <section style='background-color: #F7F3E6; max-width: 440px; width: 100%; margin: 100px auto 40px auto; box-shadow: 0 10px 30px rgba(0,0,0,0.1); font-family: Arial, sans-serif; border-radius: 0px; overflow: hidden;'>\n\n    <!-- Top Banner Image -->\n    <div style='width:100%;'>\n      <img src='/wp-content/plugins/ysleadgen/assets/images/form-images/Fruits.webp' alt='Fruits Banner' style='width:100%; height:auto; display:block;' onerror=\"this.style.display='none';\">\n    </div>\n\n    <!-- Bottom Form Content -->\n    <form data-gjs-type='column' style='padding: 30px 20px; text-align: center;background-color: #F7F3E6;flex-direction: column;display: flex; gap: 12px;'>\n      <h2 style='font-size: 24px; font-weight: bold; color: #8e2b2b; margin-top: 10px; margin-bottom: 6px;'>Let’s Juice Things Up</h2>\n      <p style='font-size: 13px; color: #333; margin-bottom: 20px;'>Have a question or idea? Drop us a message</p>\n\n             <input type='text' name='name' placeholder='Name' style='padding: 10px; border-radius: 0px; border: 1px solid #ccc; font-size: 13px;'>\n        <input type='email' name='email' placeholder='Email' style='padding: 10px; border-radius: 0px; border: 1px solid #ccc; font-size: 13px;'>\n        <textarea name='message' rows='3' placeholder='Message' style='padding: 10px; border-radius: 0px; border: 1px solid #ccc; font-size: 13px; resize: none;'></textarea>\n      <button type='submit' style='padding: 12px; background-color: #fa6e43; color: #ffffff; font-weight: bold; font-size: 14px; border: none; border-radius: 0px; cursor: pointer;'>Send</button>\n      </form>\n   \n\n  </section>\n</body>"
            }
          ]
        }
      ]
    },
    {
      "id": "formtemplate-9",
      "category": "Contact",
      "image": "contactform.webp",
      "pages": [
        {
          "name": "Team Contact Form",
          "frames": [
            {
              "component": "<body data-gjs-type='body'>\n  <!-- Outer Wrapper -->\n  <section style='background-color: #ffffff; max-width: 380px; width: 100%; margin: 80px auto 30px auto; font-family: Arial, sans-serif; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); border-radius: 0; overflow: hidden;'>\n\n    <!-- Top Image Banner -->\n    <div style='width: 100%;'>\n      <img src='/wp-content/plugins/ysleadgen/assets/images/form-images/workspace.webp' alt='Team Banner' style='width: 100%; height: auto; display: block;' onerror=\"this.style.display='none';\">\n    </div>\n\n    <!-- Form Section -->\n    <form data-gjs-type='column' style='padding: 20px 16px; text-align: center;'>\n      <h2 style='font-size: 20px; font-weight: bold; color: #000000; margin-top: 8px; margin-bottom: 16px;'>Connect With Our Team</h2>\n\n      <input type='text' name='name' placeholder='Name' style='width: 100%; padding: 10px; margin-bottom: 12px; border-radius: 0; border: 1px solid #ccc; font-size: 13px;'>\n\n      <input type='email' name='email' placeholder='Email' style='width: 100%; padding: 10px; margin-bottom: 12px; border-radius: 0; border: 1px solid #ccc; font-size: 13px;'>\n\n      <textarea name='message' placeholder='Message' rows='4' style='width: 100%; padding: 10px; margin-bottom: 16px; border-radius: 0; border: 1px solid #ccc; font-size: 13px; resize: none;'></textarea>\n\n      <button type='submit' style='width: 100%; padding: 12px; background-color: #1e3a8a; color: #ffffff; font-weight: bold; font-size: 14px; border: none; border-radius: 0; cursor: pointer;'>Submit</button>\n    </form>\n\n  </section>\n</body>"
            }
          ]
        }
      ]
    },
    {
      "id": "formtemplate-10",
      "category": "Contact",
      "image": "HiForm.webp",
      "pages": [
        {
          "name": "Puppy Contact Form",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; height:100vh; width:100vw; font-family:Arial, sans-serif;'>\n  <style>\n    .puppy-contact-wrapper {\n      display: flex;\n      flex-direction: row;\n      width: 100%;\n      max-width: 700px;\n      margin: 90px auto 40px auto;\n      box-shadow: 0 6px 15px rgba(0,0,0,0.08);\n      border-radius: 8px;\n      overflow: hidden;\n    }\n\n    .puppy-image {\n      width: 50%;\n      background: #eee;\n    }\n\n    .puppy-image img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      display: block;\n    }\n\n    .puppy-form {\n      width: 50%;\n      background-color: #F9EED3;\n      padding: 35px 28px;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      gap: 14px;\n    }\n\n    .puppy-form h2 {\n      font-size: 22px;\n      font-weight: bold;\n      color: #000;\n      margin-bottom: 6px;\n      text-align: center;\n    }\n\n    .puppy-form p {\n      font-size: 13px;\n      color: #222;\n      margin-bottom: 24px;\n      text-align: center;\n    }\n\n    .puppy-form input,\n    .puppy-form textarea {\n      padding: 12px;\n      border-radius: 20px;\n      border: 1px solid #ccc;\n      font-size: 13px;\n    }\n\n    .puppy-form textarea {\n      resize: none;\n    }\n\n    .puppy-form button {\n      padding: 12px;\n      background: #a26a3b;\n      color: #fff;\n      font-weight: bold;\n      font-size: 14px;\n      border: none;\n      border-radius: 20px;\n      cursor: pointer;\n    }\n\n    @media screen and (max-width: 600px) {\n      .puppy-contact-wrapper {\n        flex-direction: column !important;\n        width: 95% !important;\n        max-width: 400px !important;\n        margin: 30px auto !important;\n        height: auto !important;\n      }\n\n      .puppy-image {\n        width: 100% !important;\n        height: 160px !important;\n        order: -1 !important;\n      }\n\n      .puppy-form {\n        width: 100% !important;\n        padding: 24px 16px !important;\n      }\n\n      .puppy-form h2 {\n        font-size: 20px !important;\n        margin-bottom: 8px !important;\n      }\n\n      .puppy-form p,\n      .puppy-form input,\n      .puppy-form textarea,\n      .puppy-form button {\n        font-size: 14px !important;\n      }\n    }\n  </style>\n\n  <section data-gjs-type='column' class='puppy-contact-wrapper'>\n    <!-- Left Image Side -->\n    <div data-gjs-type='column' class='puppy-image'>\n      <img src='/wp-content/plugins/ysleadgen/assets/images/form-images/dog.webp' alt='Cute Puppy' onerror=\"this.style.display='none';\">\n    </div>\n\n    <!-- Right Form Side -->\n    <form data-gjs-type='column' class='puppy-form'>\n      <h2>Say Hi to Us!</h2>\n      <p>We’re all ears, send us your message anytime</p>\n\n      <input type='text' name='name' placeholder='Name'>\n      <input type='email' name='email' placeholder='Email'>\n      <textarea name='message' rows='3' placeholder='Message'></textarea>\n      <button type='submit'>Send</button>\n    </form>\n  </section>\n</body>"
            }
          ]
        }
      ]
    },
    {
      "id": "formtemplate-11",
      "category": "Contact",
      "image": "ModernHouseForm.webp",
      "pages": [
        {
          "name": "Build Your Vision Popup",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; position:relative; height:100vh; width:100vw; overflow:hidden; font-family:Arial, sans-serif;'>\n\n  <style>\n    @media screen and (max-width: 768px) {\n      .responsive-section {\n        flex-direction: column-reverse !important;\n        width: 95% !important;\n        max-width: 380px !important;\n        margin: 30px auto !important;\n        height: auto !important;\n      }\n      .responsive-section .left-column,\n      .responsive-section .right-column {\n        width: 100% !important;\n      }\n      .responsive-section .right-column {\n        height: 140px !important;\n      }\n      .responsive-section .right-column img {\n        height: 100% !important;\n        object-fit: cover;\n        border-radius: 10px 10px 0 0 !important;\n        display: block;\n        width: 100%;\n      }\n      .responsive-section .left-column {\n        padding: 20px 16px !important;\n      }\n      .responsive-section h2 {\n        font-size: 20px !important;\n        margin-bottom: 8px !important;\n      }\n      .responsive-section p {\n        font-size: 14px !important;\n        margin-bottom: 16px !important;\n      }\n      .responsive-section input,\n      .responsive-section textarea {\n        font-size: 14px !important;\n        padding: 10px !important;\n      }\n      .responsive-section button {\n        padding: 12px !important;\n        font-size: 15px !important;\n      }\n    }\n  </style>\n\n  <section data-gjs-type='column' class='responsive-section' style='max-width:720px; width:100%; margin:100px auto 60px auto; display:flex; box-shadow:0 10px 30px rgba(0,0,0,0.1); border-radius:10px; overflow:hidden;'>\n\n    <!-- Left Column: Form -->\n    <form class='left-column' data-gjs-type='column' style='flex:1; background-color:#ffffff; padding:40px; display:flex; flex-direction:column; justify-content:center; gap:14px;'>\n      <h2 style='font-size:32px; font-weight:bold; margin-bottom:10px; color:#000;'>Build Your Vision</h2>\n      <p style='font-size:16px; color:#555; margin-bottom:24px;'>Let's discuss your ideas and plans, drop us a line</p>\n\n            <input type='text' name='name' placeholder='Name' style='width:100%; padding:12px; border-radius:6px; border:1px solid #ccc; font-size:15px;'>\n        <input type='email' name='email' placeholder='Email' style='width:100%; padding:12px; border-radius:6px; border:1px solid #ccc; font-size:15px;'>\n        <textarea name='message' rows='4' placeholder='Message' style='width:100%; padding:12px; border-radius:6px; border:1px solid #ccc; font-size:15px; resize:none;'></textarea>\n        <button type='submit' style='width:100%; padding:14px; background-color:#0B2C50; color:#ffffff; font-size:16px; border:1px solid #ddd; border-radius:6px; font-weight:bold; cursor:pointer;'>Contact Us</button>\n      </form>\n    \n\n    <!-- Right Column: Image -->\n    <div class='right-column' data-gjs-type='column' style='flex:1;'>\n      <img src='/wp-content/plugins/ysleadgen/assets/images/form-images/ModernHouse.webp' alt='Modern Home' style='width:100%; height:100%; object-fit:cover;'>\n    </div>\n\n  </section>\n</body>"
            }
          ]
        }
      ]
    },
    {
      "id": "formtemplate-12",
      "category": "Contact",
      "image": "KidsEducationForm.webp",
      "pages": [
        {
          "name": "Let’s Learn Together Popup",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; height:auto; width:100vw; overflow:hidden; font-family:Arial, sans-serif;'>\n\n  <style>\n    @media screen and (max-width: 768px) {\n      .responsive-section {\n        flex-direction: column-reverse !important;\n        width: 95% !important;\n        max-width: 380px !important;\n        margin: 20px auto !important;\n        height: auto !important;\n      }\n      .responsive-section .right-column {\n        height: 130px !important;\n        padding: 0 !important;\n      }\n      .responsive-section .right-column img {\n        width: 100% !important;\n        height: 100% !important;\n        object-fit: cover;\n        border-radius: 10px 10px 0 0 !important;\n        display: block;\n      }\n      .responsive-section .left-column {\n        padding: 16px !important;\n      }\n      .responsive-section h2 {\n        font-size: 18px !important;\n        margin-bottom: 6px !important;\n      }\n      .responsive-section p {\n        font-size: 13px !important;\n        margin-bottom: 14px !important;\n      }\n      .responsive-section input,\n      .responsive-section textarea {\n        font-size: 13px !important;\n        padding: 10px !important;\n      }\n      .responsive-section button {\n        padding: 10px !important;\n        font-size: 14px !important;\n      }\n    }\n  </style>\n\n  <section data-gjs-type='column' class='responsive-section' style='max-width:700px; width:100%; margin:100px auto 40px auto; display:flex; box-shadow:0 10px 30px rgba(0,0,0,0.1); border-radius:10px; overflow:hidden; height:auto;'>\n\n    <!-- Left Column: Form -->\n    <form class='left-column' data-gjs-type='column' style='flex:1; background-color:#ffffff; padding:32px; display:flex; flex-direction:column; justify-content:center;gap:12px;'>\n      <h2 style='font-size:28px; font-weight:bold; color:#35024D; margin-bottom:10px;'>Let’s Learn Together</h2>\n      <p style='font-size:15px; color:#444; margin-bottom:20px;'>Send us your message and we’ll get back to you</p>\n\n             <input type='text' name='name' placeholder='Name' style='width:100%; padding:12px; border-radius:6px; border:1px solid #ccc; font-size:14px;'>\n        <input type='email' name='email' placeholder='Email' style='width:100%; padding:12px; border-radius:6px; border:1px solid #ccc; font-size:14px;'>\n        <textarea name='message' rows='3' placeholder='Message' style='width:100%; padding:12px; border-radius:6px; border:1px solid #ccc; font-size:14px; resize:none;'></textarea>\n        <button type='submit' style='width:100%; padding:12px; background-color:#4A126F; color:#ffffff; font-size:15px; border:1px solid #ddd; border-radius:6px; font-weight:bold; cursor:pointer;'>Submit</button>\n      </form>\n    \n\n    <!-- Right Column: Image -->\n    <div class='right-column' data-gjs-type='column' style='flex:1; background-color:#F4E4F9; display:flex; align-items:center; justify-content:center;'>\n      <img src='/wp-content/plugins/ysleadgen/assets/images/form-images/KidsEducation.webp' alt='Children with backpacks' style='width:90%; height:auto; object-fit:cover; border-radius:20px;'>\n    </div>\n\n  </section>\n</body>"
            }
          ]
        }
      ]
    },
    {
      "id": "formtemplate-13",
      "category": "Call to Action",
      "image": "boostmobile.webp",
      "pages": [
        {
          "name": "NotiSpark Image + Text Split",
          "frames": [
            {
              "component": "<section data-gjs-type='column' class='notispark-split-section' style='background-color:#0B0D13; max-width:700px; width:90%; margin:80px auto 30px auto; box-shadow:0 6px 20px rgba(0,0,0,0.3); color:#ffffff; display:flex; flex-direction:row; flex-wrap:wrap; overflow:hidden; border-radius:6px;'>\n\n  <!-- Left Column: Image -->\n  <div class='left-col' data-gjs-type='column' style='flex:1; max-width:50%;'>\n    <img src='/wp-content/plugins/ysleadgen/assets/images/form-images/MobileAd.webp' alt='Mobile Demo' style='width:100%; height:100%; object-fit:cover; display:block; border-top-left-radius:6px; border-bottom-left-radius:6px;'>\n  </div>\n\n  <!-- Right Column: Content -->\n  <form class='right-col' data-gjs-type='column' style='flex:1; max-width:50%; background-color:#0B0D13; padding:40px 30px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; text-align:left;'>\n    <h1 style='font-size:32px; font-weight:bold; margin-bottom:12px;'>\n      <span style='color:#3A91F5;'>Boost</span> Mobile<br>Engagement Instantly\n    </h1>\n\n    <p style='font-size:15px; color:#ccc; margin:20px 0;'>The simplest way to send beautiful, targeted mobile notifications. Perfect for apps, websites, and hybrid platforms.</p>\n\n         <button type='submit' style='background-color:#3A91F5; color:white; padding:12px 20px; font-size:15px; font-weight:bold; border:1px solid #ddd; border-radius:4px; cursor:pointer;'>Try NotiSpark Now</button>\n    </form>\n  \n\n  <style>\n    @media screen and (max-width: 768px) {\n      .notispark-split-section {\n        flex-direction: column !important;\n      }\n      .notispark-split-section .left-col,\n      .notispark-split-section .right-col {\n        max-width: 100% !important;\n        width: 100% !important;\n      }\n      .notispark-split-section .left-col img {\n        border-radius:6px 6px 0 0 !important;\n        height: auto !important;\n      }\n      .notispark-split-section .right-col {\n        padding: 24px 16px !important;\n        text-align: center !important;\n        align-items: center !important;\n      }\n    }\n  </style>\n</section>"
            }
          ]
        }
      ]
    },
    {
      "id": "formtemplate-14",
      "category": "Call to Action",
      "image": "digitalwatch.webp",
      "pages": [
        {
          "name": "VIBEX Hero Section",
          "frames": [
            {
              "component": "<body data-gjs-type='body'>\n  <section style='max-width: 420px; width: 100%; margin: 90px auto; font-family: Helvetica, sans-serif; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08); border-radius: 0; overflow: hidden;'>\n\n    <!-- CTA/Text Section -->\n    <form data-gjs-type='column' style='background-color: #B5B6BE; padding: 50px 20px 30px; text-align: center;'>\n      <h3 style='font-size: 18px; font-weight: 500; color: #000; margin: 0 0 10px;'>PulseOne</h3>\n      <h1 style='font-size: 46px; font-weight: bold; color: #1D1F27; margin: 0 0 10px;'>VIBEX</h1>\n      <p style='letter-spacing: 3px; font-size: 13px; color: #1D1F27; margin-bottom: 20px;'>MAKE TIME ICONIC</p>\n      <div style='background: #000; color: #fff; display: inline-block; padding: 8px 18px; font-weight: bold; font-size: 14px; margin-bottom: 16px;'>ARRIVING SOON</div>\n      <br>\n     <button style='padding: 12px 30px; background-color: #ffffff; color: #000; font-weight: bold; font-size: 15px; border: none; border-radius: 26px; cursor: pointer;'>Notify Me</button>    </form>\n\n    <!-- Hero Image Section -->\n    <div style='width: 100%; height: auto;background-color:#B5B6BE'>\n      <img src='/wp-content/plugins/ysleadgen/assets/images/form-images/watchdigital.webp' alt='VIBEX Watch' style='width: 100%; height: auto; display: block; object-fit: cover;' onerror=\"this.style.display='none';\">\n    </div>\n\n  </section>\n</body>"
            }
          ]
        }
      ]
    },
    {
      "id": "formtemplate-15",
      "category": "Call to Action",
      "image": "Appdownload.webp",
      "pages": [
        {
          "name": "App Download Promo",
          "frames": [
            {
              "component": "<body data-gjs-type='body'>\n  <section style='max-width: 420px; width: 100%; margin: 90px auto; font-family: Helvetica, sans-serif; box-shadow: 0 10px 24px rgba(0,0,0,0.08); border-radius: 0; overflow: hidden;'>\n\n    <!-- CTA Section -->\n    <form data-gjs-type='column' style='background-color: #E3E4E3; padding: 50px 20px 30px; text-align: center;'>\n      <div data-gjs-type='text' style='font-size: 28px; font-weight: bold; color: #111111; margin-bottom: 0;'>DOWNLOAD</div>\n      <div data-gjs-type='text' style='font-size: 28px; font-weight: bold; color: #555555; margin-bottom: 10px;'>OUR APP!</div>\n      <p style='font-size: 14px; color: #444444; margin-bottom: 20px;'>GET 10% OFF YOUR FIRST ORDER<br>ONLY ON OUR APP</p>\n     <button type='submit' style='width: 200px; padding: 12px 28px; background-color: #000000; color: #ffffff; font-size: 14px; font-weight: bold; border: none; border-radius: 8px; cursor: pointer;'>Download Now</button></form>\n    \n\n    <!-- App Image Section -->\n    <div style='width: 100%; height: auto; background-color:#E3E4E3 '>\n      <img src='/wp-content/plugins/ysleadgen/assets/images/form-images/App.webp' alt='App Promo' style='width: 100%; height: auto; display: block; object-fit: cover;' onerror=\"this.style.display='none';\">\n    </div>\n\n  </section>\n</body>"
            }
          ]
        }
      ]
    },
    {
      "id": "formtemplate-16",
      "category": "Call to Action",
      "image": "Budspro.webp",
      "pages": [
        {
          "name": "ZeonBuds X Promo",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; height:100vh; width:100vw; font-family:Arial, sans-serif; display:flex; justify-content:center; align-items:center;'>\n  <div data-gjs-type='column' style='margin:100px auto 40px auto;max-width:420px; width:100%; background:#000000; border-radius:20px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.4); display:flex; flex-direction:column;'>\n\n    <!-- Top Section (Text Content) -->\n    <div data-gjs-type='column' style='padding:30px 20px; text-align:center;background-color:#000000;'>\n      <span style='color:#00AEEF; font-size:12px; background:rgba(0,174,239,0.1); padding:4px 12px; border-radius:16px;'>NEW RELEASE</span>\n      <h1 style='font-size:24px; color:#ffffff; font-weight:bold; margin:10px 0 6px;'>Zeon<span style='color:#00AEEF;'>Buds X</span></h1>\n      <p style='font-size:14px; color:#ccc; margin:0;'>UNLEASH PURE SOUND</p>\n    </div>\n\n    <!-- Middle Section (Image) -->\n    <div style='width:100%;'>\n      <img src='/wp-content/plugins/ysleadgen/assets/images/form-images/ZeonbudsX.webp' alt='ZeonBuds X' style='width:100%; height:auto; display:block;'>\n    </div>\n\n    <!-- Bottom Section (CTA & Price) -->\n    <form data-gjs-type='column'style='padding:24px 20px; text-align:center; background-color:#000000'>\n      <p style='font-size:20px; color:#00AEEF; margin-bottom:16px;'>Just at ₹600.00</p>\n      <button type='submit' style='padding:12px 24px; background:#ffffff; color:#000000; font-size:16px; font-weight:bold; border:1px solid #ddd; border-radius:8px; cursor:pointer;'>Get Now</button></form>\n    \n\n  </div>\n</body>"
            }
          ]
        }
      ]
    },
    {
      "id": "formtemplate-17",
      "category": "Call to Action",
      "image": "perfume.webp",
      "pages": [
        {
          "name": "Perfume Giveaway",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; font-family:Arial, sans-serif; background-color:#f7f2f5; display:flex; justify-content:center; align-items:center;'>\n\n  <style>\n    @media screen and (max-width: 768px) {\n      .giveaway-wrapper {\n        flex-direction: column !important;\n        max-width: 95% !important;\n        border-radius: 12px !important;\n      }\n      .giveaway-image img {\n        width: 100% !important;\n        height: auto !important;\n        object-fit: cover;\n      }\n      .giveaway-text {\n        text-align: center !important;\n        padding: 20px 16px !important;\n        align-items: center !important;\n      }\n      .giveaway-text h1 {\n        font-size: 26px !important;\n      }\n      .giveaway-text h2 {\n        font-size: 16px !important;\n      }\n      .giveaway-text p {\n        font-size: 13px !important;\n      }\n      .giveaway-text button {\n        font-size: 13px !important;\n        padding: 8px 16px !important;\n        width: 100% !important;\n        max-width: 240px !important;\n      }\n    }\n  </style>\n\n  <div class='giveaway-wrapper' style='display:flex; margin:100px auto;flex-direction:row; max-width:700px; width:100%; background-color:#fff4fa; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,0.2); overflow:hidden;'>\n\n    <!-- Left Column: Text -->\n    <form data-gjs-type='column' class='giveaway-text' style='flex:1; padding:40px 30px; display:flex; flex-direction:column; justify-content:center;'>\n      <h2 style='font-size:22px; color:#000; margin:0;'>Black Friday</h2>\n      <h1 style='font-size:48px; font-family:Playfair Display, serif; font-weight:bold; color:#000; margin:10px 0;'>GIVEAWAY</h1>\n      <p style='font-size:16px; color:#444; margin-bottom:20px;'>Until 28-10-2025</p>\n      <button style='width:360px;padding:12px 28px; background-color:#865A9D; color:#fff; font-size:16px; border:1px solid #ddd; border-radius:6px; cursor:pointer; box-shadow:0 4px 10px rgba(0,0,0,0.1);'>JOIN NOW</button>\n    </form>\n\n    <!-- Right Column: Image -->\n    <div class='giveaway-image' style='flex:1; display:flex; justify-content:center; align-items:center;'>\n      <img src='/wp-content/plugins/ysleadgen/assets/images/form-images/PerfumeElegance.webp' alt='Perfume Giveaway' style='width:100%; height:auto; object-fit:contain;'>\n    </div>\n\n  </div>\n</body>"
            }
          ]
        }
      ]
    },
    {
      "id": "formtemplate-18",
      "category": "Call to Action",
      "image": "wellnessprog.webp",
      "pages": [
        {
          "name": "Wellness Program",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; font-family:Arial, sans-serif; background:#f8EEED; min-height:100vh; display:flex; align-items:center; justify-content:center;'>\n\n  <style>\n    @media (max-width: 768px) {\n      .popup-wrapper {\n        flex-direction: column !important;\n        margin: 40px 10px !important;\n        max-width: 95% !important;\n        border-radius: 0 !important;\n      }\n      .popup-left, .popup-right {\n        width: 100% !important;\n      }\n      .popup-left {\n        padding: 30px 20px !important;\n        text-align: center !important;\n        align-items: center !important;\n      }\n      .popup-left button {\n        margin-top: 20px !important;\n        width: 100% !important;\n      }\n      .popup-right img {\n        height: auto !important;\n      }\n    }\n  </style>\n\n  <div class='popup-wrapper' data-gjs-type='column' style='display:flex; flex-direction:row; flex-wrap:nowrap; width:100%; max-width:700px; background-color:#ffffff; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.1); position:relative; margin:100px auto; border-radius:16px;'>\n\n    <!-- Content Section (Left on Desktop, Bottom on Mobile) -->\n    <form class='popup-left' data-gjs-type='column' style='width:50%; padding:50px 40px; background-color:#f8EEED; display:flex; flex-direction:column; justify-content:center;'>\n      <h3 style='font-size:20px; color:#c74b61; font-family:cursive; margin-bottom:8px;'>Women's Wellness</h3>\n      <h1 style='font-size:40px; font-weight:bold; color:#c74b61; margin-bottom:10px;'>Program</h1>\n      <p style='font-size:16px; color:#000; margin-bottom:20px;'>Health, Hormones<br>& Confidence</p>\n      <p style='font-size:16px; color:#111; margin-bottom:4px; font-weight:bold;'>Dr. AYESHA NAIR</p>\n      <p style='font-size:14px; color:#555; margin-bottom:30px;'>Consultant Gynecologist</p>\n             <button type='submit' style='width:200px;padding:14px 28px; background-color:#c74b61; color:#fff; font-size:16px; font-weight:bold; border:1px solid #ddd; border-radius:6px; cursor:pointer;'>Reserve Your Slot</button>\n      </form>\n   \n\n    <!-- Image Section (Right on Desktop, Top on Mobile) -->\n    <div class='popup-right' style='width:50%; background-color:#f8EEED; display:flex; justify-content:center; align-items:center;'>\n      <img src='/wp-content/plugins/ysleadgen/assets/images/form-images/Wellnessprogram.webp' alt='Doctor Ayesha Nair' style='width:100%; height:100%; object-fit:cover; display:block;'>\n    </div>\n\n  </div>\n</body>"
            }
          ]
        }
      ]
    },
    {
      "id": "formtemplate-19",
      "category": "Call to Action",
      "image": "reward.webp",
      "pages": [
        {
          "name": "Refer & Earn Premium",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; font-family:Arial, sans-serif; min-height:100vh; display:flex; align-items:center; justify-content:center;'>\n  <style>\n    @media (max-width: 768px) {\n      .popup-wrapper {\n        flex-direction: column !important;\n        margin: 40px 10px !important;\n        max-width: 100% !important;\n        border-radius: 0 !important;\n      }\n      .popup-left, .popup-right {\n        width: 100% !important;\n      }\n      .popup-left {\n        padding: 30px 20px !important;\n        text-align: center !important;\n        align-items: center !important;\n      }\n      .popup-left h1 {\n        font-size: 28px !important;\n      }\n      .popup-left p {\n        font-size: 14px !important;\n      }\n      .popup-left button {\n        margin-top: 20px !important;\n      }\n      .popup-right img {\n        width: 100% !important;\n        height: auto !important;\n        object-fit: contain !important;\n      }\n    }\n  </style>\n\n  <div class='popup-wrapper' data-gjs-type='column' style='display:flex; flex-direction:row; flex-wrap:nowrap; max-width:750px; width:95%; background-color:#e83226; border-radius:0; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.1); position:relative; margin:100px auto;'>\n\n    <!-- Left Column (Text Content) -->\n    <form class='popup-left' data-gjs-type='column' style='background-color:#e83226; color:white; flex:1 1 400px; padding:50px 40px; display:flex; flex-direction:column; justify-content:center;'>\n      <div style='margin-bottom:20px;'>\n        <span style='display:inline-block; padding:4px 10px; font-size:65px; font-weight:bold;'>R <span style='font-weight:normal;'>RewarFi</span></span>\n      </div>\n      <h1 style='font-size:38px; font-weight:bold; margin-bottom:12px;'>Refer & Earn<br>Premium</h1>\n      <p style='font-size:16px; color:#fff; margin-bottom:30px;'>Invite your friends and get Premium 1 month free for each signup.</p>\n      <button style='width:200px;padding:14px 28px; background-color:#ffffff; color:#000000; font-size:16px; font-weight:bold; border:1px solid #ddd; cursor:pointer;'>Invite Now</button>    </form>\n\n    <!-- Right Column (Image) -->\n    <div class='popup-right' style='flex:1 1 350px; background-color:#e83226; display:flex; justify-content:center; align-items:center;'>\n      <img src='/wp-content/plugins/ysleadgen/assets/images/form-images/ManAnnouncing.webp' alt='Refer Friend' style='width:100%; height:100%; object-fit:cover;'>\n    </div>\n\n  </div>\n</body>"
            }
          ]
        }
      ]
    },
    {
      "id": "formtemplate-20",
      "category": "Coupon & Discount",
      "image": "Black-tag-preview.webp",
      "pages": [
        {
          "name": "Black Friday Tag Popup",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0;padding:0;height:100vh;width:100vw;font-family:Poppins,sans-serif;display:flex;justify-content:center;align-items:center;'><div data-gjs-type='column' style='margin:100px auto 40px auto;width:100%;max-width:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:8px;overflow:hidden'><div style='width:100%'><img src='/wp-content/plugins/ysleadgen/assets/images/form-images/Black-tag.webp' alt='Black Friday' style='width:100%;height:auto;display:block;vertical-align:bottom;margin:0;padding:0;border:1px solid #ddd;line-height:0;'></div><form data-gjs-type='column' style='width:100%;padding:20px 15px;text-align:center;display:flex;flex-direction:column;align-items:center;background-color:#171617;color:#ffffff'><div data-gjs-type='divider' style='width:90px;height:5px;background-color:#ffffff;margin:8px auto'></div><p style='font-size:14px;letter-spacing:1px;margin:8px 0 15px;color:#ffffff'>UPTO 60% OFF</p><button type='submit' style='padding:10px 24px;background:#F00;color:#fff;font-size:14px;font-weight:bold;border:1px solid #ddd;border-radius:4px;cursor:pointer'>SHOP NOW</button></form></div></body>"
            }
          ]
        }
      ]
    },
    {
      "id": "formtemplate-21",
      "category": "Contact",
      "image": "ChristmasContact.webp",
      "pages": [
        {
          "name": "Christmas Get In Touch Popup",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; height:100vh; width:100vw; font-family:Poppins, sans-serif; display:flex; justify-content:center; align-items:center;'>\n  <div data-gjs-type='column' style='margin:40px auto; max-width:380px; width:100%; background:linear-gradient(180deg,#6b0f0f,#4a0a0a); border-radius:18px; overflow:hidden; box-shadow:0 20px 40px rgba(0,0,0,0.35); position:relative;'>\n\n    <img data-gjs-type='image' src='/wp-content/plugins/ysleadgen/assets/images/form-images/Christmas-Header.webp' alt='Christmas Header' style='width:100%; height:auto; display:block; padding:20px 10px 10px;'>\n\n    <!-- Content -->\n    <form data-gjs-type='column' style='padding:10px 24px 26px; text-align:center; display:flex; flex-direction:column; align-items:center;'>\n      <h1 style='font-size:28px; font-weight:700; color:#f6d48f; margin:0 0 6px;'>Get In Touch</h1>\n      <p style='font-size:14px; color:#f2e6d0; margin:0 0 20px;'>Have a question or idea? Drop us a message</p>\n\n      <input type='text' name='name' placeholder='Name' required style='width:100%; max-width:300px; padding:12px 14px; margin-bottom:12px; border:1px solid #ddd; border-radius:10px; font-size:14px;'>\n\n      <input type='email' name='email' placeholder='Email' required style='width:100%; max-width:300px; padding:12px 14px; margin-bottom:12px; border:1px solid #ddd; border-radius:10px; font-size:14px;'>\n\n      <textarea name='message' placeholder='Message' rows='4' style='width:100%; max-width:300px; padding:12px 14px; margin-bottom:14px; border:1px solid #ddd; border-radius:10px; font-size:14px; resize:none;'></textarea>\n\n      <button type='submit' data-gjs-type='button' style='width:100%; max-width:300px; background-color:#f6d48f; color:#6b0f0f; padding:14px; border:1px solid #ddd; border-radius:12px; font-size:16px; font-weight:600; cursor:pointer;'>Submit</button>\n    </form>\n  </div>\n</body>"
            }
          ]
        }
      ]
    },
    {
      "id": "formtemplate-22",
      "category": "Contact",
      "image": "SantaContact.webp",
      "pages": [
        {
          "name": "Santa Contact Us Popup",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; font-family:Poppins, sans-serif;'>\n\n  <!-- Center Wrapper -->\n  <div data-gjs-type='column' style='min-height:100vh; display:flex; justify-content:center; align-items:center;'>\n\n    <!-- Popup Container -->\n    <div data-gjs-type='column' style='display:flex; flex-direction:row; max-width:760px; width:100%; background:#f3f3f3; border-radius:26px; overflow:hidden; box-shadow:0 25px 60px rgba(0,0,0,0.35); position:relative;'>\n\n      <!-- Left Image -->\n      <img data-gjs-type='image' src='/wp-content/plugins/ysleadgen/assets/images/form-images/Hide-and-seek.webp' alt='Santa Image' style='width:45%; min-height:100%; object-fit:cover; display:block;'>\n\n      <!-- Right Content -->\n      <form data-gjs-type='column' style='width:55%; padding:40px 36px; display:flex; flex-direction:column; justify-content:center;'>\n\n        <h1 style='font-size:44px; font-weight:800; color:#b62b2b; margin:0 0 10px;'>Contact us now</h1>\n        <p style='font-size:16px; color:#333; margin:0 0 26px;'>Have a question or idea? Drop us a message</p>\n\n        <input type='text' name='name' placeholder='Name' required style='width:100%; padding:14px 16px; margin-bottom:14px; border-radius:18px; border:1px solid #ccc; font-size:15px;'>\n\n        <input type='email' name='email' placeholder='Email' required style='width:100%; padding:14px 16px; margin-bottom:14px; border-radius:18px; border:1px solid #ccc; font-size:15px;'>\n\n        <textarea name='message' placeholder='Message' rows='4' style='width:100%; padding:14px 16px; margin-bottom:22px; border-radius:18px; border:1px solid #ccc; font-size:15px; resize:none;'></textarea>\n\n        <button type='submit' data-gjs-type='button' style='width:100%; background-color:#c53030; color:#ffffff; padding:16px; border:1px solid #ddd; border-radius:26px; font-size:18px; font-weight:600; cursor:pointer;'>Submit</button>\n\n      </form>\n\n    </div>\n  </div>\n</body>"
            }
          ]
        }
      ]
    }
  ]
}