{"id":5193,"date":"2025-06-19T14:26:01","date_gmt":"2025-06-19T10:26:01","guid":{"rendered":"https:\/\/ibtekarlabs.com\/?post_type=forms&#038;p=5193"},"modified":"2025-06-19T16:29:31","modified_gmt":"2025-06-19T12:29:31","slug":"website-development","status":"publish","type":"forms","link":"https:\/\/ibtekarlabs.com\/ar\/forms\/website-development\/","title":{"rendered":"Website Development"},"content":{"rendered":"<div class=\"wpb-content-wrapper\">[vc_row][vc_column]<form enctype=\"multipart\/form-data\" id=\"5193\" class=\"ajax-form\" onsubmit=\"event.preventDefault();\"><input type=\"hidden\" name=\"ibtekarlabs_form_submit\" value=\"1\" \/><input type=\"hidden\" name=\"id\" value=\"5193\" \/><div class=\"row\">\r\n\r\n<div class=\"col-12 mb-3 form-section shadow-sm\"><div class=\"row\"><div class=\"col-12 mb-3\"><h3>Website Details<\/h3><\/div>\r\n<div class=\"col-lg-6 mb-3\" id=\"field-business-name\" >\n                <div class=\"form-floating\">\n                    <input type=\"text\" class=\"form-control\" id=\"business-name\" name=\"business-name\" required >\n                    <label for=\"business-name\">Business \/ Brand Name<\/label>\n                <\/div>\n            <\/div>\r\n<div class=\"col-lg-6 mb-3\" id=\"field-website-type\" >\n                <div class=\"form-floating\">\n                    <select class=\"form-select\" id=\"website-type\" name=\"website-type\" required>\n                        <option value=\"\">\u0627\u062e\u062a\u0631 \u0623\u062d\u062f \u0627\u0644\u062e\u064a\u0627\u0631\u0627\u062a<\/option>\n                        <option value=\"Company Profile\">Company Profile<\/option><option value=\"E-commerce\">E-commerce<\/option><option value=\"Portfolio\">Portfolio<\/option><option value=\"Landing Page\">Landing Page<\/option><option value=\"Blog\">Blog<\/option><option value=\"Other\">Other<\/option>\n                    <\/select>\n                    <label for=\"website-type\">Website Type<\/label>\n                <\/div>\n            <\/div>\r\n<div class=\"col-lg-6 d-none mb-3\" id=\"field-other-type\"  data-condition-field=\"website-type\" data-condition-value=\"Other\" data-relation=\"equals\">\n                <div class=\"form-floating\">\n                    <input type=\"text\" class=\"form-control\" id=\"other-type\" name=\"other-type\"  >\n                    <label for=\"other-type\">Please specify<\/label>\n                <\/div>\n            <\/div>\r\n<div class=\"col-lg-6 mb-3\" id=\"field-website-goals\" >\n                <div class=\"form-floating\">\n                    <textarea class=\"form-control\" id=\"website-goals\" name=\"website-goals\" required rows=\"3\"><\/textarea>\n                    <label for=\"website-goals\">What is the goal of the website?<\/label>\n                <\/div>\n            <\/div>\r\n<\/div><\/div>\r\n\r\n<div class=\"col-12 mb-3 form-section shadow-sm\"><div class=\"row\"><div class=\"col-12 mb-3\"><h3>Design &amp; Preferences<\/h3><\/div>\r\n<div class=\"col-lg-6 mb-3\">\n                <fieldset class=\"border rounded\">\n                    <legend class=\"w-auto\">Do you have logo, brand colors, or fonts?<\/legend>\n                    <div class=\"form-check \">\n                                <input class=\"form-check-input\" type=\"radio\" id=\"branding-assets_yes\" name=\"branding-assets\" value=\"Yes\" >\n                                <label class=\"form-check-label\" for=\"branding-assets_yes\">Yes<\/label>\n                            <\/div><div class=\"form-check \">\n                                <input class=\"form-check-input\" type=\"radio\" id=\"branding-assets_no\" name=\"branding-assets\" value=\"No\" >\n                                <label class=\"form-check-label\" for=\"branding-assets_no\">No<\/label>\n                            <\/div>\n                <\/fieldset>\n            <\/div>\r\n    <div class=\"col-lg-6 d-none mb-3\" id=\"field-upload-branding\"  data-condition-field=\"branding-assets\" data-condition-value=\"Yes\" data-relation=\"equals\">\n\t<fieldset class=\"border rounded\">\n\t\t<legend for=\"upload-branding\" class=\"w-auto mb-0\">Upload branding files<\/legend>\n\t\t<input type=\"file\" class=\"form-control w-100 rounded-0\" id=\"upload-branding\" name=\"file[upload-branding][]\"   accept=\"image\/jpeg,image\/png,application\/pdf\">\n\t\t<small class=\"form-text text-muted mx-1\">\n\t\t\t\u0627\u0644\u0635\u064a\u063a \u0627\u0644\u0645\u062a\u0627\u062d\u0629: (JPEG, PNG , PDF ). \u0623\u0643\u0628\u0631 \u062d\u062c\u0645: (3\u0645\u064a\u0642\u0627\u0628\u0627\u064a\u062a).\t\t<\/small>\n\t<\/fieldset>\n\n    <\/div>\n    \r\n<div class=\"col-lg-6 mb-3\" id=\"field-design-inspiration\" >\n                <div class=\"form-floating\">\n                    <textarea class=\"form-control\" id=\"design-inspiration\" name=\"design-inspiration\"  rows=\"3\"><\/textarea>\n                    <label for=\"design-inspiration\">Any specific design preferences?<\/label>\n                <\/div>\n            <\/div>\r\n<\/div><\/div>\r\n\r\n<div class=\"col-12 mb-3 form-section shadow-sm\"><div class=\"row\"><div class=\"col-12 mb-3\"><h3>Functionality Requirements<\/h3><\/div>\r\n<div class=\"col-lg-12 mb-3\">\n                <fieldset class=\"border rounded\">\n                    <legend class=\"w-auto\">Select the required features<\/legend>\n                    <div class=\"form-check \">\n                                <input class=\"form-check-input\" type=\"checkbox\" id=\"website-features_contact-form\" name=\"website-features[]\" value=\"Contact Form\" >\n                                <label class=\"form-check-label\" for=\"website-features_contact-form\">Contact Form<\/label>\n                            <\/div><div class=\"form-check \">\n                                <input class=\"form-check-input\" type=\"checkbox\" id=\"website-features_booking-system\" name=\"website-features[]\" value=\"Booking System\" >\n                                <label class=\"form-check-label\" for=\"website-features_booking-system\">Booking System<\/label>\n                            <\/div><div class=\"form-check \">\n                                <input class=\"form-check-input\" type=\"checkbox\" id=\"website-features_multilingual\" name=\"website-features[]\" value=\"Multilingual\" >\n                                <label class=\"form-check-label\" for=\"website-features_multilingual\">Multilingual<\/label>\n                            <\/div><div class=\"form-check \">\n                                <input class=\"form-check-input\" type=\"checkbox\" id=\"website-features_live-chat\" name=\"website-features[]\" value=\"Live Chat\" >\n                                <label class=\"form-check-label\" for=\"website-features_live-chat\">Live Chat<\/label>\n                            <\/div><div class=\"form-check \">\n                                <input class=\"form-check-input\" type=\"checkbox\" id=\"website-features_user-login\" name=\"website-features[]\" value=\"User Login\" >\n                                <label class=\"form-check-label\" for=\"website-features_user-login\">User Login<\/label>\n                            <\/div><div class=\"form-check \">\n                                <input class=\"form-check-input\" type=\"checkbox\" id=\"website-features_blog\" name=\"website-features[]\" value=\"Blog\" >\n                                <label class=\"form-check-label\" for=\"website-features_blog\">Blog<\/label>\n                            <\/div><div class=\"form-check \">\n                                <input class=\"form-check-input\" type=\"checkbox\" id=\"website-features_e-commerce\" name=\"website-features[]\" value=\"E-commerce\" >\n                                <label class=\"form-check-label\" for=\"website-features_e-commerce\">E-commerce<\/label>\n                            <\/div><div class=\"form-check \">\n                                <input class=\"form-check-input\" type=\"checkbox\" id=\"website-features_gallery\" name=\"website-features[]\" value=\"Gallery\" >\n                                <label class=\"form-check-label\" for=\"website-features_gallery\">Gallery<\/label>\n                            <\/div>\n                <\/fieldset>\n            <\/div>\r\n<div class=\"col-lg-12 mb-3\" id=\"field-extra-features\" >\n                <div class=\"form-floating\">\n                    <textarea class=\"form-control\" id=\"extra-features\" name=\"extra-features\"  rows=\"3\"><\/textarea>\n                    <label for=\"extra-features\">Any other functionality you need?<\/label>\n                <\/div>\n            <\/div>\r\n<\/div><\/div>\r\n\r\n<div class=\"col-12 mb-3 form-section shadow-sm\"><div class=\"row\"><div class=\"col-12 mb-3\"><h3>Content &amp; Timeline<\/h3><\/div>\r\n<div class=\"col-lg-6 mb-3\">\n                <fieldset class=\"border rounded\">\n                    <legend class=\"w-auto\">Do you have the content ready?<\/legend>\n                    <div class=\"form-check \">\n                                <input class=\"form-check-input\" type=\"radio\" id=\"content-status_yes\" name=\"content-status\" value=\"Yes\" >\n                                <label class=\"form-check-label\" for=\"content-status_yes\">Yes<\/label>\n                            <\/div><div class=\"form-check \">\n                                <input class=\"form-check-input\" type=\"radio\" id=\"content-status_no\" name=\"content-status\" value=\"No\" >\n                                <label class=\"form-check-label\" for=\"content-status_no\">No<\/label>\n                            <\/div><div class=\"form-check \">\n                                <input class=\"form-check-input\" type=\"radio\" id=\"content-status_some-content-ready\" name=\"content-status\" value=\"Some Content Ready\" >\n                                <label class=\"form-check-label\" for=\"content-status_some-content-ready\">Some Content Ready<\/label>\n                            <\/div>\n                <\/fieldset>\n            <\/div>\r\n    <div class=\"col-lg-6 d-none mb-3\" id=\"field-upload-content\"  data-condition-field=\"content-status\" data-condition-value=\"Yes\" data-relation=\"equals\">\n\t<fieldset class=\"border rounded\">\n\t\t<legend for=\"upload-content\" class=\"w-auto mb-0\">Attach available content<\/legend>\n\t\t<input type=\"file\" class=\"form-control w-100 rounded-0\" id=\"upload-content\" name=\"file[upload-content][]\"  multiple accept=\"application\/pdf,application\/msword,application\/vnd.openxmlformats-officedocument.wordprocessingml.document\">\n\t\t<small class=\"form-text text-muted mx-1\">\n\t\t\t\u0627\u0644\u0635\u064a\u063a \u0627\u0644\u0645\u062a\u0627\u062d\u0629: (PDF , DOC, DOCX ). \u0623\u0643\u0628\u0631 \u062d\u062c\u0645: (3\u0645\u064a\u0642\u0627\u0628\u0627\u064a\u062a).\t\t<\/small>\n\t<\/fieldset>\n\n    <\/div>\n    \r\n<div class=\"col-lg-6 mb-3\" id=\"field-timeline\" >\n                <div class=\"form-floating\">\n                    <select class=\"form-select\" id=\"timeline\" name=\"timeline\" required>\n                        <option value=\"\">\u0627\u062e\u062a\u0631 \u0623\u062d\u062f \u0627\u0644\u062e\u064a\u0627\u0631\u0627\u062a<\/option>\n                        <option value=\"1 Week\">1 Week<\/option><option value=\"2 Weeks\">2 Weeks<\/option><option value=\"1 Month\">1 Month<\/option><option value=\"2 Months\">2 Months<\/option><option value=\"Flexible\">Flexible<\/option>\n                    <\/select>\n                    <label for=\"timeline\">Estimated timeline<\/label>\n                <\/div>\n            <\/div>\r\n<\/div><\/div>\r\n\r\n<div class=\"col-12 mb-3 form-section shadow-sm\"><div class=\"row\"><div class=\"col-12 mb-3\"><h3>Reference Websites<\/h3><\/div>\r\n<div class=\"col-lg-6 mb-3\" id=\"field-sample-site-1\" >\n                <div class=\"form-floating\">\n                    <input type=\"text\" class=\"form-control\" id=\"sample-site-1\" name=\"sample-site-1\"  >\n                    <label for=\"sample-site-1\">Sample Website #1 (URL)<\/label>\n                <\/div>\n            <\/div>\r\n<div class=\"col-lg-6 mb-3\" id=\"field-sample-site-1-reason\" >\n                <div class=\"form-floating\">\n                    <textarea class=\"form-control\" id=\"sample-site-1-reason\" name=\"sample-site-1-reason\"  rows=\"3\"><\/textarea>\n                    <label for=\"sample-site-1-reason\">Why do you like this website?<\/label>\n                <\/div>\n            <\/div>\r\n<div class=\"col-lg-6 mb-3\" id=\"field-sample-site-2\" >\n                <div class=\"form-floating\">\n                    <input type=\"text\" class=\"form-control\" id=\"sample-site-2\" name=\"sample-site-2\"  >\n                    <label for=\"sample-site-2\">Sample Website #2 (URL)<\/label>\n                <\/div>\n            <\/div>\r\n<div class=\"col-lg-6 mb-3\" id=\"field-sample-site-2-reason\" >\n                <div class=\"form-floating\">\n                    <textarea class=\"form-control\" id=\"sample-site-2-reason\" name=\"sample-site-2-reason\"  rows=\"3\"><\/textarea>\n                    <label for=\"sample-site-2-reason\">Why do you like this website?<\/label>\n                <\/div>\n            <\/div>\r\n<div class=\"col-lg-6 mb-3\" id=\"field-sample-site-3\" >\n                <div class=\"form-floating\">\n                    <input type=\"text\" class=\"form-control\" id=\"sample-site-3\" name=\"sample-site-3\"  >\n                    <label for=\"sample-site-3\">Sample Website #3 (URL)<\/label>\n                <\/div>\n            <\/div>\r\n<div class=\"col-lg-6 mb-3\" id=\"field-sample-site-3-reason\" >\n                <div class=\"form-floating\">\n                    <textarea class=\"form-control\" id=\"sample-site-3-reason\" name=\"sample-site-3-reason\"  rows=\"3\"><\/textarea>\n                    <label for=\"sample-site-3-reason\">Why do you like this website?<\/label>\n                <\/div>\n            <\/div>\r\n<\/div><\/div>\r\n\r\n<div class=\"col-12 mb-3 form-section shadow-sm\"><div class=\"row\"><div class=\"col-12 mb-3\"><h3>Additional Notes<\/h3><\/div>\r\n<div class=\"col-lg-12 mb-3\" id=\"field-final-notes\" >\n                <div class=\"form-floating\">\n                    <textarea class=\"form-control\" id=\"final-notes\" name=\"final-notes\"  rows=\"3\"><\/textarea>\n                    <label for=\"final-notes\">Any additional notes or specific requirements?<\/label>\n                <\/div>\n            <\/div>\r\n<\/div><\/div>\r\n\r\n<div class=\"col-12 mb-3 form-section shadow-sm\"><div class=\"row\"><div class=\"col-12 mb-3\"><h3>Contact Information<\/h3><\/div>\r\n<div class=\"col-lg-6 mb-3\" id=\"field-full-name\" >\n                <div class=\"form-floating\">\n                    <input type=\"text\" class=\"form-control\" id=\"full-name\" name=\"full-name\" required >\n                    <label for=\"full-name\">Full Name<\/label>\n                <\/div>\n            <\/div>\r\n<div class=\"col-lg-6 mb-3\">\n                <div class=\"form-floating\">\n                    <input type=\"email\" class=\"form-control\" id=\"email\" name=\"email\" required>\n                    <label for=\"email\">Email<\/label>\n                <\/div>\n            <\/div>\r\n    <div class=\"col-lg-6 mb-3\">\n        <div class=\"input-group phone\">\n            <label for=\"phone\" class=\"col-form-label\">Phone<\/label>\n            <input id=\"phone_display\" type=\"tel\" class=\"form-control\"> <!-- User Types Here -->\n            <input type=\"hidden\" id=\"phone\" name=\"phone\"> <!-- Hidden Field for Submission -->\n        <\/div>\n    <\/div>\n<script>\nwindow.addEventListener(\"load\", function () {\n    var ar_tel_json_data = null;\n\n    function initializeIntlTelInput() {\n        const input = document.querySelector(\"#phone_display\");\n        if (!input) {\n            return;\n        }\n\n        const itiOptions = {\n            i18n: ar_tel_json_data,            separateDialCode: true,\n            countryOrder: [\"ae\", \"sa\", \"om\", \"kw\", \"qa\", \"bh\"],\n            initialCountry: \"auto\",\n            geoIpLookup: function (callback) {\n                fetch(\"https:\/\/ipapi.co\/json\")\n                    .then((res) => res.json())\n                    .then((data) => callback(data.country_code))\n                    .catch(() => callback(\"ae\"));\n            },\n            utilsScript: \"https:\/\/cdn.jsdelivr.net\/npm\/intl-tel-input@latest\/build\/js\/utils.js\",\n        };\n\n        if (ar_tel_json_data) {\n            itiOptions.customData = ar_tel_json_data;\n        }\n\n        const iti = window.intlTelInput(input, itiOptions);\n        window.iti = iti;\n\n        iti.promise\n            .then(() => console.log(\"utils.js loaded successfully.\"))\n            .catch((error) => console.error(\"Error loading utils.js:\", error));\n\n        input.addEventListener(\"input\", function () {\n            const rawValue = input.value.trim();\n            if (rawValue) {\n                validatePhoneNumber(input, iti);\n            } else {\n                input.classList.remove(\"is-invalid\", \"is-valid\");\n            }\n        });\n\n        input.addEventListener(\"countrychange\", function () {\n            const rawValue = input.value.trim();\n            if (rawValue) {\n                validatePhoneNumber(input, iti);\n            } else {\n                input.classList.remove(\"is-invalid\", \"is-valid\");\n            }\n        });\n    }\n\n    function validatePhoneNumber(input, iti) {\n        const rawValue = input.value.trim();\n        const countryData = iti.getSelectedCountryData();\n        const fullNumber = rawValue ? `+${countryData.dialCode}${rawValue}` : \"\";\n\n        try {\n            const parsedNumber = libphonenumber.parsePhoneNumberFromString(fullNumber, countryData.iso2);\n\n            if (parsedNumber && parsedNumber.isValid()) {\n                input.classList.remove(\"is-invalid\");\n                input.classList.add(\"is-valid\");\n\n                \/\/ Set the hidden input field value with full number\n                document.querySelector(\"#phone\").value = parsedNumber.formatInternational();\n                return true;\n            } else {\n                input.classList.remove(\"is-valid\");\n                input.classList.add(\"is-invalid\");\n                document.querySelector(\"#phone\").value = \"\"; \/\/ Clear hidden field on invalid input\n                return false;\n            }\n        } catch (error) {\n            input.classList.remove(\"is-valid\");\n            input.classList.add(\"is-invalid\");\n            document.querySelector(\"#phone\").value = \"\"; \/\/ Clear hidden field\n            return false;\n        }\n    }\n\n    function handleArabicLocalization(callback) {\n                jQuery.ajax({\n            url: customIntlTelInputData.jsonUrl,\n            dataType: 'json',\n        })\n            .done(function (data) {\n                ar_tel_json_data = data;\n                callback();\n            })\n            .fail(function (xhr, status, error) {\n                \/\/console.warn(\"Arabic localization data not loaded:\", error);\n                callback();\n            });\n            }\n\n    const phoneInput = document.querySelector(\"#phone_display\");\n    if (phoneInput) {\n        const observer = new IntersectionObserver(function (entries, observer) {\n            entries.forEach(function (entry) {\n                if (entry.isIntersecting) {\n                    observer.unobserve(entry.target);\n                    handleArabicLocalization(initializeIntlTelInput);\n                }\n            });\n        });\n\n        observer.observe(phoneInput);\n    }\n});\n<\/script>\n    \r\n<div class=\"col-lg-6 mb-3\" id=\"field-company\" >\n                <div class=\"form-floating\">\n                    <input type=\"text\" class=\"form-control\" id=\"company\" name=\"company\"  >\n                    <label for=\"company\">Company Name (optional)<\/label>\n                <\/div>\n            <\/div>\r\n<div class=\"col-12 mb-3\">\n                <fieldset class=\"border rounded\">\n                    <legend class=\"w-auto\">Preferred Contact Method<\/legend>\n                    <div class=\"form-check form-check-inline\">\n                                <input class=\"form-check-input\" type=\"checkbox\" id=\"preferred-contact_email\" name=\"preferred-contact[]\" value=\"Email\" >\n                                <label class=\"form-check-label\" for=\"preferred-contact_email\">Email<\/label>\n                            <\/div><div class=\"form-check form-check-inline\">\n                                <input class=\"form-check-input\" type=\"checkbox\" id=\"preferred-contact_phone-call\" name=\"preferred-contact[]\" value=\"Phone Call\" >\n                                <label class=\"form-check-label\" for=\"preferred-contact_phone-call\">Phone Call<\/label>\n                            <\/div><div class=\"form-check form-check-inline\">\n                                <input class=\"form-check-input\" type=\"checkbox\" id=\"preferred-contact_whatsapp\" name=\"preferred-contact[]\" value=\"Whatsapp\" >\n                                <label class=\"form-check-label\" for=\"preferred-contact_whatsapp\">Whatsapp<\/label>\n                            <\/div>\n                <\/fieldset>\n            <\/div>\r\n<\/div><\/div>\r\n\r\n<\/div><div class=\"cf-turnstile mb-3\" data-sitekey=\"0x4AAAAAAB6JNV8jszg8BEgh\" data-callback=\"onTurnstileSuccess\" data-error-callback=\"onTurnstileError\" data-form-id=\"5193\"><\/div><button type=\"submit\" class=\"btn btn-primary \" data-text=\"\u062c\u0627\u0631\u064a \u0627\u0644\u0625\u0631\u0633\u0627\u0644 ...\">\u0625\u0631\u0633\u0627\u0644<\/button><div id=\"form-messages\" class=\"mt-3\"><\/div><\/form><span class=\"captcha-notice\" style=\"font-size: 0.8rem; color: #666; margin-top: 10px;\">This site is protected by Cloudflare Turnstile.<\/span>[\/vc_column][\/vc_row]<\/div>","protected":false},"featured_media":0,"menu_order":0,"template":"","meta":[],"class_list":["post-5193","forms","type-forms","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ibtekarlabs.com\/ar\/wp-json\/wp\/v2\/forms\/5193","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibtekarlabs.com\/ar\/wp-json\/wp\/v2\/forms"}],"about":[{"href":"https:\/\/ibtekarlabs.com\/ar\/wp-json\/wp\/v2\/types\/forms"}],"wp:attachment":[{"href":"https:\/\/ibtekarlabs.com\/ar\/wp-json\/wp\/v2\/media?parent=5193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}