Contact PopularNowOn – We’d Love to Hear From You!<\/title>\n <meta name=\"description\" content=\"Get in touch with PopularNowOn team. We're here to help with your questions, feedback, and suggestions for new tools. Fast response guaranteed!\">\n <meta name=\"keywords\" content=\"contact PopularNowOn, support, feedback, suggestions, help, customer service\">\n \n <style>\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n \n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n background-color: #F0EEE6;\n color: #000000;\n line-height: 1.6;\n overflow-x: hidden;\n }\n \n .container {\n max-width: 1100px;\n margin: 0 auto;\n padding: 20px;\n }\n \n \/* Header Section *\/\n .header-section {\n text-align: center;\n padding: 60px 0 40px;\n background: linear-gradient(135deg, #BCD1CA 0%, #CBCADB 100%);\n margin: -20px -20px 40px -20px;\n position: relative;\n overflow: hidden;\n }\n \n .header-section::before {\n content: '';\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: repeating-linear-gradient(\n 45deg,\n transparent,\n transparent 10px,\n rgba(120, 141, 92, 0.1) 10px,\n rgba(120, 141, 92, 0.1) 20px\n );\n animation: float 20s linear infinite;\n pointer-events: none;\n }\n \n @keyframes float {\n 0% { transform: rotate(0deg) translateX(0px); }\n 100% { transform: rotate(360deg) translateX(20px); }\n }\n \n .header-content {\n position: relative;\n z-index: 2;\n }\n \n h1 {\n font-size: clamp(2rem, 5vw, 3.5rem);\n font-weight: 800;\n margin-bottom: 20px;\n color: #000;\n text-shadow: 2px 2px 0px rgba(217, 119, 87, 0.3);\n animation: slideInDown 1s ease-out;\n }\n \n @keyframes slideInDown {\n from {\n opacity: 0;\n transform: translateY(-50px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n \n .subtitle {\n font-size: clamp(1.1rem, 2.5vw, 1.4rem);\n font-weight: 600;\n margin-bottom: 30px;\n color: #000;\n animation: slideInUp 1s ease-out 0.3s both;\n }\n \n @keyframes slideInUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n \n .quick-stats {\n display: flex;\n justify-content: center;\n gap: 40px;\n margin-top: 40px;\n animation: fadeIn 1s ease-out 0.6s both;\n }\n \n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n \n .stat {\n text-align: center;\n }\n \n .stat-number {\n font-size: 2.5rem;\n font-weight: 900;\n color: #D97757;\n display: block;\n line-height: 1;\n }\n \n .stat-label {\n font-size: 0.9rem;\n font-weight: 600;\n color: #000;\n margin-top: 5px;\n }\n \n \/* Main Content Grid *\/\n .main-content {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 40px;\n margin-bottom: 60px;\n }\n \n \/* Contact Form *\/\n .contact-form-section {\n background: #CBCADB;\n padding: 40px;\n border-radius: 15px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n transform: translateY(20px);\n animation: slideInLeft 1s ease-out 0.9s both;\n }\n \n @keyframes slideInLeft {\n from {\n opacity: 0;\n transform: translateX(-50px) translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateX(0) translateY(0);\n }\n }\n \n .contact-form-section h2 {\n font-size: 2rem;\n font-weight: 700;\n margin-bottom: 10px;\n color: #000;\n }\n \n .contact-form-section p {\n margin-bottom: 30px;\n color: #000;\n font-size: 1.1rem;\n }\n \n .form-group {\n margin-bottom: 25px;\n position: relative;\n }\n \n .form-label {\n display: block;\n font-weight: 600;\n margin-bottom: 8px;\n color: #000;\n font-size: 1rem;\n }\n \n .form-input,\n .form-textarea,\n .form-select {\n width: 100%;\n padding: 15px 20px;\n border: 2px solid #6A9BCD;\n border-radius: 10px;\n font-size: 16px;\n background: #F0EEE6;\n color: #000;\n transition: all 0.3s ease;\n font-family: inherit;\n }\n \n .form-input:focus,\n .form-textarea:focus,\n .form-select:focus {\n outline: none;\n border-color: #D97757;\n box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.2);\n transform: translateY(-2px);\n }\n \n .form-textarea {\n min-height: 120px;\n resize: vertical;\n }\n \n .character-count {\n position: absolute;\n bottom: -20px;\n right: 0;\n font-size: 0.8rem;\n color: #6A9BCD;\n font-weight: 500;\n }\n \n .submit-btn {\n width: 100%;\n padding: 18px 30px;\n background: linear-gradient(135deg, #D97757 0%, #C05D3D 100%);\n color: #000;\n border: none;\n border-radius: 10px;\n font-size: 1.1rem;\n font-weight: 700;\n cursor: pointer;\n transition: all 0.3s ease;\n text-transform: uppercase;\n letter-spacing: 1px;\n box-shadow: 0 5px 15px rgba(217, 119, 87, 0.3);\n }\n \n .submit-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 8px 25px rgba(217, 119, 87, 0.4);\n background: linear-gradient(135deg, #C05D3D 0%, #D97757 100%);\n }\n \n .submit-btn:active {\n transform: translateY(-1px);\n }\n \n \/* Contact Info *\/\n .contact-info-section {\n transform: translateY(20px);\n animation: slideInRight 1s ease-out 1.2s both;\n }\n \n @keyframes slideInRight {\n from {\n opacity: 0;\n transform: translateX(50px) translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateX(0) translateY(0);\n }\n }\n \n .info-card {\n background: #BCD1CA;\n padding: 30px;\n border-radius: 15px;\n margin-bottom: 25px;\n border-left: 5px solid #788D5C;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n cursor: pointer;\n }\n \n .info-card:hover {\n transform: translateY(-5px) scale(1.02);\n box-shadow: 0 15px 35px rgba(0,0,0,0.15);\n }\n \n .info-card h3 {\n font-size: 1.4rem;\n font-weight: 700;\n margin-bottom: 15px;\n color: #000;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n \n .info-icon {\n width: 24px;\n height: 24px;\n background: #D97757;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 900;\n color: #F0EEE6;\n font-size: 0.8rem;\n }\n \n .info-card p {\n color: #000;\n margin-bottom: 15px;\n font-size: 1rem;\n }\n \n .info-action-btn {\n display: inline-block;\n padding: 10px 20px;\n background: #6A9BCD;\n color: #000;\n text-decoration: none;\n border-radius: 8px;\n font-weight: 600;\n transition: all 0.3s ease;\n font-size: 0.9rem;\n }\n \n .info-action-btn:hover {\n background: #5A8BBD;\n transform: scale(1.05);\n }\n \n \/* FAQ Section *\/\n .faq-section {\n background: #F0EEE6;\n padding: 50px 0;\n margin-top: 60px;\n }\n \n .faq-section h2 {\n text-align: center;\n font-size: 2.5rem;\n font-weight: 700;\n margin-bottom: 40px;\n color: #000;\n }\n \n .faq-container {\n max-width: 800px;\n margin: 0 auto;\n }\n \n .faq-item {\n background: #CBCADB;\n margin-bottom: 15px;\n border-radius: 10px;\n overflow: hidden;\n transition: all 0.3s ease;\n }\n \n .faq-item:hover {\n transform: translateY(-2px);\n box-shadow: 0 5px 20px rgba(0,0,0,0.1);\n }\n \n .faq-question {\n padding: 25px 30px;\n cursor: pointer;\n font-weight: 600;\n font-size: 1.1rem;\n color: #000;\n display: flex;\n justify-content: space-between;\n align-items: center;\n transition: background-color 0.3s ease;\n }\n \n .faq-question:hover {\n background-color: #BCD1CA;\n }\n \n .faq-toggle {\n width: 30px;\n height: 30px;\n background: #D97757;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #F0EEE6;\n font-weight: 900;\n transition: transform 0.3s ease;\n }\n \n .faq-answer {\n padding: 0 30px;\n max-height: 0;\n overflow: hidden;\n transition: all 0.3s ease;\n background: #BCD1CA;\n }\n \n .faq-answer.active {\n padding: 25px 30px;\n max-height: 200px;\n }\n \n .faq-item.active .faq-toggle {\n transform: rotate(45deg);\n background: #788D5C;\n }\n \n \/* Response Promise *\/\n .response-promise {\n background: linear-gradient(135deg, #788D5C 0%, #6A9BCD 100%);\n padding: 40px;\n border-radius: 15px;\n text-align: center;\n margin: 40px 0;\n color: #F0EEE6;\n position: relative;\n overflow: hidden;\n }\n \n .response-promise::before {\n content: '';\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: repeating-linear-gradient(\n 90deg,\n transparent,\n transparent 20px,\n rgba(240, 238, 230, 0.1) 20px,\n rgba(240, 238, 230, 0.1) 40px\n );\n animation: slide 10s linear infinite;\n }\n \n @keyframes slide {\n 0% { transform: translateX(0); }\n 100% { transform: translateX(40px); }\n }\n \n .response-promise-content {\n position: relative;\n z-index: 2;\n }\n \n .response-promise h3 {\n font-size: 1.8rem;\n font-weight: 700;\n margin-bottom: 15px;\n }\n \n .response-promise p {\n font-size: 1.1rem;\n margin-bottom: 0;\n }\n \n \/* Success Message *\/\n .success-message {\n display: none;\n background: #788D5C;\n color: #F0EEE6;\n padding: 20px;\n border-radius: 10px;\n margin-top: 20px;\n text-align: center;\n font-weight: 600;\n animation: successSlide 0.5s ease-out;\n }\n \n @keyframes successSlide {\n from {\n opacity: 0;\n transform: translateY(-20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n \n \/* Responsive Design *\/\n @media (max-width: 768px) {\n .main-content {\n grid-template-columns: 1fr;\n gap: 30px;\n }\n \n .header-section {\n padding: 40px 0 30px;\n }\n \n .quick-stats {\n flex-direction: column;\n gap: 20px;\n align-items: center;\n }\n \n .stat {\n display: flex;\n align-items: center;\n gap: 15px;\n }\n \n .stat-number {\n font-size: 2rem;\n }\n \n .contact-form-section,\n .response-promise {\n padding: 25px;\n }\n \n .container {\n padding: 15px;\n }\n \n .header-section {\n margin: -15px -15px 30px -15px;\n }\n }\n \n @media (max-width: 480px) {\n .stat {\n flex-direction: column;\n gap: 5px;\n }\n \n .faq-question {\n padding: 20px;\n font-size: 1rem;\n }\n \n .faq-answer.active {\n padding: 20px;\n }\n }\n \n \/* Loading states *\/\n .loading {\n position: relative;\n pointer-events: none;\n }\n \n .loading::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n border: 2px solid #6A9BCD;\n border-top: 2px solid transparent;\n border-radius: 50%;\n animation: spin 1s linear infinite;\n transform: translate(-50%, -50%);\n }\n \n @keyframes spin {\n 0% { transform: translate(-50%, -50%) rotate(0deg); }\n 100% { transform: translate(-50%, -50%) rotate(360deg); }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n \n <div class=\"header-section\">\n <div class=\"header-content\">\n <h1>Let’s Connect!<\/h1>\n <p class=\"subtitle\">Your ideas shape our tools. We’re here to listen, help, and grow together.<\/p>\n \n <div class=\"quick-stats\" id=\"stats-counter\">\n <div class=\"stat\">\n <span class=\"stat-number\" data-target=\"24\">0<\/span>\n <span class=\"stat-label\">Hours Response<\/span>\n <\/div>\n <div class=\"stat\">\n <span class=\"stat-number\" data-target=\"100\">0<\/span>\n <span class=\"stat-label\">Free Tools<\/span>\n <\/div>\n <div class=\"stat\">\n <span class=\"stat-number\" data-target=\"99\">0<\/span>\n <span class=\"stat-label\">Happy Users %<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"main-content\">\n \n <div class=\"contact-form-section\">\n <h2>Drop Us a Message<\/h2>\n <p>Got questions? Suggestions for new tools? Just want to say hi? We’re all ears!<\/p>\n \n <form id=\"contact-form\" novalidate>\n <div class=\"form-group\">\n <label for=\"name\" class=\"form-label\">Your Name *<\/label>\n <input type=\"text\" id=\"name\" name=\"name\" class=\"form-input\" required placeholder=\"What should we call you?\">\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"email\" class=\"form-label\">Email Address *<\/label>\n <input type=\"email\" id=\"email\" name=\"email\" class=\"form-input\" required placeholder=\"your@email.com\">\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"subject\" class=\"form-label\">What’s this about? *<\/label>\n <select id=\"subject\" name=\"subject\" class=\"form-select\" required>\n <option value=\"\">Choose a topic…<\/option>\n <option value=\"tool-suggestion\">\ud83d\udca1 New Tool Suggestion<\/option>\n <option value=\"bug-report\">\ud83d\udc1b Bug Report<\/option>\n <option value=\"feature-request\">\u2b50 Feature Request<\/option>\n <option value=\"general-feedback\">\ud83d\udcac General Feedback<\/option>\n <option value=\"partnership\">\ud83e\udd1d Partnership Inquiry<\/option>\n <option value=\"other\">\ud83e\udd14 Something Else<\/option>\n <\/select>\n <\/div>\n \n <div class=\"form-group\" style=\"position: relative;\">\n <label for=\"message\" class=\"form-label\">Your Message *<\/label>\n <textarea \n id=\"message\" \n name=\"message\" \n class=\"form-textarea\" \n required \n placeholder=\"Tell us more! What's on your mind? The more details, the better we can help.\"\n maxlength=\"1000\"\n ><\/textarea>\n <div class=\"character-count\">\n <span id=\"char-count\">0<\/span>\/1000 characters\n <\/div>\n <\/div>\n \n <button type=\"submit\" class=\"submit-btn\" id=\"submit-btn\">\n Send Message \ud83d\ude80\n <\/button>\n \n <div class=\"success-message\" id=\"success-message\">\n \ud83c\udf89 Thanks! Your message is on its way to our team. We’ll get back to you within 24 hours!\n <\/div>\n <\/form>\n <\/div>\n \n \n <div class=\"contact-info-section\">\n <div class=\"info-card\" onclick=\"handleInfoCardClick('email')\">\n <h3>\n <span class=\"info-icon\">@<\/span>\n Email Us Directly\n <\/h3>\n <p>For immediate attention, shoot us an email. We check our inbox multiple times daily and love hearing from our users!<\/p>\n <a href=\"mailto:hello@popularnowon.com\" class=\"info-action-btn\">hello@popularnowon.com<\/a>\n <\/div>\n \n <div class=\"info-card\" onclick=\"handleInfoCardClick('feature')\">\n <h3>\n <span class=\"info-icon\">\ud83d\udca1<\/span>\n Suggest a Tool\n <\/h3>\n <p>Missing a tool you need? We’re always expanding our collection based on user suggestions. Your idea could be our next big feature!<\/p>\n <a href=\"#contact-form\" class=\"info-action-btn\" onclick=\"setFormSubject('tool-suggestion')\">Suggest Now<\/a>\n <\/div>\n \n <div class=\"info-card\" onclick=\"handleInfoCardClick('bug')\">\n <h3>\n <span class=\"info-icon\">\ud83d\udd27<\/span>\n Report a Bug\n <\/h3>\n <p>Found something that’s not working right? Help us make PopularNowOn better by reporting bugs. Every report helps!<\/p>\n <a href=\"#contact-form\" class=\"info-action-btn\" onclick=\"setFormSubject('bug-report')\">Report Bug<\/a>\n <\/div>\n \n <div class=\"info-card\" onclick=\"handleInfoCardClick('social')\">\n <h3>\n <span class=\"info-icon\">\ud83d\udc4b<\/span>\n Follow Our Journey\n <\/h3>\n <p>Stay updated with new tools, tips, and behind-the-scenes content. Join our growing community of tool enthusiasts!<\/p>\n <a href=\"#\" class=\"info-action-btn\" onclick=\"showSocialOptions()\">Follow Us<\/a>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"response-promise\">\n <div class=\"response-promise-content\">\n <h3>Our Promise to You<\/h3>\n <p>Every message gets a personal response within 24 hours. No bots, no automated replies – just real humans who care about making your experience amazing.<\/p>\n <\/div>\n <\/div>\n \n \n <div class=\"faq-section\">\n <h2>Quick Answers<\/h2>\n <div class=\"faq-container\">\n <div class=\"faq-item\">\n <div class=\"faq-question\" onclick=\"toggleFAQ(this)\">\n <span>How quickly do you respond to messages?<\/span>\n <div class=\"faq-toggle\">+<\/div>\n <\/div>\n <div class=\"faq-answer\">\n <p>We respond to all messages within 24 hours, usually much faster! Our team checks emails throughout the day, so you’ll likely hear back within a few hours during business days.<\/p>\n <\/div>\n <\/div>\n \n <div class=\"faq-item\">\n <div class=\"faq-question\" onclick=\"toggleFAQ(this)\">\n <span>Do you really add tools based on user suggestions?<\/span>\n <div class=\"faq-toggle\">+<\/div>\n <\/div>\n <div class=\"faq-answer\">\n <p>Absolutely! Many of our most popular tools came from user suggestions. If you have an idea for a tool that would be useful, we’d love to hear it and will seriously consider adding it to our collection.<\/p>\n <\/div>\n <\/div>\n \n <div class=\"faq-item\">\n <div class=\"faq-question\" onclick=\"toggleFAQ(this)\">\n <span>Can I request custom features for existing tools?<\/span>\n <div class=\"faq-toggle\">+<\/div>\n <\/div>\n <div class=\"faq-answer\">\n <p>Yes! We’re always looking to improve our existing tools. If you have ideas for new features or improvements, let us know. User feedback drives many of our updates.<\/p>\n <\/div>\n <\/div>\n \n <div class=\"faq-item\">\n <div class=\"faq-question\" onclick=\"toggleFAQ(this)\">\n <span>Is there a way to report bugs or issues?<\/span>\n <div class=\"faq-toggle\">+<\/div>\n <\/div>\n <div class=\"faq-answer\">\n <p>Definitely! Use the contact form above and select “Bug Report” from the dropdown. Include as much detail as possible about what happened and what browser you’re using. We’ll fix it ASAP!<\/p>\n <\/div>\n <\/div>\n \n <div class=\"faq-item\">\n <div class=\"faq-question\" onclick=\"toggleFAQ(this)\">\n <span>Do you offer business partnerships or integrations?<\/span>\n <div class=\"faq-toggle\">+<\/div>\n <\/div>\n <div class=\"faq-answer\">\n <p>We’re open to partnerships that align with our mission of providing free, useful tools. Select “Partnership Inquiry” in the contact form and tell us about your idea. We’d love to explore opportunities!<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n (function() {\n 'use strict';\n \n \/\/ Initialize when DOM is ready\n function initializeContact() {\n initializeForm();\n initializeCounters();\n initializeAnimations();\n setupAccessibility();\n }\n \n \/\/ Form handling\n function initializeForm() {\n const form = document.getElementById('contact-form');\n const messageTextarea = document.getElementById('message');\n const charCount = document.getElementById('char-count');\n const submitBtn = document.getElementById('submit-btn');\n const successMessage = document.getElementById('success-message');\n \n if (!form) return;\n \n \/\/ Character counter\n if (messageTextarea && charCount) {\n messageTextarea.addEventListener('input', function() {\n const count = this.value.length;\n charCount.textContent = count;\n \n \/\/ Visual feedback for character limit\n if (count > 900) {\n charCount.style.color = '#D97757';\n } else if (count > 800) {\n charCount.style.color = '#6A9BCD';\n } else {\n charCount.style.color = '#6A9BCD';\n }\n });\n }\n \n \/\/ Form submission\n form.addEventListener('submit', function(e) {\n e.preventDefault();\n handleFormSubmit(this, submitBtn, successMessage);\n });\n \n \/\/ Real-time validation\n const inputs = form.querySelectorAll('input, textarea, select');\n inputs.forEach(input => {\n input.addEventListener('blur', validateField);\n input.addEventListener('input', clearFieldError);\n });\n }\n \n function validateField(e) {\n const field = e.target;\n const value = field.value.trim();\n let isValid = true;\n let errorMessage = '';\n \n \/\/ Remove existing error styling\n field.style.borderColor = '#6A9BCD';\n \n if (field.hasAttribute('required') && !value) {\n isValid = false;\n errorMessage = 'This field is required';\n } else if (field.type === 'email' && value) {\n const emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n if (!emailRegex.test(value)) {\n isValid = false;\n errorMessage = 'Please enter a valid email address';\n }\n }\n \n if (!isValid) {\n field.style.borderColor = '#D97757';\n showFieldError(field, errorMessage);\n } else {\n clearFieldError(field);\n }\n \n return isValid;\n }\n \n function clearFieldError(e) {\n const field = e.target || e;\n field.style.borderColor = '#6A9BCD';\n const existingError = field.parentNode.querySelector('.field-error');\n if (existingError) {\n existingError.remove();\n }\n }\n \n function showFieldError(field, message) {\n clearFieldError(field);\n const errorDiv = document.createElement('div');\n errorDiv.className = 'field-error';\n errorDiv.style.cssText = 'color: #D97757; font-size: 0.8rem; margin-top: 5px; font-weight: 500;';\n errorDiv.textContent = message;\n field.parentNode.appendChild(errorDiv);\n }\n \n function handleFormSubmit(form, submitBtn, successMessage) {\n \/\/ Validate all fields\n const inputs = form.querySelectorAll('input[required], textarea[required], select[required]');\n let isFormValid = true;\n \n inputs.forEach(input => {\n if (!validateField({ target: input })) {\n isFormValid = false;\n }\n });\n \n if (!isFormValid) {\n \/\/ Scroll to first error\n const firstError = form.querySelector('input[style*=\"rgb(217, 119, 87)\"], textarea[style*=\"rgb(217, 119, 87)\"], select[style*=\"rgb(217, 119, 87)\"]');\n if (firstError) {\n firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });\n firstError.focus();\n }\n return;\n }\n \n \/\/ Show loading state\n const originalText = submitBtn.textContent;\n submitBtn.textContent = 'Sending...';\n submitBtn.classList.add('loading');\n submitBtn.disabled = true;\n \n \/\/ Simulate form submission (replace with actual endpoint)\n setTimeout(() => {\n \/\/ Reset button\n submitBtn.textContent = originalText;\n submitBtn.classList.remove('loading');\n submitBtn.disabled = false;\n \n \/\/ Show success message\n successMessage.style.display = 'block';\n \n \/\/ Reset form\n form.reset();\n document.getElementById('char-count').textContent = '0';\n \n \/\/ Hide success message after 5 seconds\n setTimeout(() => {\n successMessage.style.display = 'none';\n }, 5000);\n \n \/\/ Scroll to success message\n successMessage.scrollIntoView({ behavior: 'smooth', block: 'center' });\n \n }, 2000);\n }\n \n \/\/ Animated counters\n function initializeCounters() {\n const counters = document.querySelectorAll('.stat-number');\n let started = false;\n \n function startCounting() {\n if (started) return;\n started = true;\n \n counters.forEach(counter => {\n const target = parseInt(counter.dataset.target);\n const increment = target \/ 100;\n let current = 0;\n \n const timer = setInterval(() => {\n current += increment;\n if (current >= target) {\n current = target;\n clearInterval(timer);\n }\n counter.textContent = Math.floor(current);\n }, 30);\n });\n }\n \n \/\/ Start counting when stats come into view\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n startCounting();\n }\n });\n });\n \n const statsContainer = document.getElementById('stats-counter');\n if (statsContainer) {\n observer.observe(statsContainer);\n }\n }\n \n \/\/ Animation triggers\n function initializeAnimations() {\n \/\/ Add scroll-triggered animations for better performance\n const animatedElements = document.querySelectorAll('.contact-form-section, .contact-info-section');\n \n const animationObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.opacity = '1';\n entry.target.style.transform = 'translateY(0)';\n }\n });\n }, { threshold: 0.1 });\n \n animatedElements.forEach(el => {\n animationObserver.observe(el);\n });\n }\n \n \/\/ Accessibility improvements\n function setupAccessibility() {\n \/\/ Enhanced keyboard navigation for FAQ\n const faqQuestions = document.querySelectorAll('.faq-question');\n faqQuestions.forEach(question => {\n question.setAttribute('tabindex', '0');\n question.setAttribute('role', 'button');\n question.setAttribute('aria-expanded', 'false');\n \n question.addEventListener('keydown', function(e) {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n toggleFAQ(this);\n }\n });\n });\n \n \/\/ Form accessibility\n const form = document.getElementById('contact-form');\n if (form) {\n form.setAttribute('novalidate', 'true');\n }\n }\n \n \/\/ FAQ toggle functionality\n window.toggleFAQ = function(questionElement) {\n const faqItem = questionElement.parentNode;\n const answer = faqItem.querySelector('.faq-answer');\n const toggle = questionElement.querySelector('.faq-toggle');\n const isActive = faqItem.classList.contains('active');\n \n \/\/ Close all other FAQs\n document.querySelectorAll('.faq-item.active').forEach(item => {\n if (item !== faqItem) {\n item.classList.remove('active');\n item.querySelector('.faq-answer').classList.remove('active');\n item.querySelector('.faq-question').setAttribute('aria-expanded', 'false');\n }\n });\n \n \/\/ Toggle current FAQ\n if (isActive) {\n faqItem.classList.remove('active');\n answer.classList.remove('active');\n questionElement.setAttribute('aria-expanded', 'false');\n } else {\n faqItem.classList.add('active');\n answer.classList.add('active');\n questionElement.setAttribute('aria-expanded', 'true');\n \n \/\/ Smooth scroll to show full answer\n setTimeout(() => {\n answer.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }, 300);\n }\n };\n \n \/\/ Info card interactions\n window.handleInfoCardClick = function(type) {\n const actions = {\n email: () => {\n \/\/ Analytics or tracking can be added here\n console.log('Email card clicked');\n },\n feature: () => {\n document.getElementById('subject').value = 'tool-suggestion';\n document.getElementById('contact-form').scrollIntoView({ behavior: 'smooth' });\n },\n bug: () => {\n document.getElementById('subject').value = 'bug-report';\n document.getElementById('contact-form').scrollIntoView({ behavior: 'smooth' });\n },\n social: () => {\n showSocialOptions();\n }\n };\n \n if (actions[type]) {\n actions[type]();\n }\n };\n \n \/\/ Set form subject\n window.setFormSubject = function(value) {\n const subjectSelect = document.getElementById('subject');\n if (subjectSelect) {\n subjectSelect.value = value;\n subjectSelect.dispatchEvent(new Event('change'));\n }\n };\n \n \/\/ Social options modal (placeholder)\n window.showSocialOptions = function() {\n const socialMessage = document.createElement('div');\n socialMessage.style.cssText = `\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background: #CBCADB;\n padding: 30px;\n border-radius: 15px;\n box-shadow: 0 20px 60px rgba(0,0,0,0.3);\n z-index: 10000;\n text-align: center;\n max-width: 400px;\n width: 90%;\n `;\n \n socialMessage.innerHTML = `\n <h3 style=\"margin-bottom: 20px; color: #000;\">Follow PopularNowOn<\/h3>\n <p style=\"margin-bottom: 25px; color: #000;\">Stay updated with new tools and features!<\/p>\n <div style=\"display: flex; gap: 15px; justify-content: center; margin-bottom: 20px;\">\n <a href=\"#\" style=\"padding: 10px 20px; background: #6A9BCD; color: #000; text-decoration: none; border-radius: 8px; font-weight: 600;\">Twitter<\/a>\n <a href=\"#\" style=\"padding: 10px 20px; background: #6A9BCD; color: #000; text-decoration: none; border-radius: 8px; font-weight: 600;\">LinkedIn<\/a>\n <a href=\"#\" style=\"padding: 10px 20px; background: #6A9BCD; color: #000; text-decoration: none; border-radius: 8px; font-weight: 600;\">Newsletter<\/a>\n <\/div>\n <button onclick=\"this.parentNode.remove()\" style=\"padding: 8px 16px; background: #D97757; color: #000; border: none; border-radius: 5px; cursor: pointer; font-weight: 600;\">Close<\/button>\n `;\n \n \/\/ Create backdrop\n const backdrop = document.createElement('div');\n backdrop.style.cssText = `\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0,0,0,0.5);\n z-index: 9999;\n `;\n \n backdrop.addEventListener('click', () => {\n backdrop.remove();\n socialMessage.remove();\n });\n \n document.body.appendChild(backdrop);\n document.body.appendChild(socialMessage);\n \n \/\/ Auto-close after 10 seconds\n setTimeout(() => {\n if (socialMessage.parentNode) {\n backdrop.remove();\n socialMessage.remove();\n }\n }, 10000);\n };\n \n \/\/ Enhanced smooth scrolling for internal links\n document.addEventListener('click', function(e) {\n if (e.target.tagName === 'A' && e.target.getAttribute('href') === '#contact-form') {\n e.preventDefault();\n document.getElementById('contact-form').scrollIntoView({ \n behavior: 'smooth',\n block: 'start'\n });\n }\n });\n \n \/\/ Performance optimizations\n function optimizePerformance() {\n \/\/ Lazy load background animations\n if ('IntersectionObserver' in window) {\n const backgroundElements = document.querySelectorAll('.header-section, .response-promise');\n \n const bgObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('animate-bg');\n }\n });\n });\n \n backgroundElements.forEach(el => bgObserver.observe(el));\n }\n \n \/\/ Debounced scroll handler\n let scrollTimeout;\n window.addEventListener('scroll', () => {\n if (scrollTimeout) {\n clearTimeout(scrollTimeout);\n }\n scrollTimeout = setTimeout(() => {\n \/\/ Any scroll-based optimizations can go here\n }, 100);\n }, { passive: true });\n }\n \n \/\/ Initialize everything\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', () => {\n initializeContact();\n optimizePerformance();\n });\n } else {\n initializeContact();\n optimizePerformance();\n }\n \n \/\/ Error handling\n window.addEventListener('error', function(e) {\n console.warn('Contact page error:', e.message);\n \/\/ Graceful error handling - don't break user experience\n });\n \n \/\/ Prevent form submission on Enter in text inputs (except textarea)\n document.addEventListener('keydown', function(e) {\n if (e.key === 'Enter' && e.target.tagName === 'INPUT') {\n e.preventDefault();\n \/\/ Move to next input or submit if it's the last one\n const form = e.target.closest('form');\n if (form) {\n const inputs = Array.from(form.querySelectorAll('input, select, textarea'));\n const currentIndex = inputs.indexOf(e.target);\n if (currentIndex < inputs.length - 1) {\n inputs[currentIndex + 1].focus();\n } else {\n \/\/ Focus submit button\n const submitBtn = form.querySelector('button[type=\"submit\"]');\n if (submitBtn) submitBtn.focus();\n }\n }\n }\n });\n \n })();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Contact PopularNowOn – We’d Love to Hear From You! Let’s Connect! Your ideas shape our tools. We’re here to listen, … <\/p>\n<p class=\"read-more-container\"><a title=\"Contact\" class=\"read-more button\" href=\"https:\/\/vijaypandit.in\/?page_id=40#more-40\" aria-label=\"More on Contact\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-40","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vijaypandit.in\/index.php?rest_route=\/wp\/v2\/pages\/40","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vijaypandit.in\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vijaypandit.in\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vijaypandit.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vijaypandit.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=40"}],"version-history":[{"count":2,"href":"https:\/\/vijaypandit.in\/index.php?rest_route=\/wp\/v2\/pages\/40\/revisions"}],"predecessor-version":[{"id":442,"href":"https:\/\/vijaypandit.in\/index.php?rest_route=\/wp\/v2\/pages\/40\/revisions\/442"}],"wp:attachment":[{"href":"https:\/\/vijaypandit.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=40"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":40,"date":"2018-09-08T23:41:28","date_gmt":"2018-09-08T23:41:28","guid":{"rendered":"https:\/\/sites.generatepress.com\/marketer\/?page_id=40"},"modified":"2025-08-01T06:57:42","modified_gmt":"2025-08-01T06:57:42","slug":"contact","status":"publish","type":"page","link":"https:\/\/vijaypandit.in\/?page_id=40","title":{"rendered":"Contact"},"content":{"rendered":"\n\n\n\n \n \n Contact PopularNowOn – We’d Love to Hear From You!<\/title>\n <meta name=\"description\" content=\"Get in touch with PopularNowOn team. We're here to help with your questions, feedback, and suggestions for new tools. Fast response guaranteed!\">\n <meta name=\"keywords\" content=\"contact PopularNowOn, support, feedback, suggestions, help, customer service\">\n \n <style>\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n \n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n background-color: #F0EEE6;\n color: #000000;\n line-height: 1.6;\n overflow-x: hidden;\n }\n \n .container {\n max-width: 1100px;\n margin: 0 auto;\n padding: 20px;\n }\n \n \/* Header Section *\/\n .header-section {\n text-align: center;\n padding: 60px 0 40px;\n background: linear-gradient(135deg, #BCD1CA 0%, #CBCADB 100%);\n margin: -20px -20px 40px -20px;\n position: relative;\n overflow: hidden;\n }\n \n .header-section::before {\n content: '';\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: repeating-linear-gradient(\n 45deg,\n transparent,\n transparent 10px,\n rgba(120, 141, 92, 0.1) 10px,\n rgba(120, 141, 92, 0.1) 20px\n );\n animation: float 20s linear infinite;\n pointer-events: none;\n }\n \n @keyframes float {\n 0% { transform: rotate(0deg) translateX(0px); }\n 100% { transform: rotate(360deg) translateX(20px); }\n }\n \n .header-content {\n position: relative;\n z-index: 2;\n }\n \n h1 {\n font-size: clamp(2rem, 5vw, 3.5rem);\n font-weight: 800;\n margin-bottom: 20px;\n color: #000;\n text-shadow: 2px 2px 0px rgba(217, 119, 87, 0.3);\n animation: slideInDown 1s ease-out;\n }\n \n @keyframes slideInDown {\n from {\n opacity: 0;\n transform: translateY(-50px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n \n .subtitle {\n font-size: clamp(1.1rem, 2.5vw, 1.4rem);\n font-weight: 600;\n margin-bottom: 30px;\n color: #000;\n animation: slideInUp 1s ease-out 0.3s both;\n }\n \n @keyframes slideInUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n \n .quick-stats {\n display: flex;\n justify-content: center;\n gap: 40px;\n margin-top: 40px;\n animation: fadeIn 1s ease-out 0.6s both;\n }\n \n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n \n .stat {\n text-align: center;\n }\n \n .stat-number {\n font-size: 2.5rem;\n font-weight: 900;\n color: #D97757;\n display: block;\n line-height: 1;\n }\n \n .stat-label {\n font-size: 0.9rem;\n font-weight: 600;\n color: #000;\n margin-top: 5px;\n }\n \n \/* Main Content Grid *\/\n .main-content {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 40px;\n margin-bottom: 60px;\n }\n \n \/* Contact Form *\/\n .contact-form-section {\n background: #CBCADB;\n padding: 40px;\n border-radius: 15px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n transform: translateY(20px);\n animation: slideInLeft 1s ease-out 0.9s both;\n }\n \n @keyframes slideInLeft {\n from {\n opacity: 0;\n transform: translateX(-50px) translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateX(0) translateY(0);\n }\n }\n \n .contact-form-section h2 {\n font-size: 2rem;\n font-weight: 700;\n margin-bottom: 10px;\n color: #000;\n }\n \n .contact-form-section p {\n margin-bottom: 30px;\n color: #000;\n font-size: 1.1rem;\n }\n \n .form-group {\n margin-bottom: 25px;\n position: relative;\n }\n \n .form-label {\n display: block;\n font-weight: 600;\n margin-bottom: 8px;\n color: #000;\n font-size: 1rem;\n }\n \n .form-input,\n .form-textarea,\n .form-select {\n width: 100%;\n padding: 15px 20px;\n border: 2px solid #6A9BCD;\n border-radius: 10px;\n font-size: 16px;\n background: #F0EEE6;\n color: #000;\n transition: all 0.3s ease;\n font-family: inherit;\n }\n \n .form-input:focus,\n .form-textarea:focus,\n .form-select:focus {\n outline: none;\n border-color: #D97757;\n box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.2);\n transform: translateY(-2px);\n }\n \n .form-textarea {\n min-height: 120px;\n resize: vertical;\n }\n \n .character-count {\n position: absolute;\n bottom: -20px;\n right: 0;\n font-size: 0.8rem;\n color: #6A9BCD;\n font-weight: 500;\n }\n \n .submit-btn {\n width: 100%;\n padding: 18px 30px;\n background: linear-gradient(135deg, #D97757 0%, #C05D3D 100%);\n color: #000;\n border: none;\n border-radius: 10px;\n font-size: 1.1rem;\n font-weight: 700;\n cursor: pointer;\n transition: all 0.3s ease;\n text-transform: uppercase;\n letter-spacing: 1px;\n box-shadow: 0 5px 15px rgba(217, 119, 87, 0.3);\n }\n \n .submit-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 8px 25px rgba(217, 119, 87, 0.4);\n background: linear-gradient(135deg, #C05D3D 0%, #D97757 100%);\n }\n \n .submit-btn:active {\n transform: translateY(-1px);\n }\n \n \/* Contact Info *\/\n .contact-info-section {\n transform: translateY(20px);\n animation: slideInRight 1s ease-out 1.2s both;\n }\n \n @keyframes slideInRight {\n from {\n opacity: 0;\n transform: translateX(50px) translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateX(0) translateY(0);\n }\n }\n \n .info-card {\n background: #BCD1CA;\n padding: 30px;\n border-radius: 15px;\n margin-bottom: 25px;\n border-left: 5px solid #788D5C;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n cursor: pointer;\n }\n \n .info-card:hover {\n transform: translateY(-5px) scale(1.02);\n box-shadow: 0 15px 35px rgba(0,0,0,0.15);\n }\n \n .info-card h3 {\n font-size: 1.4rem;\n font-weight: 700;\n margin-bottom: 15px;\n color: #000;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n \n .info-icon {\n width: 24px;\n height: 24px;\n background: #D97757;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 900;\n color: #F0EEE6;\n font-size: 0.8rem;\n }\n \n .info-card p {\n color: #000;\n margin-bottom: 15px;\n font-size: 1rem;\n }\n \n .info-action-btn {\n display: inline-block;\n padding: 10px 20px;\n background: #6A9BCD;\n color: #000;\n text-decoration: none;\n border-radius: 8px;\n font-weight: 600;\n transition: all 0.3s ease;\n font-size: 0.9rem;\n }\n \n .info-action-btn:hover {\n background: #5A8BBD;\n transform: scale(1.05);\n }\n \n \/* FAQ Section *\/\n .faq-section {\n background: #F0EEE6;\n padding: 50px 0;\n margin-top: 60px;\n }\n \n .faq-section h2 {\n text-align: center;\n font-size: 2.5rem;\n font-weight: 700;\n margin-bottom: 40px;\n color: #000;\n }\n \n .faq-container {\n max-width: 800px;\n margin: 0 auto;\n }\n \n .faq-item {\n background: #CBCADB;\n margin-bottom: 15px;\n border-radius: 10px;\n overflow: hidden;\n transition: all 0.3s ease;\n }\n \n .faq-item:hover {\n transform: translateY(-2px);\n box-shadow: 0 5px 20px rgba(0,0,0,0.1);\n }\n \n .faq-question {\n padding: 25px 30px;\n cursor: pointer;\n font-weight: 600;\n font-size: 1.1rem;\n color: #000;\n display: flex;\n justify-content: space-between;\n align-items: center;\n transition: background-color 0.3s ease;\n }\n \n .faq-question:hover {\n background-color: #BCD1CA;\n }\n \n .faq-toggle {\n width: 30px;\n height: 30px;\n background: #D97757;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #F0EEE6;\n font-weight: 900;\n transition: transform 0.3s ease;\n }\n \n .faq-answer {\n padding: 0 30px;\n max-height: 0;\n overflow: hidden;\n transition: all 0.3s ease;\n background: #BCD1CA;\n }\n \n .faq-answer.active {\n padding: 25px 30px;\n max-height: 200px;\n }\n \n .faq-item.active .faq-toggle {\n transform: rotate(45deg);\n background: #788D5C;\n }\n \n \/* Response Promise *\/\n .response-promise {\n background: linear-gradient(135deg, #788D5C 0%, #6A9BCD 100%);\n padding: 40px;\n border-radius: 15px;\n text-align: center;\n margin: 40px 0;\n color: #F0EEE6;\n position: relative;\n overflow: hidden;\n }\n \n .response-promise::before {\n content: '';\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: repeating-linear-gradient(\n 90deg,\n transparent,\n transparent 20px,\n rgba(240, 238, 230, 0.1) 20px,\n rgba(240, 238, 230, 0.1) 40px\n );\n animation: slide 10s linear infinite;\n }\n \n @keyframes slide {\n 0% { transform: translateX(0); }\n 100% { transform: translateX(40px); }\n }\n \n .response-promise-content {\n position: relative;\n z-index: 2;\n }\n \n .response-promise h3 {\n font-size: 1.8rem;\n font-weight: 700;\n margin-bottom: 15px;\n }\n \n .response-promise p {\n font-size: 1.1rem;\n margin-bottom: 0;\n }\n \n \/* Success Message *\/\n .success-message {\n display: none;\n background: #788D5C;\n color: #F0EEE6;\n padding: 20px;\n border-radius: 10px;\n margin-top: 20px;\n text-align: center;\n font-weight: 600;\n animation: successSlide 0.5s ease-out;\n }\n \n @keyframes successSlide {\n from {\n opacity: 0;\n transform: translateY(-20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n \n \/* Responsive Design *\/\n @media (max-width: 768px) {\n .main-content {\n grid-template-columns: 1fr;\n gap: 30px;\n }\n \n .header-section {\n padding: 40px 0 30px;\n }\n \n .quick-stats {\n flex-direction: column;\n gap: 20px;\n align-items: center;\n }\n \n .stat {\n display: flex;\n align-items: center;\n gap: 15px;\n }\n \n .stat-number {\n font-size: 2rem;\n }\n \n .contact-form-section,\n .response-promise {\n padding: 25px;\n }\n \n .container {\n padding: 15px;\n }\n \n .header-section {\n margin: -15px -15px 30px -15px;\n }\n }\n \n @media (max-width: 480px) {\n .stat {\n flex-direction: column;\n gap: 5px;\n }\n \n .faq-question {\n padding: 20px;\n font-size: 1rem;\n }\n \n .faq-answer.active {\n padding: 20px;\n }\n }\n \n \/* Loading states *\/\n .loading {\n position: relative;\n pointer-events: none;\n }\n \n .loading::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n border: 2px solid #6A9BCD;\n border-top: 2px solid transparent;\n border-radius: 50%;\n animation: spin 1s linear infinite;\n transform: translate(-50%, -50%);\n }\n \n @keyframes spin {\n 0% { transform: translate(-50%, -50%) rotate(0deg); }\n 100% { transform: translate(-50%, -50%) rotate(360deg); }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n \n <div class=\"header-section\">\n <div class=\"header-content\">\n <h1>Let’s Connect!<\/h1>\n <p class=\"subtitle\">Your ideas shape our tools. We’re here to listen, help, and grow together.<\/p>\n \n <div class=\"quick-stats\" id=\"stats-counter\">\n <div class=\"stat\">\n <span class=\"stat-number\" data-target=\"24\">0<\/span>\n <span class=\"stat-label\">Hours Response<\/span>\n <\/div>\n <div class=\"stat\">\n <span class=\"stat-number\" data-target=\"100\">0<\/span>\n <span class=\"stat-label\">Free Tools<\/span>\n <\/div>\n <div class=\"stat\">\n <span class=\"stat-number\" data-target=\"99\">0<\/span>\n <span class=\"stat-label\">Happy Users %<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"main-content\">\n \n <div class=\"contact-form-section\">\n <h2>Drop Us a Message<\/h2>\n <p>Got questions? Suggestions for new tools? Just want to say hi? We’re all ears!<\/p>\n \n <form id=\"contact-form\" novalidate>\n <div class=\"form-group\">\n <label for=\"name\" class=\"form-label\">Your Name *<\/label>\n <input type=\"text\" id=\"name\" name=\"name\" class=\"form-input\" required placeholder=\"What should we call you?\">\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"email\" class=\"form-label\">Email Address *<\/label>\n <input type=\"email\" id=\"email\" name=\"email\" class=\"form-input\" required placeholder=\"your@email.com\">\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"subject\" class=\"form-label\">What’s this about? *<\/label>\n <select id=\"subject\" name=\"subject\" class=\"form-select\" required>\n <option value=\"\">Choose a topic…<\/option>\n <option value=\"tool-suggestion\">\ud83d\udca1 New Tool Suggestion<\/option>\n <option value=\"bug-report\">\ud83d\udc1b Bug Report<\/option>\n <option value=\"feature-request\">\u2b50 Feature Request<\/option>\n <option value=\"general-feedback\">\ud83d\udcac General Feedback<\/option>\n <option value=\"partnership\">\ud83e\udd1d Partnership Inquiry<\/option>\n <option value=\"other\">\ud83e\udd14 Something Else<\/option>\n <\/select>\n <\/div>\n \n <div class=\"form-group\" style=\"position: relative;\">\n <label for=\"message\" class=\"form-label\">Your Message *<\/label>\n <textarea \n id=\"message\" \n name=\"message\" \n class=\"form-textarea\" \n required \n placeholder=\"Tell us more! What's on your mind? The more details, the better we can help.\"\n maxlength=\"1000\"\n ><\/textarea>\n <div class=\"character-count\">\n <span id=\"char-count\">0<\/span>\/1000 characters\n <\/div>\n <\/div>\n \n <button type=\"submit\" class=\"submit-btn\" id=\"submit-btn\">\n Send Message \ud83d\ude80\n <\/button>\n \n <div class=\"success-message\" id=\"success-message\">\n \ud83c\udf89 Thanks! Your message is on its way to our team. We’ll get back to you within 24 hours!\n <\/div>\n <\/form>\n <\/div>\n \n \n <div class=\"contact-info-section\">\n <div class=\"info-card\" onclick=\"handleInfoCardClick('email')\">\n <h3>\n <span class=\"info-icon\">@<\/span>\n Email Us Directly\n <\/h3>\n <p>For immediate attention, shoot us an email. We check our inbox multiple times daily and love hearing from our users!<\/p>\n <a href=\"mailto:hello@popularnowon.com\" class=\"info-action-btn\">hello@popularnowon.com<\/a>\n <\/div>\n \n <div class=\"info-card\" onclick=\"handleInfoCardClick('feature')\">\n <h3>\n <span class=\"info-icon\">\ud83d\udca1<\/span>\n Suggest a Tool\n <\/h3>\n <p>Missing a tool you need? We’re always expanding our collection based on user suggestions. Your idea could be our next big feature!<\/p>\n <a href=\"#contact-form\" class=\"info-action-btn\" onclick=\"setFormSubject('tool-suggestion')\">Suggest Now<\/a>\n <\/div>\n \n <div class=\"info-card\" onclick=\"handleInfoCardClick('bug')\">\n <h3>\n <span class=\"info-icon\">\ud83d\udd27<\/span>\n Report a Bug\n <\/h3>\n <p>Found something that’s not working right? Help us make PopularNowOn better by reporting bugs. Every report helps!<\/p>\n <a href=\"#contact-form\" class=\"info-action-btn\" onclick=\"setFormSubject('bug-report')\">Report Bug<\/a>\n <\/div>\n \n <div class=\"info-card\" onclick=\"handleInfoCardClick('social')\">\n <h3>\n <span class=\"info-icon\">\ud83d\udc4b<\/span>\n Follow Our Journey\n <\/h3>\n <p>Stay updated with new tools, tips, and behind-the-scenes content. Join our growing community of tool enthusiasts!<\/p>\n <a href=\"#\" class=\"info-action-btn\" onclick=\"showSocialOptions()\">Follow Us<\/a>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"response-promise\">\n <div class=\"response-promise-content\">\n <h3>Our Promise to You<\/h3>\n <p>Every message gets a personal response within 24 hours. No bots, no automated replies – just real humans who care about making your experience amazing.<\/p>\n <\/div>\n <\/div>\n \n \n <div class=\"faq-section\">\n <h2>Quick Answers<\/h2>\n <div class=\"faq-container\">\n <div class=\"faq-item\">\n <div class=\"faq-question\" onclick=\"toggleFAQ(this)\">\n <span>How quickly do you respond to messages?<\/span>\n <div class=\"faq-toggle\">+<\/div>\n <\/div>\n <div class=\"faq-answer\">\n <p>We respond to all messages within 24 hours, usually much faster! Our team checks emails throughout the day, so you’ll likely hear back within a few hours during business days.<\/p>\n <\/div>\n <\/div>\n \n <div class=\"faq-item\">\n <div class=\"faq-question\" onclick=\"toggleFAQ(this)\">\n <span>Do you really add tools based on user suggestions?<\/span>\n <div class=\"faq-toggle\">+<\/div>\n <\/div>\n <div class=\"faq-answer\">\n <p>Absolutely! Many of our most popular tools came from user suggestions. If you have an idea for a tool that would be useful, we’d love to hear it and will seriously consider adding it to our collection.<\/p>\n <\/div>\n <\/div>\n \n <div class=\"faq-item\">\n <div class=\"faq-question\" onclick=\"toggleFAQ(this)\">\n <span>Can I request custom features for existing tools?<\/span>\n <div class=\"faq-toggle\">+<\/div>\n <\/div>\n <div class=\"faq-answer\">\n <p>Yes! We’re always looking to improve our existing tools. If you have ideas for new features or improvements, let us know. User feedback drives many of our updates.<\/p>\n <\/div>\n <\/div>\n \n <div class=\"faq-item\">\n <div class=\"faq-question\" onclick=\"toggleFAQ(this)\">\n <span>Is there a way to report bugs or issues?<\/span>\n <div class=\"faq-toggle\">+<\/div>\n <\/div>\n <div class=\"faq-answer\">\n <p>Definitely! Use the contact form above and select “Bug Report” from the dropdown. Include as much detail as possible about what happened and what browser you’re using. We’ll fix it ASAP!<\/p>\n <\/div>\n <\/div>\n \n <div class=\"faq-item\">\n <div class=\"faq-question\" onclick=\"toggleFAQ(this)\">\n <span>Do you offer business partnerships or integrations?<\/span>\n <div class=\"faq-toggle\">+<\/div>\n <\/div>\n <div class=\"faq-answer\">\n <p>We’re open to partnerships that align with our mission of providing free, useful tools. Select “Partnership Inquiry” in the contact form and tell us about your idea. We’d love to explore opportunities!<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n (function() {\n 'use strict';\n \n \/\/ Initialize when DOM is ready\n function initializeContact() {\n initializeForm();\n initializeCounters();\n initializeAnimations();\n setupAccessibility();\n }\n \n \/\/ Form handling\n function initializeForm() {\n const form = document.getElementById('contact-form');\n const messageTextarea = document.getElementById('message');\n const charCount = document.getElementById('char-count');\n const submitBtn = document.getElementById('submit-btn');\n const successMessage = document.getElementById('success-message');\n \n if (!form) return;\n \n \/\/ Character counter\n if (messageTextarea && charCount) {\n messageTextarea.addEventListener('input', function() {\n const count = this.value.length;\n charCount.textContent = count;\n \n \/\/ Visual feedback for character limit\n if (count > 900) {\n charCount.style.color = '#D97757';\n } else if (count > 800) {\n charCount.style.color = '#6A9BCD';\n } else {\n charCount.style.color = '#6A9BCD';\n }\n });\n }\n \n \/\/ Form submission\n form.addEventListener('submit', function(e) {\n e.preventDefault();\n handleFormSubmit(this, submitBtn, successMessage);\n });\n \n \/\/ Real-time validation\n const inputs = form.querySelectorAll('input, textarea, select');\n inputs.forEach(input => {\n input.addEventListener('blur', validateField);\n input.addEventListener('input', clearFieldError);\n });\n }\n \n function validateField(e) {\n const field = e.target;\n const value = field.value.trim();\n let isValid = true;\n let errorMessage = '';\n \n \/\/ Remove existing error styling\n field.style.borderColor = '#6A9BCD';\n \n if (field.hasAttribute('required') && !value) {\n isValid = false;\n errorMessage = 'This field is required';\n } else if (field.type === 'email' && value) {\n const emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n if (!emailRegex.test(value)) {\n isValid = false;\n errorMessage = 'Please enter a valid email address';\n }\n }\n \n if (!isValid) {\n field.style.borderColor = '#D97757';\n showFieldError(field, errorMessage);\n } else {\n clearFieldError(field);\n }\n \n return isValid;\n }\n \n function clearFieldError(e) {\n const field = e.target || e;\n field.style.borderColor = '#6A9BCD';\n const existingError = field.parentNode.querySelector('.field-error');\n if (existingError) {\n existingError.remove();\n }\n }\n \n function showFieldError(field, message) {\n clearFieldError(field);\n const errorDiv = document.createElement('div');\n errorDiv.className = 'field-error';\n errorDiv.style.cssText = 'color: #D97757; font-size: 0.8rem; margin-top: 5px; font-weight: 500;';\n errorDiv.textContent = message;\n field.parentNode.appendChild(errorDiv);\n }\n \n function handleFormSubmit(form, submitBtn, successMessage) {\n \/\/ Validate all fields\n const inputs = form.querySelectorAll('input[required], textarea[required], select[required]');\n let isFormValid = true;\n \n inputs.forEach(input => {\n if (!validateField({ target: input })) {\n isFormValid = false;\n }\n });\n \n if (!isFormValid) {\n \/\/ Scroll to first error\n const firstError = form.querySelector('input[style*=\"rgb(217, 119, 87)\"], textarea[style*=\"rgb(217, 119, 87)\"], select[style*=\"rgb(217, 119, 87)\"]');\n if (firstError) {\n firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });\n firstError.focus();\n }\n return;\n }\n \n \/\/ Show loading state\n const originalText = submitBtn.textContent;\n submitBtn.textContent = 'Sending...';\n submitBtn.classList.add('loading');\n submitBtn.disabled = true;\n \n \/\/ Simulate form submission (replace with actual endpoint)\n setTimeout(() => {\n \/\/ Reset button\n submitBtn.textContent = originalText;\n submitBtn.classList.remove('loading');\n submitBtn.disabled = false;\n \n \/\/ Show success message\n successMessage.style.display = 'block';\n \n \/\/ Reset form\n form.reset();\n document.getElementById('char-count').textContent = '0';\n \n \/\/ Hide success message after 5 seconds\n setTimeout(() => {\n successMessage.style.display = 'none';\n }, 5000);\n \n \/\/ Scroll to success message\n successMessage.scrollIntoView({ behavior: 'smooth', block: 'center' });\n \n }, 2000);\n }\n \n \/\/ Animated counters\n function initializeCounters() {\n const counters = document.querySelectorAll('.stat-number');\n let started = false;\n \n function startCounting() {\n if (started) return;\n started = true;\n \n counters.forEach(counter => {\n const target = parseInt(counter.dataset.target);\n const increment = target \/ 100;\n let current = 0;\n \n const timer = setInterval(() => {\n current += increment;\n if (current >= target) {\n current = target;\n clearInterval(timer);\n }\n counter.textContent = Math.floor(current);\n }, 30);\n });\n }\n \n \/\/ Start counting when stats come into view\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n startCounting();\n }\n });\n });\n \n const statsContainer = document.getElementById('stats-counter');\n if (statsContainer) {\n observer.observe(statsContainer);\n }\n }\n \n \/\/ Animation triggers\n function initializeAnimations() {\n \/\/ Add scroll-triggered animations for better performance\n const animatedElements = document.querySelectorAll('.contact-form-section, .contact-info-section');\n \n const animationObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.opacity = '1';\n entry.target.style.transform = 'translateY(0)';\n }\n });\n }, { threshold: 0.1 });\n \n animatedElements.forEach(el => {\n animationObserver.observe(el);\n });\n }\n \n \/\/ Accessibility improvements\n function setupAccessibility() {\n \/\/ Enhanced keyboard navigation for FAQ\n const faqQuestions = document.querySelectorAll('.faq-question');\n faqQuestions.forEach(question => {\n question.setAttribute('tabindex', '0');\n question.setAttribute('role', 'button');\n question.setAttribute('aria-expanded', 'false');\n \n question.addEventListener('keydown', function(e) {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n toggleFAQ(this);\n }\n });\n });\n \n \/\/ Form accessibility\n const form = document.getElementById('contact-form');\n if (form) {\n form.setAttribute('novalidate', 'true');\n }\n }\n \n \/\/ FAQ toggle functionality\n window.toggleFAQ = function(questionElement) {\n const faqItem = questionElement.parentNode;\n const answer = faqItem.querySelector('.faq-answer');\n const toggle = questionElement.querySelector('.faq-toggle');\n const isActive = faqItem.classList.contains('active');\n \n \/\/ Close all other FAQs\n document.querySelectorAll('.faq-item.active').forEach(item => {\n if (item !== faqItem) {\n item.classList.remove('active');\n item.querySelector('.faq-answer').classList.remove('active');\n item.querySelector('.faq-question').setAttribute('aria-expanded', 'false');\n }\n });\n \n \/\/ Toggle current FAQ\n if (isActive) {\n faqItem.classList.remove('active');\n answer.classList.remove('active');\n questionElement.setAttribute('aria-expanded', 'false');\n } else {\n faqItem.classList.add('active');\n answer.classList.add('active');\n questionElement.setAttribute('aria-expanded', 'true');\n \n \/\/ Smooth scroll to show full answer\n setTimeout(() => {\n answer.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }, 300);\n }\n };\n \n \/\/ Info card interactions\n window.handleInfoCardClick = function(type) {\n const actions = {\n email: () => {\n \/\/ Analytics or tracking can be added here\n console.log('Email card clicked');\n },\n feature: () => {\n document.getElementById('subject').value = 'tool-suggestion';\n document.getElementById('contact-form').scrollIntoView({ behavior: 'smooth' });\n },\n bug: () => {\n document.getElementById('subject').value = 'bug-report';\n document.getElementById('contact-form').scrollIntoView({ behavior: 'smooth' });\n },\n social: () => {\n showSocialOptions();\n }\n };\n \n if (actions[type]) {\n actions[type]();\n }\n };\n \n \/\/ Set form subject\n window.setFormSubject = function(value) {\n const subjectSelect = document.getElementById('subject');\n if (subjectSelect) {\n subjectSelect.value = value;\n subjectSelect.dispatchEvent(new Event('change'));\n }\n };\n \n \/\/ Social options modal (placeholder)\n window.showSocialOptions = function() {\n const socialMessage = document.createElement('div');\n socialMessage.style.cssText = `\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background: #CBCADB;\n padding: 30px;\n border-radius: 15px;\n box-shadow: 0 20px 60px rgba(0,0,0,0.3);\n z-index: 10000;\n text-align: center;\n max-width: 400px;\n width: 90%;\n `;\n \n socialMessage.innerHTML = `\n <h3 style=\"margin-bottom: 20px; color: #000;\">Follow PopularNowOn<\/h3>\n <p style=\"margin-bottom: 25px; color: #000;\">Stay updated with new tools and features!<\/p>\n <div style=\"display: flex; gap: 15px; justify-content: center; margin-bottom: 20px;\">\n <a href=\"#\" style=\"padding: 10px 20px; background: #6A9BCD; color: #000; text-decoration: none; border-radius: 8px; font-weight: 600;\">Twitter<\/a>\n <a href=\"#\" style=\"padding: 10px 20px; background: #6A9BCD; color: #000; text-decoration: none; border-radius: 8px; font-weight: 600;\">LinkedIn<\/a>\n <a href=\"#\" style=\"padding: 10px 20px; background: #6A9BCD; color: #000; text-decoration: none; border-radius: 8px; font-weight: 600;\">Newsletter<\/a>\n <\/div>\n <button onclick=\"this.parentNode.remove()\" style=\"padding: 8px 16px; background: #D97757; color: #000; border: none; border-radius: 5px; cursor: pointer; font-weight: 600;\">Close<\/button>\n `;\n \n \/\/ Create backdrop\n const backdrop = document.createElement('div');\n backdrop.style.cssText = `\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0,0,0,0.5);\n z-index: 9999;\n `;\n \n backdrop.addEventListener('click', () => {\n backdrop.remove();\n socialMessage.remove();\n });\n \n document.body.appendChild(backdrop);\n document.body.appendChild(socialMessage);\n \n \/\/ Auto-close after 10 seconds\n setTimeout(() => {\n if (socialMessage.parentNode) {\n backdrop.remove();\n socialMessage.remove();\n }\n }, 10000);\n };\n \n \/\/ Enhanced smooth scrolling for internal links\n document.addEventListener('click', function(e) {\n if (e.target.tagName === 'A' && e.target.getAttribute('href') === '#contact-form') {\n e.preventDefault();\n document.getElementById('contact-form').scrollIntoView({ \n behavior: 'smooth',\n block: 'start'\n });\n }\n });\n \n \/\/ Performance optimizations\n function optimizePerformance() {\n \/\/ Lazy load background animations\n if ('IntersectionObserver' in window) {\n const backgroundElements = document.querySelectorAll('.header-section, .response-promise');\n \n const bgObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('animate-bg');\n }\n });\n });\n \n backgroundElements.forEach(el => bgObserver.observe(el));\n }\n \n \/\/ Debounced scroll handler\n let scrollTimeout;\n window.addEventListener('scroll', () => {\n if (scrollTimeout) {\n clearTimeout(scrollTimeout);\n }\n scrollTimeout = setTimeout(() => {\n \/\/ Any scroll-based optimizations can go here\n }, 100);\n }, { passive: true });\n }\n \n \/\/ Initialize everything\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', () => {\n initializeContact();\n optimizePerformance();\n });\n } else {\n initializeContact();\n optimizePerformance();\n }\n \n \/\/ Error handling\n window.addEventListener('error', function(e) {\n console.warn('Contact page error:', e.message);\n \/\/ Graceful error handling - don't break user experience\n });\n \n \/\/ Prevent form submission on Enter in text inputs (except textarea)\n document.addEventListener('keydown', function(e) {\n if (e.key === 'Enter' && e.target.tagName === 'INPUT') {\n e.preventDefault();\n \/\/ Move to next input or submit if it's the last one\n const form = e.target.closest('form');\n if (form) {\n const inputs = Array.from(form.querySelectorAll('input, select, textarea'));\n const currentIndex = inputs.indexOf(e.target);\n if (currentIndex < inputs.length - 1) {\n inputs[currentIndex + 1].focus();\n } else {\n \/\/ Focus submit button\n const submitBtn = form.querySelector('button[type=\"submit\"]');\n if (submitBtn) submitBtn.focus();\n }\n }\n }\n });\n \n })();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Contact PopularNowOn – We’d Love to Hear From You! Let’s Connect! Your ideas shape our tools. We’re here to listen, … <\/p>\n<p class=\"read-more-container\"><a title=\"Contact\" class=\"read-more button\" href=\"https:\/\/vijaypandit.in\/?page_id=40#more-40\" aria-label=\"More on Contact\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-40","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vijaypandit.in\/index.php?rest_route=\/wp\/v2\/pages\/40","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vijaypandit.in\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vijaypandit.in\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vijaypandit.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vijaypandit.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=40"}],"version-history":[{"count":2,"href":"https:\/\/vijaypandit.in\/index.php?rest_route=\/wp\/v2\/pages\/40\/revisions"}],"predecessor-version":[{"id":442,"href":"https:\/\/vijaypandit.in\/index.php?rest_route=\/wp\/v2\/pages\/40\/revisions\/442"}],"wp:attachment":[{"href":"https:\/\/vijaypandit.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=40"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}