Qiym\u0259t T\u0259klifi Formu<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n background-color: #f5f5f5;\n padding: 0px;\n line-height: 1.6;\n }\n\n .form-container {\n max-width: 1000px;\n margin: 0 auto;\n background: white;\n border-radius: 12px;\n padding: 40px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n }\n\n .form-section {\n margin-bottom: 40px;\n }\n\n .section-title {\n font-size: 24px;\n font-weight: 600;\n color: #333;\n margin-bottom: 20px;\n padding-bottom: 10px;\n border-bottom: 2px solid #e0e0e0;\n }\n\n .form-row {\n display: flex;\n gap: 20px;\n margin-bottom: 20px;\n }\n\n .form-group {\n flex: 1;\n margin-bottom: 20px;\n }\n\n .form-group.full-width {\n flex: 1 1 100%;\n }\n\n label {\n display: block;\n margin-bottom: 8px;\n font-weight: 500;\n color: #555;\n font-size: 14px;\n }\n\n .required {\n color: #e74c3c;\n }\n\n input[type=\"text\"],\n input[type=\"email\"],\n input[type=\"tel\"],\n input[type=\"number\"],\n select,\n textarea {\n width: 100%;\n padding: 12px 16px;\n border: 2px solid #e0e0e0;\n border-radius: 8px;\n font-size: 16px;\n transition: all 0.3s ease;\n background-color: #fff;\n }\n\n input[type=\"text\"]:focus,\n input[type=\"email\"]:focus,\n input[type=\"tel\"]:focus,\n input[type=\"number\"]:focus,\n select:focus,\n textarea:focus {\n outline: none;\n border-color: #e53e3e;\n box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.1);\n }\n\n select {\n appearance: none;\n background-image: url(\"data:image\/svg+xml,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'\/%3e%3c\/svg%3e\");\n background-position: right 12px center;\n background-repeat: no-repeat;\n background-size: 16px;\n padding-right: 40px;\n }\n\n textarea {\n min-height: 120px;\n resize: vertical;\n }\n\n .checkbox-group {\n display: flex;\n gap: 20px;\n margin-bottom: 20px;\n flex-wrap: wrap;\n }\n\n .checkbox-item {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .checkbox-item input[type=\"checkbox\"],\n .checkbox-item input[type=\"radio\"] {\n width: 18px;\n height: 18px;\n accent-color: #e53e3e;\n }\n\n .checkbox-item label {\n margin-bottom: 0;\n font-weight: normal;\n cursor: pointer;\n }\n\n .file-upload {\n position: relative;\n display: inline-block;\n margin-bottom: 15px;\n }\n\n .file-upload input[type=\"file\"] {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n }\n\n .file-upload-label {\n display: inline-block;\n padding: 12px 20px;\n background-color: #f8f9fa;\n border: 2px dashed #dee2e6;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.3s ease;\n text-align: center;\n min-width: 200px;\n }\n\n .file-upload-label:hover {\n background-color: #e9ecef;\n border-color: #e53e3e;\n }\n\n .privacy-checkbox {\n margin: 30px 0;\n padding: 20px;\n background-color: #f8f9fa;\n border-radius: 8px;\n border-left: 4px solid #e53e3e;\n }\n\n .privacy-checkbox input[type=\"checkbox\"] {\n margin-right: 12px;\n width: 18px;\n height: 18px;\n accent-color: #e53e3e;\n }\n\n .privacy-text {\n font-size: 14px;\n line-height: 1.5;\n color: #666;\n }\n\n .privacy-link {\n color: #e74c3c;\n text-decoration: none;\n font-weight: 500;\n }\n\n .privacy-link:hover {\n text-decoration: underline;\n }\n\n .submit-btn {\n background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);\n color: white;\n padding: 15px 40px;\n border: none;\n border-radius: 8px;\n font-size: 16px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n position: relative;\n }\n\n .submit-btn:hover {\n background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);\n transform: translateY(-2px);\n box-shadow: 0 8px 25px rgba(231, 76, 60, 0.3);\n }\n\n .submit-btn:active {\n transform: translateY(0);\n }\n\n .submit-btn:disabled {\n background: #ccc;\n cursor: not-allowed;\n transform: none;\n }\n\n .loading {\n display: none;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n .spinner {\n width: 20px;\n height: 20px;\n border: 2px solid #ffffff;\n border-top: 2px solid transparent;\n border-radius: 50%;\n animation: spin 1s linear infinite;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n .success-message {\n background: linear-gradient(135deg, #27ae60, #2ecc71);\n color: white;\n padding: 20px;\n border-radius: 8px;\n text-align: center;\n margin: 20px 0;\n display: none;\n }\n\n .error-message {\n background: linear-gradient(135deg, #e74c3c, #c0392b);\n color: white;\n padding: 20px;\n border-radius: 8px;\n text-align: center;\n margin: 20px 0;\n display: none;\n }\n\n @media (max-width: 768px) {\n .form-container {\n padding: 20px;\n margin: 10px;\n }\n \n .form-row {\n flex-direction: column;\n gap: 0;\n }\n \n .checkbox-group {\n flex-direction: column;\n gap: 10px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"form-container\">\n <div class=\"success-message\" id=\"successMessage\">\n \u2705 <strong>Vielen Dank!<\/strong> Ihre Anfrage wurde erfolgreich gesendet. Wir werden uns so schnell wie m\u00f6glich bei Ihnen melden.\n <\/div>\n \n <div class=\"error-message\" id=\"errorMessage\">\n \u274c <strong>Fehler!<\/strong> Beim Senden ist ein Fehler aufgetreten. Bitte versuchen Sie es erneut.\n <\/div>\n\n <form id=\"quoteForm\" action=\"\">\n \n <div class=\"form-section\">\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"location\">Stadt ausw\u00e4hlen <span class=\"required\">*<\/span><\/label>\n <select id=\"location\" name=\"location\" required onchange=\"toggleOtherCity()\">\n <option value=\"\">Bitte ausw\u00e4hlen<\/option>\n <option value=\"frankfurt\">Frankfurt<\/option>\n <option value=\"mainz\">Mainz<\/option>\n <option value=\"wiesbaden\">Wiesbaden<\/option>\n <option value=\"ruesselsheim\">R\u00fcsselsheim<\/option>\n <option value=\"koeln\">K\u00f6ln<\/option>\n <option value=\"other\">Andere<\/option>\n <\/select>\n <\/div>\n <\/div>\n \n \n <div class=\"form-group\" id=\"other-city-group\" style=\"display: none;\">\n <label for=\"other_city\">Stadt eingeben <span class=\"required\">*<\/span><\/label>\n <input type=\"text\" id=\"other_city\" name=\"other_city\" placeholder=\"Bitte geben Sie Ihre Stadt ein\">\n <\/div>\n \n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"product\">Produktauswahl <span class=\"required\">*<\/span><\/label>\n <select id=\"product\" name=\"product\" required>\n <option value=\"\">Bitte ausw\u00e4hlen<\/option>\n <option value=\"terrassendach\">TERRASSENDACH<\/option>\n <option value=\"wintergarten\">Konservatuvar<\/option>\n <option value=\"seitenwaende\">SEITENW\u00c4NDE<\/option>\n <option value=\"carport\">Carport<\/option>\n <option value=\"beschattung\">G\u00f6lgelendirme<\/option>\n <option value=\"sonnenschutz\">Elektrischer Sonnenschutz<\/option>\n <option value=\"glasschiebew\u00e4nde\">S\u00fcrg\u00fcl\u00fc cam duvarlar<\/option>\n <option value=\"insektenschutz\">B\u00f6cek korumas\u0131<\/option>\n <\/select>\n <\/div>\n <\/div>\n \n \n <div class=\"form-group\">\n <label for=\"roof_covering\">Dachabdeckung <span class=\"required\">*<\/span><\/label>\n <select id=\"roof_covering\" name=\"roof_covering\" required>\n <option value=\"\">Bitte ausw\u00e4hlen<\/option>\n <option value=\"vsg_klar\">SICHERHEITSGLAS (VSG) - KLAR<\/option>\n <option value=\"vsg_milchig\">SICHERHEITSGLAS (VSG) - MILCHIG<\/option>\n <option value=\"polycarbonat_klar\">POLYCARBONAT - KLAR<\/option>\n <option value=\"polycarbonat_milchig\">POLYCARBONAT - MILCHIG<\/option>\n <\/select>\n <\/div>\n \n \n <div class=\"form-section\">\n <h3 style=\"margin-bottom: 12px;letter-spacing: 1px; color: #555; font-size: 20px;\">Ungef\u00e4hre Abmessungen (mm)<\/h3>\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"width\">Breite (mm)<\/label>\n <input type=\"number\" id=\"width\" name=\"width\" placeholder=\"z.B. 3000\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"length\">L\u00e4nge (mm)<\/label>\n <input type=\"number\" id=\"length\" name=\"length\" placeholder=\"z.B. 4000\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"height\">H\u00f6he (mm)<\/label>\n <input type=\"number\" id=\"height\" name=\"height\" placeholder=\"z.B. 2500\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\">\n <h4 class=\"section-title\">Ihre Daten<\/h4>\n \n \n <div class=\"checkbox-group\">\n <div class=\"checkbox-item\">\n <input type=\"radio\" id=\"company\" name=\"customer_type\" value=\"company\">\n <label for=\"company\">Firma<\/label>\n <\/div>\n <div class=\"checkbox-item\">\n <input type=\"radio\" id=\"individual_male\" name=\"customer_type\" value=\"individual_male\">\n <label for=\"individual_male\">Herr<\/label>\n <\/div>\n <div class=\"checkbox-item\">\n <input type=\"radio\" id=\"individual_female\" name=\"customer_type\" value=\"individual_female\">\n <label for=\"individual_female\">Frau<\/label>\n <\/div>\n <div class=\"checkbox-item\">\n <input type=\"radio\" id=\"diverse\" name=\"customer_type\" value=\"diverse\">\n <label for=\"diverse\">Divers<\/label>\n <\/div>\n <\/div>\n\n \n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"firstname\">Vorname <span class=\"required\">*<\/span><\/label>\n <input type=\"text\" id=\"firstname\" name=\"firstname\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"lastname\">Nachname <span class=\"required\">*<\/span><\/label>\n <input type=\"text\" id=\"lastname\" name=\"lastname\" required>\n <\/div>\n <\/div>\n\n \n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"email\">E-Mail-Adresse <span class=\"required\">*<\/span><\/label>\n <input type=\"email\" id=\"email\" name=\"email\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"phone\">Telefonnummer <span class=\"required\">*<\/span><\/label>\n <input type=\"tel\" id=\"phone\" name=\"phone\" required>\n <\/div>\n <\/div>\n\n \n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"street\">Stra\u00dfe <span class=\"required\">*<\/span><\/label>\n <input type=\"text\" id=\"street\" name=\"street\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"house_number\">Hausnummer <span class=\"required\">*<\/span><\/label>\n <input type=\"text\" id=\"house_number\" name=\"house_number\" required>\n <\/div>\n <\/div>\n\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"postal_code\">PLZ <span class=\"required\">*<\/span><\/label>\n <input type=\"text\" id=\"postal_code\" name=\"postal_code\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"city\">Ort <span class=\"required\">*<\/span><\/label>\n <input type=\"text\" id=\"city\" name=\"city\" required>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\">\n <div class=\"form-group\">\n <label for=\"how_found\">Wie sind Sie auf uns aufmerksam geworden?<\/label>\n <select id=\"how_found\" name=\"how_found\">\n <option value=\"\">Bitte ausw\u00e4hlen<\/option>\n <option value=\"google\">Google-Suche<\/option>\n <option value=\"social_media\">Social Media<\/option>\n <option value=\"recommendation\">Empfehlung<\/option>\n <option value=\"advertising\">Werbung<\/option>\n <option value=\"other\">Andere<\/option>\n <\/select>\n <\/div>\n\n <div class=\"form-group full-width\">\n <label for=\"message\">Ihre Nachricht<\/label>\n <textarea id=\"message\" name=\"message\" placeholder=\"Beschreiben Sie Ihr Projekt detailliert...\"><\/textarea>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\">\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label>Bild hochladen (optional):<\/label>\n <div class=\"file-upload\">\n <input type=\"file\" id=\"image1\" name=\"image1\" accept=\"image\/*\">\n <label for=\"image1\" class=\"file-upload-label\">\n \ud83d\udcce Datei w\u00e4hlen\n <\/label>\n <\/div>\n <\/div>\n <div class=\"form-group\">\n <label>Bild hochladen (optional):<\/label>\n <div class=\"file-upload\">\n <input type=\"file\" id=\"image2\" name=\"image2\" accept=\"image\/*\">\n <label for=\"image2\" class=\"file-upload-label\">\n \ud83d\udcce Datei w\u00e4hlen\n <\/label>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"form-group\">\n <div class=\"checkbox-item\">\n <input type=\"checkbox\" id=\"newsletter\" name=\"newsletter\">\n <label for=\"newsletter\">Ja, ich m\u00f6chte regelm\u00e4\u00dfig \u00fcber neue Angebote und Aktionen informiert werden.<\/label>\n <\/div>\n <\/div>\n\n \n <div class=\"privacy-checkbox\">\n <div class=\"checkbox-item\">\n <input type=\"checkbox\" id=\"privacy\" name=\"privacy\" required>\n <label for=\"privacy\" class=\"privacy-text\">\n <span class=\"required\">*<\/span> Ja, ich habe die <a href=\"#\" class=\"privacy-link\">Datenschutzerkl\u00e4rung<\/a> zur Kenntnis genommen und bin damit einverstanden, dass die von mir angegebenen Daten elektronisch erhoben und gespeichert werden. Meine Daten werden dabei nur streng zweckgebunden zur Bearbeitung und Beantwortung meiner Anfrage benutzt. Mit dem Absenden des Kontaktformulars erkl\u00e4re ich mich mit der Verarbeitung einverstanden.\n <\/label>\n <\/div>\n <\/div>\n\n \n <div class=\"form-group\">\n <button type=\"submit\" class=\"submit-btn\" id=\"submitBtn\">\n <span id=\"btnText\">Senden<\/span>\n <div class=\"loading\" id=\"loading\">\n <div class=\"spinner\"><\/div>\n <\/div>\n <\/button>\n <\/div>\n <input type=\"hidden\" name=\"trp-form-language\" value=\"tr\"\/><\/form>\n <\/div>\n\n <script>\n \/\/ Stadt \"Andere\" Auswahl Toggle\n function toggleOtherCity() {\n const locationSelect = document.getElementById('location');\n const otherCityGroup = document.getElementById('other-city-group');\n const otherCityInput = document.getElementById('other_city');\n \n if (locationSelect.value === 'other') {\n otherCityGroup.style.display = 'block';\n otherCityInput.setAttribute('required', 'required');\n } else {\n otherCityGroup.style.display = 'none';\n otherCityInput.removeAttribute('required');\n otherCityInput.value = '';\n }\n }\n\n \/\/ Datei-Auswahl Interaktivit\u00e4t\n document.querySelectorAll('input[type=\"file\"]').forEach(input => {\n input.addEventListener('change', function() {\n const label = this.nextElementSibling;\n if (this.files.length > 0) {\n label.textContent = `\ud83d\udcce ${this.files[0].name}`;\n label.style.backgroundColor = '#e8f5e8';\n label.style.borderColor = '#28a745';\n } else {\n label.textContent = '\ud83d\udcce Datei w\u00e4hlen';\n label.style.backgroundColor = '#f8f9fa';\n label.style.borderColor = '#dee2e6';\n }\n });\n });\n\n \/\/ Formular senden\n document.getElementById('quoteForm').addEventListener('submit', function(e) {\n e.preventDefault();\n \n \/\/ Loading state\n const submitBtn = document.getElementById('submitBtn');\n const btnText = document.getElementById('btnText');\n const loading = document.getElementById('loading');\n const successMessage = document.getElementById('successMessage');\n const errorMessage = document.getElementById('errorMessage');\n \n \/\/ Hide previous messages\n successMessage.style.display = 'none';\n errorMessage.style.display = 'none';\n \n \/\/ Pflichtfelder pr\u00fcfen\n const requiredFields = this.querySelectorAll('[required]');\n let isValid = true;\n \n requiredFields.forEach(field => {\n if (!field.value.trim()) {\n field.style.borderColor = '#e74c3c';\n isValid = false;\n } else {\n field.style.borderColor = '#e0e0e0';\n }\n });\n \n if (!isValid) {\n errorMessage.innerHTML = '\u274c <strong>Fehler!<\/strong> Bitte f\u00fcllen Sie alle Pflichtfelder aus.';\n errorMessage.style.display = 'block';\n return;\n }\n \n \/\/ Show loading\n btnText.style.display = 'none';\n loading.style.display = 'block';\n submitBtn.disabled = true;\n \n \/\/ Prepare form data\n const formData = new FormData(this);\n formData.append('action', 'submit_az_quote_form');\n \n \/\/ Get nonce from WordPress (you need to add this to your page)\n const nonce = document.querySelector('meta[name=\"az-quote-nonce\"]')?.getAttribute('content') || '';\n formData.append('nonce', nonce);\n \n \/\/ Send to WordPress\n fetch(ajaxurl || '\/wp-admin\/admin-ajax.php', {\n method: 'POST',\n body: formData\n })\n .then(response => response.json())\n .then(data => {\n \/\/ Hide loading\n btnText.style.display = 'inline';\n loading.style.display = 'none';\n submitBtn.disabled = false;\n \n if (data.success) {\n successMessage.style.display = 'block';\n this.reset(); \/\/ Clear form\n \n \/\/ Scroll to success message\n successMessage.scrollIntoView({ \n behavior: 'smooth', \n block: 'center' \n });\n } else {\n errorMessage.innerHTML = `\u274c <strong>Fehler!<\/strong> ${data.data || 'Beim Senden ist ein Fehler aufgetreten.'}`;\n errorMessage.style.display = 'block';\n }\n })\n .catch(error => {\n console.error('Error:', error);\n \n \/\/ Hide loading\n btnText.style.display = 'inline';\n loading.style.display = 'none';\n submitBtn.disabled = false;\n \n errorMessage.innerHTML = '\u274c <strong>Fehler!<\/strong> Beim Senden ist ein Fehler aufgetreten. Bitte versuchen Sie es erneut.';\n errorMessage.style.display = 'block';\n });\n });\n\n \/\/ Real-time form validation\n document.querySelectorAll('input, select, textarea').forEach(field => {\n field.addEventListener('blur', function() {\n if (this.hasAttribute('required') && !this.value.trim()) {\n this.style.borderColor = '#e74c3c';\n } else {\n this.style.borderColor = '#e0e0e0';\n }\n });\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Unverbindliches Angebot anfordern! Qiym\u0259t T\u0259klifi Formu \u2705 Vielen Dank! Ihre Anfrage wurde erfolgreich gesendet. Wir werden uns so schnell wie m\u00f6glich bei Ihnen melden. \u274c Fehler! Beim Senden ist ein Fehler aufgetreten. Bitte versuchen Sie es erneut. Stadt ausw\u00e4hlen * Bitte ausw\u00e4hlenFrankfurtMainzWiesbadenR\u00fcsselsheimK\u00f6lnAndere Stadt eingeben * Produktauswahl * Bitte ausw\u00e4hlenTERRASSENDACHWintergartenSEITENW\u00c4NDECarportBeschattungElektrischer SonnenschutzGlasschiebew\u00e4ndeInsektenschutz Dachabdeckung * Bitte ausw\u00e4hlenSICHERHEITSGLAS (VSG) […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1824","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/azgruppe.eu\/tr\/wp-json\/wp\/v2\/pages\/1824","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/azgruppe.eu\/tr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/azgruppe.eu\/tr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/azgruppe.eu\/tr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/azgruppe.eu\/tr\/wp-json\/wp\/v2\/comments?post=1824"}],"version-history":[{"count":25,"href":"https:\/\/azgruppe.eu\/tr\/wp-json\/wp\/v2\/pages\/1824\/revisions"}],"predecessor-version":[{"id":1980,"href":"https:\/\/azgruppe.eu\/tr\/wp-json\/wp\/v2\/pages\/1824\/revisions\/1980"}],"wp:attachment":[{"href":"https:\/\/azgruppe.eu\/tr\/wp-json\/wp\/v2\/media?parent=1824"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}