Project Inquiry Form<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n .wellad-form-container {\n font-family: 'Inter', sans-serif;\n --primary: #2563eb;\n --primary-light: #3b82f6;\n --primary-dark: #1d4ed8;\n --secondary: #f8fafc;\n --text: #1e293b;\n --text-light: #64748b;\n --border: #e2e8f0;\n --card-bg: #ffffff;\n --section-bg: #f1f5f9;\n --success: #10b981;\n --radius: 12px;\n --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 5px 10px -5px rgba(0, 0, 0, 0.04);\n --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .wellad-form-container * {\n box-sizing: border-box;\n }\n\n .wellad-form-container .form-container {\n width: 100%;\n max-width: 900px;\n margin: 0 auto;\n background: var(--card-bg);\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n overflow: hidden;\n }\n\n .wellad-form-container .form-header {\n background: linear-gradient(120deg, var(--primary) 0%, var(--primary-light) 100%);\n color: white;\n padding: 2rem;\n text-align: center;\n position: relative;\n overflow: hidden;\n }\n\n .wellad-form-container .form-header h1 {\n margin: 0;\n font-size: 2rem;\n font-weight: 700;\n }\n\n .wellad-form-container .form-header p {\n margin: 0.8rem 0 0;\n opacity: 0.9;\n font-size: 1rem;\n }\n\n .wellad-form-container .progress-bar {\n height: 6px;\n background: rgba(255, 255, 255, 0.3);\n margin-top: 1.5rem;\n border-radius: 3px;\n }\n\n .wellad-form-container .progress-fill {\n height: 100%;\n width: 25%;\n background: white;\n border-radius: 3px;\n transition: var(--transition);\n }\n\n .wellad-form-container .form-body {\n padding: 2rem;\n }\n\n .wellad-form-container .form-section {\n margin-bottom: 1.5rem;\n background: var(--section-bg);\n border-radius: var(--radius);\n overflow: hidden;\n transition: var(--transition);\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);\n }\n\n .wellad-form-container .section-expanded .section-content {\n max-height: 5000px;\n }\n\n .wellad-form-container .section-header {\n padding: 1.25rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n background: white;\n transition: var(--transition);\n }\n\n .wellad-form-container .section-header:hover {\n background: #f8fafc;\n }\n\n .wellad-form-container .section-header h2 {\n margin: 0;\n font-size: 1.1rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 0.8rem;\n }\n\n .wellad-form-container .section-header i {\n font-size: 1rem;\n color: var(--primary);\n transition: var(--transition);\n }\n\n .wellad-form-container .section-expanded .section-header i {\n transform: rotate(180deg);\n }\n\n .wellad-form-container .section-content {\n max-height: 0;\n overflow: hidden;\n transition: var(--transition);\n padding: 0 1.25rem;\n }\n\n .wellad-form-container .section-content-inner {\n padding: 0 0 1.25rem;\n }\n\n .wellad-form-container .form-group {\n margin-bottom: 1.25rem;\n }\n\n .wellad-form-container label {\n display: block;\n margin-bottom: 0.5rem;\n font-weight: 500;\n font-size: 0.9rem;\n }\n\n .wellad-form-container .required-field::after {\n content: \" *\";\n color: #ef4444;\n }\n\n .wellad-form-container input:not([type=\"checkbox\"]):not([type=\"radio\"]),\n .wellad-form-container textarea,\n .wellad-form-container select {\n width: 100%;\n padding: 0.8rem 1rem;\n border: 1px solid var(--border);\n border-radius: var(--radius);\n font-size: 0.95rem;\n transition: var(--transition);\n }\n\n .wellad-form-container input:focus,\n .wellad-form-container textarea:focus,\n .wellad-form-container select:focus {\n outline: none;\n border-color: var(--primary);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);\n }\n\n .wellad-form-container textarea {\n min-height: 120px;\n resize: vertical;\n }\n\n .wellad-form-container .options-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n gap: 0.8rem;\n }\n\n .wellad-form-container .option-item {\n display: flex;\n align-items: center;\n background: white;\n padding: 0.8rem;\n border-radius: var(--radius);\n border: 1px solid var(--border);\n transition: var(--transition);\n cursor: pointer;\n }\n\n .wellad-form-container .option-item:hover {\n border-color: var(--primary);\n transform: translateY(-2px);\n box-shadow: 0 4px 6px rgba(37, 99, 235, 0.1);\n }\n\n .wellad-form-container .option-item input {\n margin-right: 0.6rem;\n }\n\n .wellad-form-container .radio-group {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n gap: 0.8rem;\n }\n\n .wellad-form-container .radio-option {\n display: flex;\n align-items: center;\n background: white;\n padding: 0.8rem;\n border-radius: var(--radius);\n border: 1px solid var(--border);\n transition: var(--transition);\n cursor: pointer;\n }\n\n .wellad-form-container .radio-option:hover {\n border-color: var(--primary);\n transform: translateY(-2px);\n box-shadow: 0 4px 6px rgba(37, 99, 235, 0.1);\n }\n\n .wellad-form-container .radio-option input {\n margin-right: 0.6rem;\n }\n\n .wellad-form-container .color-picker {\n display: flex;\n align-items: center;\n gap: 1rem;\n }\n\n .wellad-form-container .color-picker input[type=\"color\"] {\n width: 50px;\n height: 50px;\n padding: 0;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n overflow: hidden;\n }\n\n .wellad-form-container .color-picker input[type=\"color\"]::-webkit-color-swatch {\n border: none;\n border-radius: 50%;\n }\n\n .wellad-form-container .file-upload {\n border: 2px dashed var(--border);\n padding: 1.5rem;\n text-align: center;\n border-radius: var(--radius);\n background: white;\n transition: var(--transition);\n cursor: pointer;\n }\n\n .wellad-form-container .file-upload:hover {\n border-color: var(--primary);\n background: rgba(37, 99, 235, 0.03);\n }\n\n .wellad-form-container .file-upload input {\n display: none;\n }\n\n .wellad-form-container .file-upload label {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.7rem 1.5rem;\n background: var(--primary);\n color: white;\n border-radius: var(--radius);\n cursor: pointer;\n transition: var(--transition);\n font-weight: 500;\n }\n\n .wellad-form-container .file-upload label:hover {\n background: var(--primary-dark);\n }\n\n .wellad-form-container .file-upload p {\n margin-top: 0.8rem;\n font-size: 0.85rem;\n color: var(--text-light);\n }\n\n .wellad-form-container .form-footer {\n text-align: center;\n margin-top: 1.5rem;\n padding-top: 1.5rem;\n border-top: 1px solid var(--border);\n }\n\n .wellad-form-container .btn {\n padding: 0.9rem 1.8rem;\n border: none;\n border-radius: var(--radius);\n font-size: 0.95rem;\n font-weight: 600;\n cursor: pointer;\n transition: var(--transition);\n display: inline-flex;\n align-items: center;\n gap: 0.6rem;\n }\n\n .wellad-form-container .btn-primary {\n background: var(--primary);\n color: white;\n }\n\n .wellad-form-container .btn-primary:hover {\n background: var(--primary-dark);\n transform: translateY(-2px);\n box-shadow: 0 4px 8px rgba(37, 99, 235, 0.2);\n }\n\n .wellad-form-container .success-message {\n display: none;\n padding: 1.5rem;\n background-color: #ecfdf5;\n color: #065f46;\n border-radius: var(--radius);\n margin-bottom: 1.5rem;\n text-align: center;\n border-left: 4px solid var(--success);\n }\n\n .wellad-form-container .success-message h3 {\n margin-top: 0;\n color: #065f46;\n }\n\n .wellad-form-container .tech-stack {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));\n gap: 0.8rem;\n }\n\n .wellad-form-container .tech-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n background: white;\n padding: 1rem;\n border-radius: var(--radius);\n border: 1px solid var(--border);\n transition: var(--transition);\n cursor: pointer;\n text-align: center;\n }\n\n .wellad-form-container .tech-item:hover {\n border-color: var(--primary);\n transform: translateY(-3px);\n box-shadow: 0 5px 12px rgba(37, 99, 235, 0.1);\n }\n\n .wellad-form-container .tech-item i {\n font-size: 1.8rem;\n margin-bottom: 0.5rem;\n color: var(--primary);\n }\n\n .wellad-form-container .tech-item span {\n font-size: 0.85rem;\n }\n\n @media (max-width: 768px) {\n .wellad-form-container .options-grid,\n .wellad-form-container .radio-group,\n .wellad-form-container .tech-stack {\n grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n }\n \n .wellad-form-container .form-body {\n padding: 1.5rem;\n }\n }\n\n @media (max-width: 480px) {\n .wellad-form-container .options-grid,\n .wellad-form-container .radio-group,\n .wellad-form-container .tech-stack {\n grid-template-columns: 1fr;\n }\n \n .wellad-form-container .color-picker {\n flex-direction: column;\n align-items: flex-start;\n }\n \n .wellad-form-container .form-header {\n padding: 1.5rem;\n }\n \n .wellad-form-container .form-header h1 {\n font-size: 1.8rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"wellad-form-container\">\n <div class=\"form-container\">\n <div class=\"form-header\">\n <h1><i class=\"fas fa-laptop-code\"><\/i> Project Inquiry<\/h1>\n <p>Tell us about your project and we'll get back to you with a proposal<\/p>\n <div class=\"progress-bar\">\n <div class=\"progress-fill\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"form-body\">\n <div class=\"success-message\" id=\"successMessage\">\n <i class=\"fas fa-check-circle\"><\/i>\n <h3>Thank you for your submission!<\/h3>\n <p>We've received your project details and will contact you shortly.<\/p>\n <\/div>\n\n <form id=\"projectForm\">\n \n <div class=\"form-section section-expanded\">\n <div class=\"section-header\">\n <h2><i class=\"fas fa-user\"><\/i> Basic Information<\/h2>\n <i class=\"fas fa-chevron-down\"><\/i>\n <\/div>\n <div class=\"section-content\">\n <div class=\"section-content-inner\">\n <div class=\"form-group\">\n <label for=\"fullName\" class=\"required-field\">Full Name<\/label>\n <input type=\"text\" id=\"fullName\" name=\"fullName\" required placeholder=\"John Smith\">\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"company\">Company \/ Organization Name<\/label>\n <input type=\"text\" id=\"company\" name=\"company\" placeholder=\"Acme Inc.\">\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"email\" class=\"required-field\">Email Address<\/label>\n <input type=\"email\" id=\"email\" name=\"email\" required placeholder=\"john@example.com\">\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"phone\">Phone Number<\/label>\n <input type=\"tel\" id=\"phone\" name=\"phone\" placeholder=\"+1 (123) 456-7890\">\n <\/div>\n \n <div class=\"form-group\">\n <label>Preferred Contact Method<\/label>\n <div class=\"options-grid\">\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"contact-email\" name=\"contactMethod\" value=\"Email\">\n <label for=\"contact-email\">Email<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"contact-phone\" name=\"contactMethod\" value=\"Phone\">\n <label for=\"contact-phone\">Phone<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"contact-whatsapp\" name=\"contactMethod\" value=\"WhatsApp\">\n <label for=\"contact-whatsapp\">WhatsApp<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"contact-other\" name=\"contactMethod\" value=\"Other\">\n <label for=\"contact-other\">Other<\/label>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\">\n <div class=\"section-header\">\n <h2><i class=\"fas fa-cube\"><\/i> Project Type<\/h2>\n <i class=\"fas fa-chevron-down\"><\/i>\n <\/div>\n <div class=\"section-content\">\n <div class=\"section-content-inner\">\n <p>Select all that apply<\/p>\n <div class=\"options-grid\">\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"type-website\" name=\"projectType\" value=\"Website Development\">\n <label for=\"type-website\">Website Development<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"type-mobile\" name=\"projectType\" value=\"Mobile App Development\">\n <label for=\"type-mobile\">Mobile App Development<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"type-webapp\" name=\"projectType\" value=\"Web + App Development\">\n <label for=\"type-webapp\">Web + App Development<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"type-ecommerce\" name=\"projectType\" value=\"E-commerce Store\">\n <label for=\"type-ecommerce\">E-commerce Store<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"type-portfolio\" name=\"projectType\" value=\"Portfolio or Blog\">\n <label for=\"type-portfolio\">Portfolio or Blog<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"type-corporate\" name=\"projectType\" value=\"Corporate\/Business Website\">\n <label for=\"type-corporate\">Corporate\/Business Website<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"type-landing\" name=\"projectType\" value=\"Landing Page\">\n <label for=\"type-landing\">Landing Page<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"type-custom\" name=\"projectType\" value=\"Custom Web Application\">\n <label for=\"type-custom\">Custom Web Application<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"type-uiux\" name=\"projectType\" value=\"UI\/UX Design Only\">\n <label for=\"type-uiux\">UI\/UX Design Only<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"type-other\" name=\"projectType\" value=\"Other\">\n <label for=\"type-other\">Other<\/label>\n <input type=\"text\" id=\"type-other-text\" name=\"projectTypeOther\" placeholder=\"Please specify\" style=\"margin-top: 0.5rem; display: none;\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\">\n <div class=\"section-header\">\n <h2><i class=\"fas fa-file-alt\"><\/i> Project Description<\/h2>\n <i class=\"fas fa-chevron-down\"><\/i>\n <\/div>\n <div class=\"section-content\">\n <div class=\"section-content-inner\">\n <div class=\"form-group\">\n <label for=\"description\" class=\"required-field\">Please describe your project, its purpose, and the features you need<\/label>\n <textarea id=\"description\" name=\"description\" required placeholder=\"Describe your vision, target audience, and key functionalities...\"><\/textarea>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\">\n <div class=\"section-header\">\n <h2><i class=\"fas fa-palette\"><\/i> Design Preferences<\/h2>\n <i class=\"fas fa-chevron-down\"><\/i>\n <\/div>\n <div class=\"section-content\">\n <div class=\"section-content-inner\">\n <div class=\"form-group\">\n <label for=\"example-sites\">Website(s) or App(s) you like (URLs)<\/label>\n <input type=\"text\" id=\"example-sites\" name=\"exampleSites\" placeholder=\"https:\/\/example.com\">\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"liked-features\">What you like about these examples<\/label>\n <textarea id=\"liked-features\" name=\"likedFeatures\" placeholder=\"Design elements, features, layout, etc...\"><\/textarea>\n <\/div>\n \n <div class=\"form-group\">\n <label>Expected number of pages\/screens<\/label>\n <div class=\"radio-group\">\n <div class=\"radio-option\">\n <input type=\"radio\" id=\"pages-1-3\" name=\"pageCount\" value=\"1-3\">\n <label for=\"pages-1-3\">1\u20133<\/label>\n <\/div>\n <div class=\"radio-option\">\n <input type=\"radio\" id=\"pages-4-7\" name=\"pageCount\" value=\"4-7\">\n <label for=\"pages-4-7\">4\u20137<\/label>\n <\/div>\n <div class=\"radio-option\">\n <input type=\"radio\" id=\"pages-8-12\" name=\"pageCount\" value=\"8-12\">\n <label for=\"pages-8-12\">8\u201312<\/label>\n <\/div>\n <div class=\"radio-option\">\n <input type=\"radio\" id=\"pages-13plus\" name=\"pageCount\" value=\"13+\">\n <label for=\"pages-13plus\">13+<\/label>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"page-names\">Specific page names (if known)<\/label>\n <input type=\"text\" id=\"page-names\" name=\"pageNames\" placeholder=\"Home, About, Services, Contact...\">\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"color-scheme\">Preferred color scheme<\/label>\n <div class=\"color-picker\">\n <input type=\"color\" id=\"color-scheme\" name=\"colorScheme\" value=\"#2563eb\">\n <input type=\"text\" id=\"color-hex\" name=\"colorHex\" placeholder=\"#2563eb\" maxlength=\"7\">\n <\/div>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"fonts\">Preferred fonts \/ typography<\/label>\n <input type=\"text\" id=\"fonts\" name=\"fonts\" placeholder=\"e.g., 'Inter', sans-serif\">\n <\/div>\n \n <div class=\"form-group\">\n <label>Branding materials<\/label>\n <div class=\"file-upload\">\n <input type=\"file\" id=\"branding-files\" name=\"brandingFiles\" accept=\".jpg,.jpeg,.png,.pdf,.ai,.psd,.zip\" multiple>\n <label for=\"branding-files\"><i class=\"fas fa-upload\"><\/i> Upload Files<\/label>\n <p>Accepted: JPG, PNG, PDF, AI, PSD, ZIP (Max 10MB)<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\">\n <div class=\"section-header\">\n <h2><i class=\"fas fa-cogs\"><\/i> Features & Requirements<\/h2>\n <i class=\"fas fa-chevron-down\"><\/i>\n <\/div>\n <div class=\"section-content\">\n <div class=\"section-content-inner\">\n <p>Select all that apply<\/p>\n <div class=\"options-grid\">\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"feature-login\" name=\"features\" value=\"User Login\/Signup\">\n <label for=\"feature-login\">User Login\/Signup<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"feature-admin\" name=\"features\" value=\"Admin Panel\">\n <label for=\"feature-admin\">Admin Panel<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"feature-contact\" name=\"features\" value=\"Contact Forms\">\n <label for=\"feature-contact\">Contact Forms<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"feature-booking\" name=\"features\" value=\"Booking System\">\n <label for=\"feature-booking\">Booking System<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"feature-blog\" name=\"features\" value=\"Blog\/News Section\">\n <label for=\"feature-blog\">Blog\/News Section<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"feature-ecommerce\" name=\"features\" value=\"E-commerce Integration\">\n <label for=\"feature-ecommerce\">E-commerce Integration<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"feature-payment\" name=\"features\" value=\"Payment Gateway\">\n <label for=\"feature-payment\">Payment Gateway<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"feature-multilang\" name=\"features\" value=\"Multi-language Support\">\n <label for=\"feature-multilang\">Multi-language Support<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"feature-responsive\" name=\"features\" value=\"Responsive Design\">\n <label for=\"feature-responsive\">Responsive Design<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"feature-cms\" name=\"features\" value=\"CMS Integration\">\n <label for=\"feature-cms\">CMS Integration<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"feature-seo\" name=\"features\" value=\"SEO Optimization\">\n <label for=\"feature-seo\">SEO Optimization<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"feature-email\" name=\"features\" value=\"Email Marketing\">\n <label for=\"feature-email\">Email Marketing<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"feature-chat\" name=\"features\" value=\"Chatbot\/Live Chat\">\n <label for=\"feature-chat\">Chatbot\/Live Chat<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"feature-social\" name=\"features\" value=\"Social Media Integration\">\n <label for=\"feature-social\">Social Media Integration<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"feature-api\" name=\"features\" value=\"API Integration\">\n <label for=\"feature-api\">API Integration<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"feature-other\" name=\"features\" value=\"Other\">\n <label for=\"feature-other\">Other<\/label>\n <input type=\"text\" id=\"feature-other-text\" name=\"featuresOther\" placeholder=\"Please specify\" style=\"margin-top: 0.5rem; display: none;\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\">\n <div class=\"section-header\">\n <h2><i class=\"fas fa-microchip\"><\/i> Tech Stack Preferences<\/h2>\n <i class=\"fas fa-chevron-down\"><\/i>\n <\/div>\n <div class=\"section-content\">\n <div class=\"section-content-inner\">\n <p>Select preferred technologies (optional)<\/p>\n <div class=\"tech-stack\">\n <div class=\"tech-item\">\n <i class=\"fab fa-react\"><\/i>\n <span>React<\/span>\n <input type=\"checkbox\" id=\"tech-react\" name=\"techStack\" value=\"React\">\n <\/div>\n <div class=\"tech-item\">\n <i class=\"fab fa-angular\"><\/i>\n <span>Angular<\/span>\n <input type=\"checkbox\" id=\"tech-angular\" name=\"techStack\" value=\"Angular\">\n <\/div>\n <div class=\"tech-item\">\n <i class=\"fab fa-vuejs\"><\/i>\n <span>Vue.js<\/span>\n <input type=\"checkbox\" id=\"tech-vue\" name=\"techStack\" value=\"Vue.js\">\n <\/div>\n <div class=\"tech-item\">\n <i class=\"fab fa-node-js\"><\/i>\n <span>Node.js<\/span>\n <input type=\"checkbox\" id=\"tech-node\" name=\"techStack\" value=\"Node.js\">\n <\/div>\n <div class=\"tech-item\">\n <i class=\"fab fa-laravel\"><\/i>\n <span>Laravel<\/span>\n <input type=\"checkbox\" id=\"tech-laravel\" name=\"techStack\" value=\"Laravel\">\n <\/div>\n <div class=\"tech-item\">\n <i class=\"fas fa-database\"><\/i>\n <span>MongoDB<\/span>\n <input type=\"checkbox\" id=\"tech-mongo\" name=\"techStack\" value=\"MongoDB\">\n <\/div>\n <div class=\"tech-item\">\n <i class=\"fas fa-server\"><\/i>\n <span>MySQL<\/span>\n <input type=\"checkbox\" id=\"tech-mysql\" name=\"techStack\" value=\"MySQL\">\n <\/div>\n <div class=\"tech-item\">\n <i class=\"fab fa-aws\"><\/i>\n <span>AWS<\/span>\n <input type=\"checkbox\" id=\"tech-aws\" name=\"techStack\" value=\"AWS\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\">\n <div class=\"section-header\">\n <h2><i class=\"fas fa-globe\"><\/i> Domain & Hosting<\/h2>\n <i class=\"fas fa-chevron-down\"><\/i>\n <\/div>\n <div class=\"section-content\">\n <div class=\"section-content-inner\">\n <div class=\"form-group\">\n <label>Do you have a domain name?<\/label>\n <div class=\"radio-group\">\n <div class=\"radio-option\">\n <input type=\"radio\" id=\"domain-yes\" name=\"hasDomain\" value=\"yes\">\n <label for=\"domain-yes\">Yes<\/label>\n <\/div>\n <div class=\"radio-option\">\n <input type=\"radio\" id=\"domain-no\" name=\"hasDomain\" value=\"no\">\n <label for=\"domain-no\">No<\/label>\n <\/div>\n <\/div>\n <input type=\"text\" id=\"domain-name\" name=\"domainName\" placeholder=\"yourdomain.com\" style=\"margin-top: 0.5rem; display: none;\">\n <\/div>\n \n <div class=\"form-group\">\n <label>Do you have web hosting?<\/label>\n <div class=\"radio-group\">\n <div class=\"radio-option\">\n <input type=\"radio\" id=\"hosting-yes\" name=\"hasHosting\" value=\"yes\">\n <label for=\"hosting-yes\">Yes<\/label>\n <\/div>\n <div class=\"radio-option\">\n <input type=\"radio\" id=\"hosting-no\" name=\"hasHosting\" value=\"no\">\n <label for=\"hosting-no\">No<\/label>\n <\/div>\n <\/div>\n <input type=\"text\" id=\"hosting-provider\" name=\"hostingProvider\" placeholder=\"Hosting provider name\" style=\"margin-top: 0.5rem; display: none;\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n<div class=\"form-section\">\n <div class=\"section-header\">\n <h2><i class=\"fas fa-tags\"><\/i> Estimated Budget<\/h2>\n <i class=\"fas fa-chevron-down\"><\/i>\n <\/div>\n <div class=\"section-content\">\n <div class=\"section-content-inner\">\n <div class=\"radio-group\">\n <div class=\"radio-option\">\n <input type=\"radio\" id=\"budget-1-3k\" name=\"budget\" value=\"$1,000\u2013$3,000\">\n <label for=\"budget-1-3k\">$1,000\u2013$3,000<\/label>\n <\/div>\n <div class=\"radio-option\">\n <input type=\"radio\" id=\"budget-3-5k\" name=\"budget\" value=\"$3,000\u2013$5,000\">\n <label for=\"budget-3-5k\">$3,000\u2013$5,000<\/label>\n <\/div>\n <div class=\"radio-option\">\n <input type=\"radio\" id=\"budget-5-10k\" name=\"budget\" value=\"$5,000\u2013$10,000\">\n <label for=\"budget-5-10k\">$5,000\u2013$10,000<\/label>\n <\/div>\n <div class=\"radio-option\">\n <input type=\"radio\" id=\"budget-10-15k\" name=\"budget\" value=\"$10,000\u2013$15,000\">\n <label for=\"budget-10-15k\">$10,000\u2013$15,000<\/label>\n <\/div>\n <div class=\"radio-option\">\n <input type=\"radio\" id=\"budget-15kplus\" name=\"budget\" value=\"$15,000+\">\n <label for=\"budget-15kplus\">$15,000+<\/label>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n \n <div class=\"form-section\">\n <div class=\"section-header\">\n <h2><i class=\"fas fa-calendar-alt\"><\/i> Timeline & Extras<\/h2>\n <i class=\"fas fa-chevron-down\"><\/i>\n <\/div>\n <div class=\"section-content\">\n <div class=\"section-content-inner\">\n <div class=\"form-group\">\n <label for=\"timeline\">Preferred Deadline or Timeline<\/label>\n <input type=\"text\" id=\"timeline\" name=\"timeline\" placeholder=\"e.g., 3 months, ASAP, by December 2023...\">\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"notes\">Additional Notes<\/label>\n <textarea id=\"notes\" name=\"notes\" placeholder=\"Any special requests or additional information...\"><\/textarea>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\">\n <div class=\"section-header\">\n <h2><i class=\"fas fa-cloud-upload-alt\"><\/i> File Uploads<\/h2>\n <i class=\"fas fa-chevron-down\"><\/i>\n <\/div>\n <div class=\"section-content\">\n <div class=\"section-content-inner\">\n <div class=\"file-upload\">\n <input type=\"file\" id=\"support-files\" name=\"supportFiles\" accept=\".jpg,.jpeg,.png,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.zip,.rar\" multiple>\n <label for=\"support-files\"><i class=\"fas fa-upload\"><\/i> Upload Files<\/label>\n <p>Accepted: Images, PDFs, Documents, Spreadsheets, Presentations, ZIP (Max 10MB each)<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"form-footer\">\n <button type=\"submit\" class=\"btn btn-primary\">\n Submit Project <i class=\"fas fa-paper-plane\"><\/i>\n <\/button>\n <\/div>\n <\/form>\n <\/div>\n <\/div>\n <\/div>\n\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/js\/all.min.js\"><\/script>\n <script>\n document.addEventListener('DOMContentLoaded', function() {\n const formContainer = document.querySelector('.wellad-form-container');\n if (!formContainer) return;\n\n \/\/ Initialize sections (first one expanded by default)\n const sections = formContainer.querySelectorAll('.form-section');\n if (sections.length > 0) {\n sections[0].classList.add('section-expanded');\n }\n\n \/\/ Collapsible sections functionality\n formContainer.querySelectorAll('.section-header').forEach(header => {\n header.addEventListener('click', function() {\n const section = this.parentElement;\n section.classList.toggle('section-expanded');\n });\n });\n\n \/\/ Conditional fields\n const typeOtherCheckbox = formContainer.querySelector('#type-other');\n if (typeOtherCheckbox) {\n typeOtherCheckbox.addEventListener('change', function() {\n const otherText = formContainer.querySelector('#type-other-text');\n if (otherText) otherText.style.display = this.checked ? 'block' : 'none';\n });\n }\n\n const featureOtherCheckbox = formContainer.querySelector('#feature-other');\n if (featureOtherCheckbox) {\n featureOtherCheckbox.addEventListener('change', function() {\n const otherText = formContainer.querySelector('#feature-other-text');\n if (otherText) otherText.style.display = this.checked ? 'block' : 'none';\n });\n }\n\n \/\/ Domain name field toggle\n formContainer.querySelectorAll('input[name=\"hasDomain\"]').forEach(radio => {\n radio.addEventListener('change', function() {\n const domainInput = formContainer.querySelector('#domain-name');\n if (domainInput) domainInput.style.display = this.value === 'yes' && this.checked ? 'block' : 'none';\n });\n });\n\n \/\/ Hosting provider field toggle\n formContainer.querySelectorAll('input[name=\"hasHosting\"]').forEach(radio => {\n radio.addEventListener('change', function() {\n const hostingInput = formContainer.querySelector('#hosting-provider');\n if (hostingInput) hostingInput.style.display = this.value === 'yes' && this.checked ? 'block' : 'none';\n });\n });\n\n \/\/ Color picker sync\n const colorPicker = formContainer.querySelector('#color-scheme');\n const colorHex = formContainer.querySelector('#color-hex');\n if (colorPicker && colorHex) {\n colorPicker.addEventListener('input', function() {\n colorHex.value = this.value;\n });\n \n colorHex.addEventListener('input', function() {\n if (\/^#[0-9A-F]{6}$\/i.test(this.value)) {\n colorPicker.value = this.value;\n }\n });\n }\n\n \/\/ Form submission\n const form = formContainer.querySelector('#projectForm');\n if (form) {\n form.addEventListener('submit', function(e) {\n e.preventDefault();\n \n \/\/ Validate required fields\n const requiredFields = formContainer.querySelectorAll('[required]');\n let isValid = true;\n \n requiredFields.forEach(field => {\n if (!field.value.trim()) {\n field.style.borderColor = '#ef4444';\n isValid = false;\n } else {\n field.style.borderColor = '';\n }\n });\n \n if (!isValid) {\n alert('Please fill in all required fields');\n return;\n }\n\n \/\/ Collect all form data\n const formData = new FormData(this);\n const data = {};\n formData.forEach((value, key) => {\n \/\/ Handle multiple selections\n if (key === 'projectType' || key === 'features' || key === 'techStack' || key === 'contactMethod') {\n if (!data[key]) data[key] = [];\n data[key].push(value);\n } else {\n data[key] = value;\n }\n });\n\n \/\/ Format the email body\n let emailBody = `New Project Inquiry Submission:\\n\\n`;\n emailBody += `=== Basic Information ===\\n`;\n emailBody += `Name: ${data.fullName}\\n`;\n emailBody += `Company: ${data.company || 'Not provided'}\\n`;\n emailBody += `Email: ${data.email}\\n`;\n emailBody += `Phone: ${data.phone || 'Not provided'}\\n`;\n emailBody += `Preferred Contact: ${data.contactMethod ? data.contactMethod.join(', ') : 'Not specified'}\\n\\n`;\n \n emailBody += `=== Project Details ===\\n`;\n emailBody += `Project Type: ${data.projectType ? data.projectType.join(', ') : 'Not specified'}\\n`;\n emailBody += `Description: ${data.description}\\n\\n`;\n \n emailBody += `=== Design Preferences ===\\n`;\n emailBody += `Example Sites: ${data.exampleSites || 'Not provided'}\\n`;\n emailBody += `Liked Features: ${data.likedFeatures || 'Not provided'}\\n`;\n emailBody += `Pages\/Screens: ${data.pageCount || 'Not specified'}\\n`;\n emailBody += `Page Names: ${data.pageNames || 'Not specified'}\\n`;\n emailBody += `Color Scheme: ${data.colorHex || 'Not specified'}\\n`;\n emailBody += `Fonts: ${data.fonts || 'Not specified'}\\n\\n`;\n \n emailBody += `=== Technical Requirements ===\\n`;\n emailBody += `Features: ${data.features ? data.features.join(', ') : 'Not specified'}\\n`;\n emailBody += `Tech Stack: ${data.techStack ? data.techStack.join(', ') : 'Not specified'}\\n\\n`;\n \n emailBody += `=== Domain & Hosting ===\\n`;\n emailBody += `Has Domain: ${data.hasDomain || 'Not specified'}\\n`;\n if (data.hasDomain === 'yes') emailBody += `Domain Name: ${data.domainName || 'Not provided'}\\n`;\n emailBody += `Has Hosting: ${data.hasHosting || 'Not specified'}\\n`;\n if (data.hasHosting === 'yes') emailBody += `Hosting Provider: ${data.hostingProvider || 'Not provided'}\\n\\n`;\n \n emailBody += `=== Budget & Timeline ===\\n`;\n emailBody += `Budget: ${data.budget || 'Not specified'}\\n`;\n emailBody += `Timeline: ${data.timeline || 'Not specified'}\\n\\n`;\n \n emailBody += `=== Additional Notes ===\\n`;\n emailBody += `${data.notes || 'No additional notes'}\\n`;\n\n \/\/ Send to FormSubmit\n fetch('https:\/\/formsubmit.co\/ajax\/info@wellad.online', {\n method: 'POST',\n headers: { \n 'Content-Type': 'application\/json',\n 'Accept': 'application\/json'\n },\n body: JSON.stringify({\n name: data.fullName,\n email: data.email,\n subject: `New Project Inquiry from ${data.fullName}`,\n message: emailBody,\n _replyto: data.email,\n _template: 'table'\n })\n })\n .then(response => response.json())\n .then(data => {\n const successMessage = formContainer.querySelector('#successMessage');\n if (successMessage) {\n successMessage.style.display = 'block';\n this.reset();\n successMessage.scrollIntoView({ behavior: 'smooth' });\n }\n })\n .catch(error => {\n console.error('Error:', error);\n alert('There was an error submitting your form. Please try again or contact us directly at info@wellad.online');\n });\n });\n }\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Project Inquiry Form Project Inquiry Tell us about your project and we\u2019ll get back to you with a proposal Thank you for your submission! We\u2019ve received your project details and will contact you shortly. Basic Information Full Name Company \/ Organization Name Email Address Phone Number Preferred Contact Method Email Phone WhatsApp Other Project Type […]<\/p>\n","protected":false},"author":1,"featured_media":2498,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4925","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/wellad.online\/index.php\/wp-json\/wp\/v2\/pages\/4925","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wellad.online\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wellad.online\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wellad.online\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wellad.online\/index.php\/wp-json\/wp\/v2\/comments?post=4925"}],"version-history":[{"count":15,"href":"https:\/\/wellad.online\/index.php\/wp-json\/wp\/v2\/pages\/4925\/revisions"}],"predecessor-version":[{"id":5017,"href":"https:\/\/wellad.online\/index.php\/wp-json\/wp\/v2\/pages\/4925\/revisions\/5017"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wellad.online\/index.php\/wp-json\/wp\/v2\/media\/2498"}],"wp:attachment":[{"href":"https:\/\/wellad.online\/index.php\/wp-json\/wp\/v2\/media?parent=4925"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n Project Inquiry Form<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n .wellad-form-container {\n font-family: 'Inter', sans-serif;\n --primary: #2563eb;\n --primary-light: #3b82f6;\n --primary-dark: #1d4ed8;\n --secondary: #f8fafc;\n --text: #1e293b;\n --text-light: #64748b;\n --border: #e2e8f0;\n --card-bg: #ffffff;\n --section-bg: #f1f5f9;\n --success: #10b981;\n --radius: 12px;\n --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 5px 10px -5px rgba(0, 0, 0, 0.04);\n --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .wellad-form-container * {\n box-sizing: border-box;\n }\n\n .wellad-form-container .form-container {\n width: 100%;\n max-width: 900px;\n margin: 0 auto;\n background: var(--card-bg);\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n overflow: hidden;\n }\n\n .wellad-form-container .form-header {\n background: linear-gradient(120deg, var(--primary) 0%, var(--primary-light) 100%);\n color: white;\n padding: 2rem;\n text-align: center;\n position: relative;\n overflow: hidden;\n }\n\n .wellad-form-container .form-header h1 {\n margin: 0;\n font-size: 2rem;\n font-weight: 700;\n }\n\n .wellad-form-container .form-header p {\n margin: 0.8rem 0 0;\n opacity: 0.9;\n font-size: 1rem;\n }\n\n .wellad-form-container .progress-bar {\n height: 6px;\n background: rgba(255, 255, 255, 0.3);\n margin-top: 1.5rem;\n border-radius: 3px;\n }\n\n .wellad-form-container .progress-fill {\n height: 100%;\n width: 25%;\n background: white;\n border-radius: 3px;\n transition: var(--transition);\n }\n\n .wellad-form-container .form-body {\n padding: 2rem;\n }\n\n .wellad-form-container .form-section {\n margin-bottom: 1.5rem;\n background: var(--section-bg);\n border-radius: var(--radius);\n overflow: hidden;\n transition: var(--transition);\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);\n }\n\n .wellad-form-container .section-expanded .section-content {\n max-height: 5000px;\n }\n\n .wellad-form-container .section-header {\n padding: 1.25rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n background: white;\n transition: var(--transition);\n }\n\n .wellad-form-container .section-header:hover {\n background: #f8fafc;\n }\n\n .wellad-form-container .section-header h2 {\n margin: 0;\n font-size: 1.1rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 0.8rem;\n }\n\n .wellad-form-container .section-header i {\n font-size: 1rem;\n color: var(--primary);\n transition: var(--transition);\n }\n\n .wellad-form-container .section-expanded .section-header i {\n transform: rotate(180deg);\n }\n\n .wellad-form-container .section-content {\n max-height: 0;\n overflow: hidden;\n transition: var(--transition);\n padding: 0 1.25rem;\n }\n\n .wellad-form-container .section-content-inner {\n padding: 0 0 1.25rem;\n }\n\n .wellad-form-container .form-group {\n margin-bottom: 1.25rem;\n }\n\n .wellad-form-container label {\n display: block;\n margin-bottom: 0.5rem;\n font-weight: 500;\n font-size: 0.9rem;\n }\n\n .wellad-form-container .required-field::after {\n content: \" *\";\n color: #ef4444;\n }\n\n .wellad-form-container input:not([type=\"checkbox\"]):not([type=\"radio\"]),\n .wellad-form-container textarea,\n .wellad-form-container select {\n width: 100%;\n padding: 0.8rem 1rem;\n border: 1px solid var(--border);\n border-radius: var(--radius);\n font-size: 0.95rem;\n transition: var(--transition);\n }\n\n .wellad-form-container input:focus,\n .wellad-form-container textarea:focus,\n .wellad-form-container select:focus {\n outline: none;\n border-color: var(--primary);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);\n }\n\n .wellad-form-container textarea {\n min-height: 120px;\n resize: vertical;\n }\n\n .wellad-form-container .options-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n gap: 0.8rem;\n }\n\n .wellad-form-container .option-item {\n display: flex;\n align-items: center;\n background: white;\n padding: 0.8rem;\n border-radius: var(--radius);\n border: 1px solid var(--border);\n transition: var(--transition);\n cursor: pointer;\n }\n\n .wellad-form-container .option-item:hover {\n border-color: var(--primary);\n transform: translateY(-2px);\n box-shadow: 0 4px 6px rgba(37, 99, 235, 0.1);\n }\n\n .wellad-form-container .option-item input {\n margin-right: 0.6rem;\n }\n\n .wellad-form-container .radio-group {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n gap: 0.8rem;\n }\n\n .wellad-form-container .radio-option {\n display: flex;\n align-items: center;\n background: white;\n padding: 0.8rem;\n border-radius: var(--radius);\n border: 1px solid var(--border);\n transition: var(--transition);\n cursor: pointer;\n }\n\n .wellad-form-container .radio-option:hover {\n border-color: var(--primary);\n transform: translateY(-2px);\n box-shadow: 0 4px 6px rgba(37, 99, 235, 0.1);\n }\n\n .wellad-form-container .radio-option input {\n margin-right: 0.6rem;\n }\n\n .wellad-form-container .color-picker {\n display: flex;\n align-items: center;\n gap: 1rem;\n }\n\n .wellad-form-container .color-picker input[type=\"color\"] {\n width: 50px;\n height: 50px;\n padding: 0;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n overflow: hidden;\n }\n\n .wellad-form-container .color-picker input[type=\"color\"]::-webkit-color-swatch {\n border: none;\n border-radius: 50%;\n }\n\n .wellad-form-container .file-upload {\n border: 2px dashed var(--border);\n padding: 1.5rem;\n text-align: center;\n border-radius: var(--radius);\n background: white;\n transition: var(--transition);\n cursor: pointer;\n }\n\n .wellad-form-container .file-upload:hover {\n border-color: var(--primary);\n background: rgba(37, 99, 235, 0.03);\n }\n\n .wellad-form-container .file-upload input {\n display: none;\n }\n\n .wellad-form-container .file-upload label {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.7rem 1.5rem;\n background: var(--primary);\n color: white;\n border-radius: var(--radius);\n cursor: pointer;\n transition: var(--transition);\n font-weight: 500;\n }\n\n .wellad-form-container .file-upload label:hover {\n background: var(--primary-dark);\n }\n\n .wellad-form-container .file-upload p {\n margin-top: 0.8rem;\n font-size: 0.85rem;\n color: var(--text-light);\n }\n\n .wellad-form-container .form-footer {\n text-align: center;\n margin-top: 1.5rem;\n padding-top: 1.5rem;\n border-top: 1px solid var(--border);\n }\n\n .wellad-form-container .btn {\n padding: 0.9rem 1.8rem;\n border: none;\n border-radius: var(--radius);\n font-size: 0.95rem;\n font-weight: 600;\n cursor: pointer;\n transition: var(--transition);\n display: inline-flex;\n align-items: center;\n gap: 0.6rem;\n }\n\n .wellad-form-container .btn-primary {\n background: var(--primary);\n color: white;\n }\n\n .wellad-form-container .btn-primary:hover {\n background: var(--primary-dark);\n transform: translateY(-2px);\n box-shadow: 0 4px 8px rgba(37, 99, 235, 0.2);\n }\n\n .wellad-form-container .success-message {\n display: none;\n padding: 1.5rem;\n background-color: #ecfdf5;\n color: #065f46;\n border-radius: var(--radius);\n margin-bottom: 1.5rem;\n text-align: center;\n border-left: 4px solid var(--success);\n }\n\n .wellad-form-container .success-message h3 {\n margin-top: 0;\n color: #065f46;\n }\n\n .wellad-form-container .tech-stack {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));\n gap: 0.8rem;\n }\n\n .wellad-form-container .tech-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n background: white;\n padding: 1rem;\n border-radius: var(--radius);\n border: 1px solid var(--border);\n transition: var(--transition);\n cursor: pointer;\n text-align: center;\n }\n\n .wellad-form-container .tech-item:hover {\n border-color: var(--primary);\n transform: translateY(-3px);\n box-shadow: 0 5px 12px rgba(37, 99, 235, 0.1);\n }\n\n .wellad-form-container .tech-item i {\n font-size: 1.8rem;\n margin-bottom: 0.5rem;\n color: var(--primary);\n }\n\n .wellad-form-container .tech-item span {\n font-size: 0.85rem;\n }\n\n @media (max-width: 768px) {\n .wellad-form-container .options-grid,\n .wellad-form-container .radio-group,\n .wellad-form-container .tech-stack {\n grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n }\n \n .wellad-form-container .form-body {\n padding: 1.5rem;\n }\n }\n\n @media (max-width: 480px) {\n .wellad-form-container .options-grid,\n .wellad-form-container .radio-group,\n .wellad-form-container .tech-stack {\n grid-template-columns: 1fr;\n }\n \n .wellad-form-container .color-picker {\n flex-direction: column;\n align-items: flex-start;\n }\n \n .wellad-form-container .form-header {\n padding: 1.5rem;\n }\n \n .wellad-form-container .form-header h1 {\n font-size: 1.8rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"wellad-form-container\">\n <div class=\"form-container\">\n <div class=\"form-header\">\n <h1><i class=\"fas fa-laptop-code\"><\/i> Project Inquiry<\/h1>\n <p>Tell us about your project and we'll get back to you with a proposal<\/p>\n <div class=\"progress-bar\">\n <div class=\"progress-fill\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"form-body\">\n <div class=\"success-message\" id=\"successMessage\">\n <i class=\"fas fa-check-circle\"><\/i>\n <h3>Thank you for your submission!<\/h3>\n <p>We've received your project details and will contact you shortly.<\/p>\n <\/div>\n\n <form id=\"projectForm\">\n \n <div class=\"form-section section-expanded\">\n <div class=\"section-header\">\n <h2><i class=\"fas fa-user\"><\/i> Basic Information<\/h2>\n <i class=\"fas fa-chevron-down\"><\/i>\n <\/div>\n <div class=\"section-content\">\n <div class=\"section-content-inner\">\n <div class=\"form-group\">\n <label for=\"fullName\" class=\"required-field\">Full Name<\/label>\n <input type=\"text\" id=\"fullName\" name=\"fullName\" required placeholder=\"John Smith\">\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"company\">Company \/ Organization Name<\/label>\n <input type=\"text\" id=\"company\" name=\"company\" placeholder=\"Acme Inc.\">\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"email\" class=\"required-field\">Email Address<\/label>\n <input type=\"email\" id=\"email\" name=\"email\" required placeholder=\"john@example.com\">\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"phone\">Phone Number<\/label>\n <input type=\"tel\" id=\"phone\" name=\"phone\" placeholder=\"+1 (123) 456-7890\">\n <\/div>\n \n <div class=\"form-group\">\n <label>Preferred Contact Method<\/label>\n <div class=\"options-grid\">\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"contact-email\" name=\"contactMethod\" value=\"Email\">\n <label for=\"contact-email\">Email<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"contact-phone\" name=\"contactMethod\" value=\"Phone\">\n <label for=\"contact-phone\">Phone<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"contact-whatsapp\" name=\"contactMethod\" value=\"WhatsApp\">\n <label for=\"contact-whatsapp\">WhatsApp<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"contact-other\" name=\"contactMethod\" value=\"Other\">\n <label for=\"contact-other\">Other<\/label>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\">\n <div class=\"section-header\">\n <h2><i class=\"fas fa-cube\"><\/i> Project Type<\/h2>\n <i class=\"fas fa-chevron-down\"><\/i>\n <\/div>\n <div class=\"section-content\">\n <div class=\"section-content-inner\">\n <p>Select all that apply<\/p>\n <div class=\"options-grid\">\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"type-website\" name=\"projectType\" value=\"Website Development\">\n <label for=\"type-website\">Website Development<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"type-mobile\" name=\"projectType\" value=\"Mobile App Development\">\n <label for=\"type-mobile\">Mobile App Development<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"type-webapp\" name=\"projectType\" value=\"Web + App Development\">\n <label for=\"type-webapp\">Web + App Development<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"type-ecommerce\" name=\"projectType\" value=\"E-commerce Store\">\n <label for=\"type-ecommerce\">E-commerce Store<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"type-portfolio\" name=\"projectType\" value=\"Portfolio or Blog\">\n <label for=\"type-portfolio\">Portfolio or Blog<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"type-corporate\" name=\"projectType\" value=\"Corporate\/Business Website\">\n <label for=\"type-corporate\">Corporate\/Business Website<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"type-landing\" name=\"projectType\" value=\"Landing Page\">\n <label for=\"type-landing\">Landing Page<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"type-custom\" name=\"projectType\" value=\"Custom Web Application\">\n <label for=\"type-custom\">Custom Web Application<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"type-uiux\" name=\"projectType\" value=\"UI\/UX Design Only\">\n <label for=\"type-uiux\">UI\/UX Design Only<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"type-other\" name=\"projectType\" value=\"Other\">\n <label for=\"type-other\">Other<\/label>\n <input type=\"text\" id=\"type-other-text\" name=\"projectTypeOther\" placeholder=\"Please specify\" style=\"margin-top: 0.5rem; display: none;\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\">\n <div class=\"section-header\">\n <h2><i class=\"fas fa-file-alt\"><\/i> Project Description<\/h2>\n <i class=\"fas fa-chevron-down\"><\/i>\n <\/div>\n <div class=\"section-content\">\n <div class=\"section-content-inner\">\n <div class=\"form-group\">\n <label for=\"description\" class=\"required-field\">Please describe your project, its purpose, and the features you need<\/label>\n <textarea id=\"description\" name=\"description\" required placeholder=\"Describe your vision, target audience, and key functionalities...\"><\/textarea>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\">\n <div class=\"section-header\">\n <h2><i class=\"fas fa-palette\"><\/i> Design Preferences<\/h2>\n <i class=\"fas fa-chevron-down\"><\/i>\n <\/div>\n <div class=\"section-content\">\n <div class=\"section-content-inner\">\n <div class=\"form-group\">\n <label for=\"example-sites\">Website(s) or App(s) you like (URLs)<\/label>\n <input type=\"text\" id=\"example-sites\" name=\"exampleSites\" placeholder=\"https:\/\/example.com\">\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"liked-features\">What you like about these examples<\/label>\n <textarea id=\"liked-features\" name=\"likedFeatures\" placeholder=\"Design elements, features, layout, etc...\"><\/textarea>\n <\/div>\n \n <div class=\"form-group\">\n <label>Expected number of pages\/screens<\/label>\n <div class=\"radio-group\">\n <div class=\"radio-option\">\n <input type=\"radio\" id=\"pages-1-3\" name=\"pageCount\" value=\"1-3\">\n <label for=\"pages-1-3\">1\u20133<\/label>\n <\/div>\n <div class=\"radio-option\">\n <input type=\"radio\" id=\"pages-4-7\" name=\"pageCount\" value=\"4-7\">\n <label for=\"pages-4-7\">4\u20137<\/label>\n <\/div>\n <div class=\"radio-option\">\n <input type=\"radio\" id=\"pages-8-12\" name=\"pageCount\" value=\"8-12\">\n <label for=\"pages-8-12\">8\u201312<\/label>\n <\/div>\n <div class=\"radio-option\">\n <input type=\"radio\" id=\"pages-13plus\" name=\"pageCount\" value=\"13+\">\n <label for=\"pages-13plus\">13+<\/label>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"page-names\">Specific page names (if known)<\/label>\n <input type=\"text\" id=\"page-names\" name=\"pageNames\" placeholder=\"Home, About, Services, Contact...\">\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"color-scheme\">Preferred color scheme<\/label>\n <div class=\"color-picker\">\n <input type=\"color\" id=\"color-scheme\" name=\"colorScheme\" value=\"#2563eb\">\n <input type=\"text\" id=\"color-hex\" name=\"colorHex\" placeholder=\"#2563eb\" maxlength=\"7\">\n <\/div>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"fonts\">Preferred fonts \/ typography<\/label>\n <input type=\"text\" id=\"fonts\" name=\"fonts\" placeholder=\"e.g., 'Inter', sans-serif\">\n <\/div>\n \n <div class=\"form-group\">\n <label>Branding materials<\/label>\n <div class=\"file-upload\">\n <input type=\"file\" id=\"branding-files\" name=\"brandingFiles\" accept=\".jpg,.jpeg,.png,.pdf,.ai,.psd,.zip\" multiple>\n <label for=\"branding-files\"><i class=\"fas fa-upload\"><\/i> Upload Files<\/label>\n <p>Accepted: JPG, PNG, PDF, AI, PSD, ZIP (Max 10MB)<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\">\n <div class=\"section-header\">\n <h2><i class=\"fas fa-cogs\"><\/i> Features & Requirements<\/h2>\n <i class=\"fas fa-chevron-down\"><\/i>\n <\/div>\n <div class=\"section-content\">\n <div class=\"section-content-inner\">\n <p>Select all that apply<\/p>\n <div class=\"options-grid\">\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"feature-login\" name=\"features\" value=\"User Login\/Signup\">\n <label for=\"feature-login\">User Login\/Signup<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"feature-admin\" name=\"features\" value=\"Admin Panel\">\n <label for=\"feature-admin\">Admin Panel<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"feature-contact\" name=\"features\" value=\"Contact Forms\">\n <label for=\"feature-contact\">Contact Forms<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"feature-booking\" name=\"features\" value=\"Booking System\">\n <label for=\"feature-booking\">Booking System<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"feature-blog\" name=\"features\" value=\"Blog\/News Section\">\n <label for=\"feature-blog\">Blog\/News Section<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"feature-ecommerce\" name=\"features\" value=\"E-commerce Integration\">\n <label for=\"feature-ecommerce\">E-commerce Integration<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"feature-payment\" name=\"features\" value=\"Payment Gateway\">\n <label for=\"feature-payment\">Payment Gateway<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"feature-multilang\" name=\"features\" value=\"Multi-language Support\">\n <label for=\"feature-multilang\">Multi-language Support<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"feature-responsive\" name=\"features\" value=\"Responsive Design\">\n <label for=\"feature-responsive\">Responsive Design<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"feature-cms\" name=\"features\" value=\"CMS Integration\">\n <label for=\"feature-cms\">CMS Integration<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"feature-seo\" name=\"features\" value=\"SEO Optimization\">\n <label for=\"feature-seo\">SEO Optimization<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"feature-email\" name=\"features\" value=\"Email Marketing\">\n <label for=\"feature-email\">Email Marketing<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"feature-chat\" name=\"features\" value=\"Chatbot\/Live Chat\">\n <label for=\"feature-chat\">Chatbot\/Live Chat<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"feature-social\" name=\"features\" value=\"Social Media Integration\">\n <label for=\"feature-social\">Social Media Integration<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"feature-api\" name=\"features\" value=\"API Integration\">\n <label for=\"feature-api\">API Integration<\/label>\n <\/div>\n <div class=\"option-item\">\n <input type=\"checkbox\" id=\"feature-other\" name=\"features\" value=\"Other\">\n <label for=\"feature-other\">Other<\/label>\n <input type=\"text\" id=\"feature-other-text\" name=\"featuresOther\" placeholder=\"Please specify\" style=\"margin-top: 0.5rem; display: none;\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\">\n <div class=\"section-header\">\n <h2><i class=\"fas fa-microchip\"><\/i> Tech Stack Preferences<\/h2>\n <i class=\"fas fa-chevron-down\"><\/i>\n <\/div>\n <div class=\"section-content\">\n <div class=\"section-content-inner\">\n <p>Select preferred technologies (optional)<\/p>\n <div class=\"tech-stack\">\n <div class=\"tech-item\">\n <i class=\"fab fa-react\"><\/i>\n <span>React<\/span>\n <input type=\"checkbox\" id=\"tech-react\" name=\"techStack\" value=\"React\">\n <\/div>\n <div class=\"tech-item\">\n <i class=\"fab fa-angular\"><\/i>\n <span>Angular<\/span>\n <input type=\"checkbox\" id=\"tech-angular\" name=\"techStack\" value=\"Angular\">\n <\/div>\n <div class=\"tech-item\">\n <i class=\"fab fa-vuejs\"><\/i>\n <span>Vue.js<\/span>\n <input type=\"checkbox\" id=\"tech-vue\" name=\"techStack\" value=\"Vue.js\">\n <\/div>\n <div class=\"tech-item\">\n <i class=\"fab fa-node-js\"><\/i>\n <span>Node.js<\/span>\n <input type=\"checkbox\" id=\"tech-node\" name=\"techStack\" value=\"Node.js\">\n <\/div>\n <div class=\"tech-item\">\n <i class=\"fab fa-laravel\"><\/i>\n <span>Laravel<\/span>\n <input type=\"checkbox\" id=\"tech-laravel\" name=\"techStack\" value=\"Laravel\">\n <\/div>\n <div class=\"tech-item\">\n <i class=\"fas fa-database\"><\/i>\n <span>MongoDB<\/span>\n <input type=\"checkbox\" id=\"tech-mongo\" name=\"techStack\" value=\"MongoDB\">\n <\/div>\n <div class=\"tech-item\">\n <i class=\"fas fa-server\"><\/i>\n <span>MySQL<\/span>\n <input type=\"checkbox\" id=\"tech-mysql\" name=\"techStack\" value=\"MySQL\">\n <\/div>\n <div class=\"tech-item\">\n <i class=\"fab fa-aws\"><\/i>\n <span>AWS<\/span>\n <input type=\"checkbox\" id=\"tech-aws\" name=\"techStack\" value=\"AWS\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\">\n <div class=\"section-header\">\n <h2><i class=\"fas fa-globe\"><\/i> Domain & Hosting<\/h2>\n <i class=\"fas fa-chevron-down\"><\/i>\n <\/div>\n <div class=\"section-content\">\n <div class=\"section-content-inner\">\n <div class=\"form-group\">\n <label>Do you have a domain name?<\/label>\n <div class=\"radio-group\">\n <div class=\"radio-option\">\n <input type=\"radio\" id=\"domain-yes\" name=\"hasDomain\" value=\"yes\">\n <label for=\"domain-yes\">Yes<\/label>\n <\/div>\n <div class=\"radio-option\">\n <input type=\"radio\" id=\"domain-no\" name=\"hasDomain\" value=\"no\">\n <label for=\"domain-no\">No<\/label>\n <\/div>\n <\/div>\n <input type=\"text\" id=\"domain-name\" name=\"domainName\" placeholder=\"yourdomain.com\" style=\"margin-top: 0.5rem; display: none;\">\n <\/div>\n \n <div class=\"form-group\">\n <label>Do you have web hosting?<\/label>\n <div class=\"radio-group\">\n <div class=\"radio-option\">\n <input type=\"radio\" id=\"hosting-yes\" name=\"hasHosting\" value=\"yes\">\n <label for=\"hosting-yes\">Yes<\/label>\n <\/div>\n <div class=\"radio-option\">\n <input type=\"radio\" id=\"hosting-no\" name=\"hasHosting\" value=\"no\">\n <label for=\"hosting-no\">No<\/label>\n <\/div>\n <\/div>\n <input type=\"text\" id=\"hosting-provider\" name=\"hostingProvider\" placeholder=\"Hosting provider name\" style=\"margin-top: 0.5rem; display: none;\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n<div class=\"form-section\">\n <div class=\"section-header\">\n <h2><i class=\"fas fa-tags\"><\/i> Estimated Budget<\/h2>\n <i class=\"fas fa-chevron-down\"><\/i>\n <\/div>\n <div class=\"section-content\">\n <div class=\"section-content-inner\">\n <div class=\"radio-group\">\n <div class=\"radio-option\">\n <input type=\"radio\" id=\"budget-1-3k\" name=\"budget\" value=\"$1,000\u2013$3,000\">\n <label for=\"budget-1-3k\">$1,000\u2013$3,000<\/label>\n <\/div>\n <div class=\"radio-option\">\n <input type=\"radio\" id=\"budget-3-5k\" name=\"budget\" value=\"$3,000\u2013$5,000\">\n <label for=\"budget-3-5k\">$3,000\u2013$5,000<\/label>\n <\/div>\n <div class=\"radio-option\">\n <input type=\"radio\" id=\"budget-5-10k\" name=\"budget\" value=\"$5,000\u2013$10,000\">\n <label for=\"budget-5-10k\">$5,000\u2013$10,000<\/label>\n <\/div>\n <div class=\"radio-option\">\n <input type=\"radio\" id=\"budget-10-15k\" name=\"budget\" value=\"$10,000\u2013$15,000\">\n <label for=\"budget-10-15k\">$10,000\u2013$15,000<\/label>\n <\/div>\n <div class=\"radio-option\">\n <input type=\"radio\" id=\"budget-15kplus\" name=\"budget\" value=\"$15,000+\">\n <label for=\"budget-15kplus\">$15,000+<\/label>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n \n <div class=\"form-section\">\n <div class=\"section-header\">\n <h2><i class=\"fas fa-calendar-alt\"><\/i> Timeline & Extras<\/h2>\n <i class=\"fas fa-chevron-down\"><\/i>\n <\/div>\n <div class=\"section-content\">\n <div class=\"section-content-inner\">\n <div class=\"form-group\">\n <label for=\"timeline\">Preferred Deadline or Timeline<\/label>\n <input type=\"text\" id=\"timeline\" name=\"timeline\" placeholder=\"e.g., 3 months, ASAP, by December 2023...\">\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"notes\">Additional Notes<\/label>\n <textarea id=\"notes\" name=\"notes\" placeholder=\"Any special requests or additional information...\"><\/textarea>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\">\n <div class=\"section-header\">\n <h2><i class=\"fas fa-cloud-upload-alt\"><\/i> File Uploads<\/h2>\n <i class=\"fas fa-chevron-down\"><\/i>\n <\/div>\n <div class=\"section-content\">\n <div class=\"section-content-inner\">\n <div class=\"file-upload\">\n <input type=\"file\" id=\"support-files\" name=\"supportFiles\" accept=\".jpg,.jpeg,.png,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.zip,.rar\" multiple>\n <label for=\"support-files\"><i class=\"fas fa-upload\"><\/i> Upload Files<\/label>\n <p>Accepted: Images, PDFs, Documents, Spreadsheets, Presentations, ZIP (Max 10MB each)<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"form-footer\">\n <button type=\"submit\" class=\"btn btn-primary\">\n Submit Project <i class=\"fas fa-paper-plane\"><\/i>\n <\/button>\n <\/div>\n <\/form>\n <\/div>\n <\/div>\n <\/div>\n\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/js\/all.min.js\"><\/script>\n <script>\n document.addEventListener('DOMContentLoaded', function() {\n const formContainer = document.querySelector('.wellad-form-container');\n if (!formContainer) return;\n\n \/\/ Initialize sections (first one expanded by default)\n const sections = formContainer.querySelectorAll('.form-section');\n if (sections.length > 0) {\n sections[0].classList.add('section-expanded');\n }\n\n \/\/ Collapsible sections functionality\n formContainer.querySelectorAll('.section-header').forEach(header => {\n header.addEventListener('click', function() {\n const section = this.parentElement;\n section.classList.toggle('section-expanded');\n });\n });\n\n \/\/ Conditional fields\n const typeOtherCheckbox = formContainer.querySelector('#type-other');\n if (typeOtherCheckbox) {\n typeOtherCheckbox.addEventListener('change', function() {\n const otherText = formContainer.querySelector('#type-other-text');\n if (otherText) otherText.style.display = this.checked ? 'block' : 'none';\n });\n }\n\n const featureOtherCheckbox = formContainer.querySelector('#feature-other');\n if (featureOtherCheckbox) {\n featureOtherCheckbox.addEventListener('change', function() {\n const otherText = formContainer.querySelector('#feature-other-text');\n if (otherText) otherText.style.display = this.checked ? 'block' : 'none';\n });\n }\n\n \/\/ Domain name field toggle\n formContainer.querySelectorAll('input[name=\"hasDomain\"]').forEach(radio => {\n radio.addEventListener('change', function() {\n const domainInput = formContainer.querySelector('#domain-name');\n if (domainInput) domainInput.style.display = this.value === 'yes' && this.checked ? 'block' : 'none';\n });\n });\n\n \/\/ Hosting provider field toggle\n formContainer.querySelectorAll('input[name=\"hasHosting\"]').forEach(radio => {\n radio.addEventListener('change', function() {\n const hostingInput = formContainer.querySelector('#hosting-provider');\n if (hostingInput) hostingInput.style.display = this.value === 'yes' && this.checked ? 'block' : 'none';\n });\n });\n\n \/\/ Color picker sync\n const colorPicker = formContainer.querySelector('#color-scheme');\n const colorHex = formContainer.querySelector('#color-hex');\n if (colorPicker && colorHex) {\n colorPicker.addEventListener('input', function() {\n colorHex.value = this.value;\n });\n \n colorHex.addEventListener('input', function() {\n if (\/^#[0-9A-F]{6}$\/i.test(this.value)) {\n colorPicker.value = this.value;\n }\n });\n }\n\n \/\/ Form submission\n const form = formContainer.querySelector('#projectForm');\n if (form) {\n form.addEventListener('submit', function(e) {\n e.preventDefault();\n \n \/\/ Validate required fields\n const requiredFields = formContainer.querySelectorAll('[required]');\n let isValid = true;\n \n requiredFields.forEach(field => {\n if (!field.value.trim()) {\n field.style.borderColor = '#ef4444';\n isValid = false;\n } else {\n field.style.borderColor = '';\n }\n });\n \n if (!isValid) {\n alert('Please fill in all required fields');\n return;\n }\n\n \/\/ Collect all form data\n const formData = new FormData(this);\n const data = {};\n formData.forEach((value, key) => {\n \/\/ Handle multiple selections\n if (key === 'projectType' || key === 'features' || key === 'techStack' || key === 'contactMethod') {\n if (!data[key]) data[key] = [];\n data[key].push(value);\n } else {\n data[key] = value;\n }\n });\n\n \/\/ Format the email body\n let emailBody = `New Project Inquiry Submission:\\n\\n`;\n emailBody += `=== Basic Information ===\\n`;\n emailBody += `Name: ${data.fullName}\\n`;\n emailBody += `Company: ${data.company || 'Not provided'}\\n`;\n emailBody += `Email: ${data.email}\\n`;\n emailBody += `Phone: ${data.phone || 'Not provided'}\\n`;\n emailBody += `Preferred Contact: ${data.contactMethod ? data.contactMethod.join(', ') : 'Not specified'}\\n\\n`;\n \n emailBody += `=== Project Details ===\\n`;\n emailBody += `Project Type: ${data.projectType ? data.projectType.join(', ') : 'Not specified'}\\n`;\n emailBody += `Description: ${data.description}\\n\\n`;\n \n emailBody += `=== Design Preferences ===\\n`;\n emailBody += `Example Sites: ${data.exampleSites || 'Not provided'}\\n`;\n emailBody += `Liked Features: ${data.likedFeatures || 'Not provided'}\\n`;\n emailBody += `Pages\/Screens: ${data.pageCount || 'Not specified'}\\n`;\n emailBody += `Page Names: ${data.pageNames || 'Not specified'}\\n`;\n emailBody += `Color Scheme: ${data.colorHex || 'Not specified'}\\n`;\n emailBody += `Fonts: ${data.fonts || 'Not specified'}\\n\\n`;\n \n emailBody += `=== Technical Requirements ===\\n`;\n emailBody += `Features: ${data.features ? data.features.join(', ') : 'Not specified'}\\n`;\n emailBody += `Tech Stack: ${data.techStack ? data.techStack.join(', ') : 'Not specified'}\\n\\n`;\n \n emailBody += `=== Domain & Hosting ===\\n`;\n emailBody += `Has Domain: ${data.hasDomain || 'Not specified'}\\n`;\n if (data.hasDomain === 'yes') emailBody += `Domain Name: ${data.domainName || 'Not provided'}\\n`;\n emailBody += `Has Hosting: ${data.hasHosting || 'Not specified'}\\n`;\n if (data.hasHosting === 'yes') emailBody += `Hosting Provider: ${data.hostingProvider || 'Not provided'}\\n\\n`;\n \n emailBody += `=== Budget & Timeline ===\\n`;\n emailBody += `Budget: ${data.budget || 'Not specified'}\\n`;\n emailBody += `Timeline: ${data.timeline || 'Not specified'}\\n\\n`;\n \n emailBody += `=== Additional Notes ===\\n`;\n emailBody += `${data.notes || 'No additional notes'}\\n`;\n\n \/\/ Send to FormSubmit\n fetch('https:\/\/formsubmit.co\/ajax\/info@wellad.online', {\n method: 'POST',\n headers: { \n 'Content-Type': 'application\/json',\n 'Accept': 'application\/json'\n },\n body: JSON.stringify({\n name: data.fullName,\n email: data.email,\n subject: `New Project Inquiry from ${data.fullName}`,\n message: emailBody,\n _replyto: data.email,\n _template: 'table'\n })\n })\n .then(response => response.json())\n .then(data => {\n const successMessage = formContainer.querySelector('#successMessage');\n if (successMessage) {\n successMessage.style.display = 'block';\n this.reset();\n successMessage.scrollIntoView({ behavior: 'smooth' });\n }\n })\n .catch(error => {\n console.error('Error:', error);\n alert('There was an error submitting your form. Please try again or contact us directly at info@wellad.online');\n });\n });\n }\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Project Inquiry Form Project Inquiry Tell us about your project and we\u2019ll get back to you with a proposal Thank you for your submission! We\u2019ve received your project details and will contact you shortly. Basic Information Full Name Company \/ Organization Name Email Address Phone Number Preferred Contact Method Email Phone WhatsApp Other Project Type […]<\/p>\n","protected":false},"author":1,"featured_media":2498,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4925","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/wellad.online\/index.php\/wp-json\/wp\/v2\/pages\/4925","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wellad.online\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wellad.online\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wellad.online\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wellad.online\/index.php\/wp-json\/wp\/v2\/comments?post=4925"}],"version-history":[{"count":15,"href":"https:\/\/wellad.online\/index.php\/wp-json\/wp\/v2\/pages\/4925\/revisions"}],"predecessor-version":[{"id":5017,"href":"https:\/\/wellad.online\/index.php\/wp-json\/wp\/v2\/pages\/4925\/revisions\/5017"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wellad.online\/index.php\/wp-json\/wp\/v2\/media\/2498"}],"wp:attachment":[{"href":"https:\/\/wellad.online\/index.php\/wp-json\/wp\/v2\/media?parent=4925"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}