{"id":921,"date":"2025-06-11T07:23:16","date_gmt":"2025-06-11T07:23:16","guid":{"rendered":"https:\/\/staging2.insprago.com\/kodai\/?page_id=921"},"modified":"2025-08-06T10:45:25","modified_gmt":"2025-08-06T10:45:25","slug":"become-a-vendor","status":"publish","type":"page","link":"https:\/\/bestofkodai.com\/index.php\/become-a-vendor\/","title":{"rendered":"List Your Business"},"content":{"rendered":"    <style>\r\n    \/* Modern Form Styles *\/\r\n    .vendor-request-form-container {\r\n        max-width: 600px;\r\n        margin: 0 auto;\r\n        padding: 20px;\r\n        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n    }\r\n    \r\n    .vendor-request-form {\r\n        background: #ffffff;\r\n        padding: 30px;\r\n        border-radius: 10px;\r\n        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\r\n        border: 1px solid #e1e8ed;\r\n    }\r\n    \r\n    .vendor-request-form h2 {\r\n        color: #2c3e50;\r\n        margin-top: 0;\r\n        margin-bottom: 25px;\r\n        text-align: center;\r\n        font-weight: 600;\r\n    }\r\n    \r\n    .form-group {\r\n        margin-bottom: 20px;\r\n    }\r\n    \r\n    .form-group label {\r\n        display: block;\r\n        margin-bottom: 8px;\r\n        font-weight: 500;\r\n        color: #34495e;\r\n        font-size: 14px;\r\n    }\r\n    \r\n    .form-group.required label::after {\r\n        content: \" *\";\r\n        color: #e74c3c;\r\n    }\r\n    \r\n    .form-control {\r\n        width: 100%;\r\n        padding: 12px 15px;\r\n        border: 2px solid #e1e8ed;\r\n        border-radius: 6px;\r\n        font-size: 15px;\r\n        transition: all 0.3s ease;\r\n        box-sizing: border-box;\r\n        background: #fff;\r\n    }\r\n    \r\n    .form-control:focus {\r\n        outline: none;\r\n        border-color: #3498db;\r\n        box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);\r\n    }\r\n    \r\n    textarea.form-control {\r\n        min-height: 100px;\r\n        resize: vertical;\r\n    }\r\n    \r\n    \/* Styles for radio buttons - START *\/\r\n    .radio-group {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 10px;\r\n        margin-top: 8px;\r\n    }\r\n\r\n    .radio-option {\r\n        display: flex;\r\n        align-items: center;\r\n    }\r\n\r\n    .radio-option input[type=\"radio\"] {\r\n        margin-right: 10px;\r\n        transform: scale(1.2); \/* Slightly larger radio button *\/\r\n    }\r\n\r\n    .radio-option label {\r\n        margin-bottom: 0;\r\n        font-weight: normal;\r\n        cursor: pointer;\r\n    }\r\n    \/* Styles for radio buttons - END *\/\r\n    \r\n    .submit-btn {\r\n        width: 100%;\r\n        background: #3498db;\r\n        color: white;\r\n        border: none;\r\n        padding: 14px 20px;\r\n        font-size: 16px;\r\n        font-weight: 600;\r\n        border-radius: 6px;\r\n        cursor: pointer;\r\n        transition: all 0.3s ease;\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.5px;\r\n    }\r\n    \r\n    .submit-btn:hover {\r\n        background: #2980b9;\r\n        transform: translateY(-2px);\r\n        box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);\r\n    }\r\n    \r\n    .submit-btn:disabled {\r\n        background: #bdc3c7;\r\n        cursor: not-allowed;\r\n        transform: none;\r\n        box-shadow: none;\r\n    }\r\n    \r\n    .form-message {\r\n        margin-top: 15px;\r\n        padding: 15px;\r\n        border-radius: 6px;\r\n        font-size: 14px;\r\n        font-weight: 500;\r\n    }\r\n    \r\n    .form-message.error {\r\n        background: #fadbd8;\r\n        border: 1px solid #f5b7b1;\r\n        color: #c0392b;\r\n    }\r\n    \r\n    .form-message.success {\r\n        background: #d5f5e3;\r\n        border: 1px solid #82e0aa;\r\n        color: #27ae60;\r\n    }\r\n    \r\n    .thank-you-message {\r\n        text-align: center;\r\n        padding: 40px 20px;\r\n        background: #ffffff;\r\n        border-radius: 10px;\r\n        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\r\n        border: 1px solid #e1e8ed;\r\n    }\r\n    \r\n    .thank-you-message h3 {\r\n        color: #27ae60;\r\n        margin-top: 0;\r\n        font-size: 24px;\r\n    }\r\n    \r\n    .thank-you-message p {\r\n        color: #7f8c8d;\r\n        font-size: 16px;\r\n        line-height: 1.6;\r\n        margin: 15px 0;\r\n    }\r\n    \r\n    .whatsapp-instructions {\r\n        margin: 25px 0;\r\n        padding: 20px;\r\n        background: #e8f5e9;\r\n        border: 1px solid #c8e6c9;\r\n        border-radius: 8px;\r\n        text-align: center;\r\n    }\r\n    \r\n    .whatsapp-btn {\r\n        background: #25D366;\r\n        color: white;\r\n        border: none;\r\n        padding: 14px 25px;\r\n        font-size: 16px;\r\n        font-weight: 600;\r\n        border-radius: 6px;\r\n        cursor: pointer;\r\n        transition: all 0.3s ease;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        box-shadow: 0 2px 10px rgba(37, 211, 102, 0.3);\r\n        text-decoration: none;\r\n    }\r\n    \r\n    .whatsapp-btn:hover {\r\n        background: #128C7E;\r\n        transform: translateY(-2px);\r\n        box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);\r\n    }\r\n    \r\n    .whatsapp-icon {\r\n        width: 20px;\r\n        height: 20px;\r\n    }\r\n    \r\n    .small {\r\n        font-size: 12px;\r\n        color: #7f8c8d;\r\n        margin: 10px 0;\r\n    }\r\n    \r\n    .direct-link {\r\n        display: block;\r\n        margin-top: 15px;\r\n        color: #3498db;\r\n        text-decoration: none;\r\n        font-weight: 500;\r\n    }\r\n    \r\n    .direct-link:hover {\r\n        text-decoration: underline;\r\n    }\r\n    \r\n    @media (max-width: 768px) {\r\n        .vendor-request-form-container {\r\n            padding: 10px;\r\n        }\r\n        \r\n        .vendor-request-form {\r\n            padding: 20px;\r\n        }\r\n        \r\n        .form-control {\r\n            padding: 10px 12px;\r\n            font-size: 14px;\r\n        }\r\n        \r\n        .submit-btn {\r\n            padding: 12px 15px;\r\n            font-size: 14px;\r\n        }\r\n    }\r\n    <\/style>\r\n    \r\n    <div class=\"vendor-request-form-container\">\r\n        <form class=\"vendor-request-form\" id=\"vendor-request-form\" method=\"post\">\r\n            <input type=\"hidden\" id=\"vendor_request_nonce_field\" name=\"vendor_request_nonce_field\" value=\"c783d02033\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/index.php\/wp-json\/wp\/v2\/pages\/921\" \/>            <h2>Become a Vendor or Advertiser<\/h2>\r\n            \r\n            <div class=\"form-group required\">\r\n                <label for=\"full_name\">Full Name<\/label>\r\n                <input type=\"text\" name=\"full_name\" id=\"full_name\" class=\"form-control\" required>\r\n            <\/div>\r\n            \r\n            <div class=\"form-group required\">\r\n                <label for=\"last_name\">Last Name<\/label>\r\n                <input type=\"text\" name=\"last_name\" id=\"last_name\" class=\"form-control\" required>\r\n            <\/div>\r\n            \r\n            <div class=\"form-group required\">\r\n                <label for=\"email\">Email Address<\/label>\r\n                <input type=\"email\" name=\"email\" id=\"email\" class=\"form-control\" required>\r\n            <\/div>\r\n            \r\n            <div class=\"form-group required\">\r\n                <label for=\"mobile_number\">Mobile Number<\/label>\r\n                <input type=\"tel\" name=\"mobile_number\" id=\"mobile_number\" class=\"form-control\" required>\r\n            <\/div>\r\n            \r\n            <div class=\"form-group required\">\r\n                <label for=\"whatsapp_number\">WhatsApp Number<\/label>\r\n                <input type=\"tel\" name=\"whatsapp_number\" id=\"whatsapp_number\" class=\"form-control\" required>\r\n            <\/div>\r\n            \r\n            <!-- CHANGED: Select to Radio Buttons -->\r\n            <div class=\"form-group required\">\r\n                <label>Choose Your Plan<\/label>\r\n                <div class=\"radio-group\">\r\n                    <div class=\"radio-option\">\r\n                        <input type=\"radio\" name=\"plan\" id=\"plan_vendor\" value=\"vendor\" required>\r\n                        <label for=\"plan_vendor\">I want to be a vendor<\/label>\r\n                    <\/div>\r\n                    <div class=\"radio-option\">\r\n                        <input type=\"radio\" name=\"plan\" id=\"plan_advertise\" value=\"advertise\" required>\r\n                        <label for=\"plan_advertise\">I want to advertise through your site<\/label>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"form-group\">\r\n                <label for=\"business_name\">Business Name<\/label>\r\n                <input type=\"text\" name=\"business_name\" id=\"business_name\" class=\"form-control\">\r\n            <\/div>\r\n            \r\n            <div class=\"form-group\">\r\n                <label for=\"business_location\">Business Location<\/label>\r\n                <input type=\"text\" name=\"business_location\" id=\"business_location\" class=\"form-control\">\r\n            <\/div>\r\n            \r\n            <div class=\"form-group\">\r\n                <label for=\"message\">Message<\/label>\r\n                <textarea name=\"message\" id=\"message\" class=\"form-control\" placeholder=\"Tell us more about your business...\"><\/textarea>\r\n            <\/div>\r\n            \r\n            <div class=\"form-group\">\r\n                <button type=\"submit\" class=\"submit-btn\" id=\"submit-btn\">Send Request<\/button>\r\n            <\/div>\r\n        <\/form>\r\n        <div id=\"form-message\" class=\"form-message\" style=\"display: none;\"><\/div>\r\n    <\/div>\r\n    \r\n    <script>\r\n    document.addEventListener('DOMContentLoaded', function() {\r\n        const form = document.getElementById('vendor-request-form');\r\n        if (!form) return;\r\n        \r\n        const submitBtn = document.getElementById('submit-btn');\r\n        const messageDiv = document.getElementById('form-message');\r\n        let whatsappUrl = '';\r\n        \r\n        form.addEventListener('submit', function(e) {\r\n            e.preventDefault();\r\n            \r\n            \/\/ Reset messages\r\n            messageDiv.style.display = 'none';\r\n            \r\n            \/\/ Disable button and show processing\r\n            submitBtn.disabled = true;\r\n            submitBtn.textContent = 'Processing...';\r\n            \r\n            const formData = new FormData(form);\r\n            formData.append('action', 'process_vendor_request');\r\n            \r\n            \/\/ Use WordPress ajaxurl\r\n            const ajaxUrl = typeof ajaxurl !== 'undefined' ? ajaxurl : 'https:\/\/bestofkodai.com\/wp-admin\/admin-ajax.php';\r\n            \r\n            fetch(ajaxUrl, {\r\n                method: 'POST',\r\n                body: formData\r\n            })\r\n            .then(response => {\r\n                if (!response.ok) {\r\n                    throw new Error('Network response was not ok: ' + response.status + ' ' + response.statusText);\r\n                }\r\n                return response.json();\r\n            })\r\n            .then(data => {\r\n                if(data.success) {\r\n                    \/\/ Show thank you message with WhatsApp button\r\n                    if(data.data && data.data.whatsapp_url) {\r\n                        form.innerHTML = `\r\n                            <div class=\"thank-you-message\">\r\n                                <h3>Thank You!<\/h3>\r\n                                <p>Your request has been submitted successfully.<br>We'll get back to you soon!<\/p>\r\n                                \r\n                                <div class=\"whatsapp-instructions\">\r\n                                    <p><strong>Connect with us on WhatsApp<\/strong><\/p>\r\n                                    <p>Click the button below to send your request details to our team:<\/p>\r\n                                    <a href=\"${data.data.whatsapp_url}\" target=\"_blank\" class=\"whatsapp-btn\">\r\n                                        <svg class=\"whatsapp-icon\" viewBox=\"0 0 24 24\" fill=\"white\">\r\n                                            <path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z\"\/>\r\n                                        <\/svg>\r\n                                        Send via WhatsApp\r\n                                    <\/a>\r\n                                    <p class=\"small\">This will open WhatsApp Web with your request details pre-filled<\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n                        `;\r\n                    } else {\r\n                        form.innerHTML = `\r\n                            <div class=\"thank-you-message\">\r\n                                <h3>Thank You!<\/h3>\r\n                                <p>Your request has been submitted successfully.<br>We'll get back to you soon!<\/p>\r\n                            <\/div>\r\n                        `;\r\n                    }\r\n                } else {\r\n                    let errorMsg = 'An unknown error occurred';\r\n                    if (data.data && data.data.message) {\r\n                        errorMsg = data.data.message;\r\n                    } else if (data.message) {\r\n                        errorMsg = data.message;\r\n                    }\r\n                    \r\n                    messageDiv.textContent = errorMsg;\r\n                    messageDiv.className = 'form-message error';\r\n                    messageDiv.style.display = 'block';\r\n                    submitBtn.disabled = false;\r\n                    submitBtn.textContent = 'Send Request';\r\n                }\r\n            })\r\n            .catch(error => {\r\n                messageDiv.textContent = 'Network error occurred. Please try again. (' + error.message + ')';\r\n                messageDiv.className = 'form-message error';\r\n                messageDiv.style.display = 'block';\r\n                submitBtn.disabled = false;\r\n                submitBtn.textContent = 'Send Request';\r\n            });\r\n        });\r\n    });\r\n    <\/script>\r\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-921","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bestofkodai.com\/index.php\/wp-json\/wp\/v2\/pages\/921","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bestofkodai.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bestofkodai.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bestofkodai.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bestofkodai.com\/index.php\/wp-json\/wp\/v2\/comments?post=921"}],"version-history":[{"count":4,"href":"https:\/\/bestofkodai.com\/index.php\/wp-json\/wp\/v2\/pages\/921\/revisions"}],"predecessor-version":[{"id":1050,"href":"https:\/\/bestofkodai.com\/index.php\/wp-json\/wp\/v2\/pages\/921\/revisions\/1050"}],"wp:attachment":[{"href":"https:\/\/bestofkodai.com\/index.php\/wp-json\/wp\/v2\/media?parent=921"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}