{"id":1327,"date":"2025-09-26T21:42:39","date_gmt":"2025-09-27T03:42:39","guid":{"rendered":"https:\/\/autoplastek.com\/?page_id=1327"},"modified":"2025-09-26T21:42:40","modified_gmt":"2025-09-27T03:42:40","slug":"1327-2","status":"publish","type":"page","link":"https:\/\/autoplastek.com\/en\/1327-2\/","title":{"rendered":""},"content":{"rendered":"<p><!-- C\u00d3DIGO PARA PEGAR EN WORDPRESS - MANTIENE HEADER Y FOOTER --><\/p>\n<style>\n\/* Estilos espec\u00edficos para la p\u00e1gina del formulario Autoplastek *\/\n.autoplastek-form-page {\n    \/* Anular m\u00e1rgenes del contenedor de WordPress *\/\n    margin-left: calc(-50vw + 50%);\n    margin-right: calc(-50vw + 50%);\n    width: 100vw;\n    position: relative;\n}<\/p>\n<p>\/* Hero Section *\/\n.autoplastek-hero-section {\n    background: linear-gradient(135deg, #ef1c24 0%, #8B0000 50%, #000000 100%);\n    padding: 100px 20px 80px;\n    text-align: center;\n    position: relative;\n    margin-top: -50px; \/* Ajusta seg\u00fan el espacio de tu tema *\/\n}<\/p>\n<p>.autoplastek-hero-section::after {\n    content: '';\n    position: absolute;\n    bottom: -1px;\n    left: 0;\n    right: 0;\n    height: 60px;\n    background: white;\n    clip-path: ellipse(50% 100% at 50% 100%);\n}<\/p>\n<p>.autoplastek-hero-title {\n    font-size: clamp(2.5rem, 5vw, 4rem);\n    color: white;\n    font-weight: 900;\n    letter-spacing: 3px;\n    margin: 0 0 15px 0;\n    text-transform: uppercase;\n    text-shadow: 2px 2px 8px rgba(0,0,0,0.3);\n}<\/p>\n<p>.autoplastek-hero-subtitle {\n    font-size: clamp(1rem, 2vw, 1.3rem);\n    color: rgba(255,255,255,0.95);\n    font-weight: 300;\n    margin: 0;\n}<\/p>\n<p>\/* Contenedor del Formulario *\/\n.autoplastek-form-wrapper {\n    max-width: 700px;\n    margin: -40px auto 60px;\n    padding: 0 20px;\n    position: relative;\n    z-index: 10;\n}<\/p>\n<p>.autoplastek-form-card {\n    background: white;\n    border-radius: 15px;\n    box-shadow: 0 20px 60px rgba(0,0,0,0.15);\n    padding: 50px;\n    border: 1px solid rgba(239,28,36,0.1);\n}<\/p>\n<p>.autoplastek-form-header {\n    text-align: center;\n    margin-bottom: 40px;\n}<\/p>\n<p>.autoplastek-form-header h2 {\n    font-size: 2rem;\n    color: #1a1a1a;\n    margin: 0 0 10px 0;\n    font-weight: 700;\n}<\/p>\n<p>.autoplastek-form-header p {\n    color: #666;\n    font-size: 1.05rem;\n    margin: 0;\n}<\/p>\n<p>\/* Campos del Formulario *\/\n.autoplastek-field-group {\n    margin-bottom: 22px;\n}<\/p>\n<p>.autoplastek-label {\n    display: block;\n    color: #333;\n    font-weight: 600;\n    margin-bottom: 8px;\n    font-size: 0.95rem;\n}<\/p>\n<p>.autoplastek-label .required {\n    color: #ef1c24;\n}<\/p>\n<p>.autoplastek-input,\n.autoplastek-select,\n.autoplastek-textarea {\n    width: 100%;\n    padding: 12px 15px;\n    border: 2px solid #e0e0e0;\n    border-radius: 8px;\n    font-size: 1rem;\n    font-family: inherit;\n    transition: all 0.3s ease;\n    background: white;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n}<\/p>\n<p>.autoplastek-select {\n    background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'\/%3E%3C\/svg%3E\");\n    background-repeat: no-repeat;\n    background-position: right 15px center;\n    padding-right: 40px;\n    cursor: pointer;\n}<\/p>\n<p>.autoplastek-input:focus,\n.autoplastek-select:focus,\n.autoplastek-textarea:focus {\n    outline: none;\n    border-color: #ef1c24;\n    box-shadow: 0 0 0 3px rgba(239,28,36,0.1);\n}<\/p>\n<p>.autoplastek-textarea {\n    min-height: 120px;\n    resize: vertical;\n}<\/p>\n<p>\/* Campo Otro *\/\n.autoplastek-other-field {\n    display: none;\n    margin-top: 10px;\n}<\/p>\n<p>.autoplastek-other-field.show {\n    display: block;\n    animation: slideDown 0.3s ease;\n}<\/p>\n<p>@keyframes slideDown {\n    from {\n        opacity: 0;\n        transform: translateY(-10px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}<\/p>\n<p>\/* Bot\u00f3n Submit *\/\n.autoplastek-submit {\n    width: 100%;\n    padding: 16px 30px;\n    background: linear-gradient(135deg, #ef1c24 0%, #c91a22 100%);\n    color: white;\n    border: none;\n    border-radius: 8px;\n    font-size: 1.1rem;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    margin-top: 30px;\n    position: relative;\n}<\/p>\n<p>.autoplastek-submit:hover:not(:disabled) {\n    transform: translateY(-2px);\n    box-shadow: 0 8px 25px rgba(239,28,36,0.3);\n    background: linear-gradient(135deg, #c91a22 0%, #a01118 100%);\n}<\/p>\n<p>.autoplastek-submit:disabled {\n    opacity: 0.7;\n    cursor: not-allowed;\n}<\/p>\n<p>.autoplastek-btn-text {\n    display: inline-block;\n}<\/p>\n<p>.autoplastek-spinner {\n    display: none;\n    width: 20px;\n    height: 20px;\n    border: 2px solid rgba(255,255,255,0.3);\n    border-top-color: white;\n    border-radius: 50%;\n    animation: spin 0.8s linear infinite;\n    margin: 0 auto;\n}<\/p>\n<p>.autoplastek-spinner.active {\n    display: block;\n}<\/p>\n<p>.autoplastek-btn-text.hidden {\n    display: none;\n}<\/p>\n<p>@keyframes spin {\n    to { transform: rotate(360deg); }\n}<\/p>\n<p>\/* Mensajes *\/\n.autoplastek-message {\n    display: none;\n    padding: 20px;\n    border-radius: 8px;\n    margin-top: 20px;\n    text-align: center;\n}<\/p>\n<p>.autoplastek-message.show {\n    display: block;\n    animation: fadeIn 0.5s ease;\n}<\/p>\n<p>@keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n}<\/p>\n<p>.autoplastek-success {\n    background: #d1f2eb;\n    color: #0f5f4f;\n    border: 1px solid #a3e4d7;\n}<\/p>\n<p>.autoplastek-error {\n    background: #fadbd8;\n    color: #922b21;\n    border: 1px solid #f5b7b1;\n}<\/p>\n<p>.autoplastek-message h4 {\n    margin: 0 0 8px 0;\n    font-size: 1.15rem;\n}<\/p>\n<p>.autoplastek-message p {\n    margin: 0;\n}<\/p>\n<p>\/* Features *\/\n.autoplastek-features {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 20px;\n    margin-top: 40px;\n    padding-top: 30px;\n    border-top: 1px solid #e0e0e0;\n}<\/p>\n<p>.autoplastek-feature {\n    text-align: center;\n}<\/p>\n<p>.autoplastek-feature-icon {\n    font-size: 28px;\n    margin-bottom: 10px;\n}<\/p>\n<p>.autoplastek-feature p {\n    color: #666;\n    font-size: 0.9rem;\n    line-height: 1.4;\n    margin: 0;\n}<\/p>\n<p>\/* Responsive *\/\n@media (max-width: 768px) {\n    .autoplastek-form-card {\n        padding: 35px 25px;\n    }<\/p>\n<p>    .autoplastek-hero-section {\n        padding: 80px 20px 60px;\n    }<\/p>\n<p>    .autoplastek-hero-title {\n        font-size: 2.5rem;\n    }\n}<\/p>\n<p>@media (max-width: 480px) {\n    .autoplastek-features {\n        grid-template-columns: 1fr;\n        gap: 15px;\n    }<\/p>\n<p>    .autoplastek-hero-title {\n        font-size: 2rem;\n        letter-spacing: 1px;\n    }\n}<\/p>\n<p>\/* Limpiar estilos del tema que puedan interferir *\/\n.autoplastek-form-page input[type=\"text\"],\n.autoplastek-form-page input[type=\"email\"],\n.autoplastek-form-page input[type=\"tel\"],\n.autoplastek-form-page select,\n.autoplastek-form-page textarea,\n.autoplastek-form-page button {\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    box-shadow: none !important;\n}\n<\/style>\n<p><!-- HTML DEL FORMULARIO --><\/p>\n<div class=\"autoplastek-form-page\">\n    <!-- Hero Section --><\/p>\n<div class=\"autoplastek-hero-section\">\n<h1 class=\"autoplastek-hero-title\">CONT\u00c1CTANOS<\/h1>\n<p class=\"autoplastek-hero-subtitle\">Estamos aqu\u00ed para ayudarte con tu proyecto<\/p>\n<\/p><\/div>\n<p>    <!-- Form Container --><\/p>\n<div class=\"autoplastek-form-wrapper\">\n<div class=\"autoplastek-form-card\">\n<div class=\"autoplastek-form-header\">\n<h2>Solicita Informaci\u00f3n<\/h2>\n<p>Completa el formulario y nos pondremos en contacto contigo pronto.<\/p>\n<\/p><\/div>\n<form id=\"autoplastekContactForm\" action=\"\">\n<div class=\"autoplastek-field-group\">\n                    <label class=\"autoplastek-label\"><br \/>\n                        Full name <span class=\"required\">*<\/span><br \/>\n                    <\/label><br \/>\n                    <input type=\"text\" class=\"autoplastek-input\" name=\"fullName\" required>\n                <\/div>\n<div class=\"autoplastek-field-group\">\n                    <label class=\"autoplastek-label\"><br \/>\n                        email <span class=\"required\">*<\/span><br \/>\n                    <\/label><br \/>\n                    <input type=\"email\" class=\"autoplastek-input\" name=\"email\" required>\n                <\/div>\n<div class=\"autoplastek-field-group\">\n                    <label class=\"autoplastek-label\"><br \/>\n                        Phone <span class=\"required\">*<\/span><br \/>\n                    <\/label><br \/>\n                    <input type=\"tel\" class=\"autoplastek-input\" name=\"phone\" required>\n                <\/div>\n<div class=\"autoplastek-field-group\">\n                    <label class=\"autoplastek-label\"><br \/>\n                        Company <span class=\"required\">*<\/span><br \/>\n                    <\/label><br \/>\n                    <input type=\"text\" class=\"autoplastek-input\" name=\"company\" required>\n                <\/div>\n<div class=\"autoplastek-field-group\">\n                    <label class=\"autoplastek-label\"><br \/>\n                        Sector al que perteneces <span class=\"required\">*<\/span><br \/>\n                    <\/label><br \/>\n                    <select class=\"autoplastek-select\" name=\"sector\" id=\"apSectorSelect\" required><option value=\"\">Selecciona una opci\u00f3n<\/option><option value=\"Automotriz\">Automotriz<\/option><option value=\"Aeroespacial\">Aeroespacial<\/option><option value=\"M\u00e9dico\">M\u00e9dico<\/option><option value=\"Herramientas\">Herramientas<\/option><option value=\"Juguetes\">Juguetes<\/option><option value=\"Otro\">Otro<\/option><\/select><br \/>\n                    <input type=\"text\" class=\"autoplastek-input autoplastek-other-field\" \n                           id=\"apOtherSector\" placeholder=\"Especifica el sector\">\n                <\/div>\n<div class=\"autoplastek-field-group\">\n                    <label class=\"autoplastek-label\"><br \/>\n                        Cu\u00e9ntanos en qu\u00e9 podemos ayudarte <span class=\"required\">*<\/span><br \/>\n                    <\/label><br \/>\n                    <textarea class=\"autoplastek-textarea\" name=\"help\" required><\/textarea>\n                <\/div>\n<div class=\"autoplastek-field-group\">\n                    <label class=\"autoplastek-label\"><br \/>\n                        \u00bfC\u00f3mo nos encontraste? <span class=\"required\">*<\/span><br \/>\n                    <\/label><br \/>\n                    <select class=\"autoplastek-select\" name=\"source\" id=\"apSourceSelect\" required><option value=\"\">Selecciona una opci\u00f3n<\/option><option value=\"Google\">Google<\/option><option value=\"LinkedIn\">LinkedIn<\/option><option value=\"Facebook\">Facebook<\/option><option value=\"Recomendaci\u00f3n\">Recomendaci\u00f3n<\/option><option value=\"ChatGPT\">ChatGPT<\/option><option value=\"Otro\">Otro<\/option><\/select><br \/>\n                    <input type=\"text\" class=\"autoplastek-input autoplastek-other-field\" \n                           id=\"apOtherSource\" placeholder=\"Especifica c\u00f3mo nos encontraste\">\n                <\/div>\n<p>                <button type=\"submit\" class=\"autoplastek-submit\"><br \/>\n                    <span class=\"autoplastek-btn-text\">Enviar Informaci\u00f3n<\/span><\/p>\n<div class=\"autoplastek-spinner\"><\/div>\n<p>                <\/button><\/p>\n<div class=\"autoplastek-message autoplastek-success\" id=\"apSuccessMsg\">\n<h4>\u00a1Gracias por tu inter\u00e9s!<\/h4>\n<p>Hemos recibido tu informaci\u00f3n y nos pondremos en contacto contigo pronto.<\/p>\n<\/p><\/div>\n<div class=\"autoplastek-message autoplastek-error\" id=\"apErrorMsg\">\n<h4>Hubo un problema<\/h4>\n<p>Por favor, intenta nuevamente o cont\u00e1ctanos directamente.<\/p>\n<\/p><\/div>\n<\/p><input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\n<div class=\"autoplastek-features\">\n<div class=\"autoplastek-feature\">\n<div class=\"autoplastek-feature-icon\">\u26a1<\/div>\n<p>Respuesta<br \/>r\u00e1pida<\/p>\n<\/p><\/div>\n<div class=\"autoplastek-feature\">\n<div class=\"autoplastek-feature-icon\">\ud83d\udd12<\/div>\n<p>Datos<br \/>seguros<\/p>\n<\/p><\/div>\n<div class=\"autoplastek-feature\">\n<div class=\"autoplastek-feature-icon\">\ud83d\udc65<\/div>\n<p>Atenci\u00f3n<br \/>personalizada<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<p><script>\n(function() {\n    'use strict';<\/p>\n<p>    \/\/ URL de Google Apps Script\n    const AP_SCRIPT_URL = 'https:\/\/script.google.com\/macros\/s\/AKfycbyHpCTKlu4Bh5CvzRJvGm_jqba726PKPqOR9eRJGEyoepLdODw1fobEOO2wYTIQZz_3\/exec';<\/p>\n<p>    \/\/ Esperar a que el DOM est\u00e9 listo\n    function initAutoplastekForm() {\n        const form = document.getElementById('autoplastekContactForm');\n        const sectorSelect = document.getElementById('apSectorSelect');\n        const sourceSelect = document.getElementById('apSourceSelect');\n        const otherSector = document.getElementById('apOtherSector');\n        const otherSource = document.getElementById('apOtherSource');\n        const submitBtn = form.querySelector('.autoplastek-submit');\n        const btnText = form.querySelector('.autoplastek-btn-text');\n        const spinner = form.querySelector('.autoplastek-spinner');\n        const successMsg = document.getElementById('apSuccessMsg');\n        const errorMsg = document.getElementById('apErrorMsg');<\/p>\n<p>        \/\/ Manejar campos \"Otro\"\n        sectorSelect.addEventListener('change', function() {\n            if (this.value === 'Otro') {\n                otherSector.classList.add('show');\n                otherSector.required = true;\n                setTimeout(() => otherSector.focus(), 300);\n            } else {\n                otherSector.classList.remove('show');\n                otherSector.required = false;\n                otherSector.value = '';\n            }\n        });<\/p>\n<p>        sourceSelect.addEventListener('change', function() {\n            if (this.value === 'Otro') {\n                otherSource.classList.add('show');\n                otherSource.required = true;\n                setTimeout(() => otherSource.focus(), 300);\n            } else {\n                otherSource.classList.remove('show');\n                otherSource.required = false;\n                otherSource.value = '';\n            }\n        });<\/p>\n<p>        \/\/ Enviar formulario\n        form.addEventListener('submit', async function(e) {\n            e.preventDefault();<\/p>\n<p>            \/\/ Reset mensajes\n            successMsg.classList.remove('show');\n            errorMsg.classList.remove('show');<\/p>\n<p>            \/\/ Mostrar loading\n            submitBtn.disabled = true;\n            btnText.classList.add('hidden');\n            spinner.classList.add('active');<\/p>\n<p>            try {\n                const formData = new FormData(form);<\/p>\n<p>                \/\/ Procesar sector\n                let sector = formData.get('sector');\n                if (sector === 'Otro' && otherSector.value) {\n                    sector = otherSector.value;\n                }<\/p>\n<p>                \/\/ Procesar source  \n                let source = formData.get('source');\n                if (source === 'Otro' && otherSource.value) {\n                    source = otherSource.value;\n                }<\/p>\n<p>                \/\/ Datos a enviar\n                const data = {\n                    timestamp: new Date().toLocaleString('es-MX', { timeZone: 'America\/Mexico_City' }),\n                    fullName: formData.get('fullName'),\n                    email: formData.get('email'),\n                    phone: formData.get('phone'),\n                    company: formData.get('company'),\n                    sector: sector,\n                    help: formData.get('help'),\n                    source: source\n                };<\/p>\n<p>                console.log('Enviando a Google Sheets...', data);<\/p>\n<p>                \/\/ Enviar\n                await fetch(AP_SCRIPT_URL, {\n                    method: 'POST',\n                    mode: 'no-cors',\n                    headers: {\n                        'Content-Type': 'application\/json',\n                    },\n                    body: JSON.stringify(data)\n                });<\/p>\n<p>                \/\/ Delay para UX\n                await new Promise(resolve => setTimeout(resolve, 1000));<\/p>\n<p>                \/\/ \u00c9xito\n                successMsg.classList.add('show');\n                form.reset();\n                otherSector.classList.remove('show');\n                otherSource.classList.remove('show');<\/p>\n<p>                setTimeout(() => {\n                    successMsg.classList.remove('show');\n                }, 5000);<\/p>\n<p>            } catch (error) {\n                console.error('Error:', error);\n                errorMsg.classList.add('show');<\/p>\n<p>                setTimeout(() => {\n                    errorMsg.classList.remove('show');\n                }, 5000);\n            } finally {\n                submitBtn.disabled = false;\n                btnText.classList.remove('hidden');\n                spinner.classList.remove('active');\n            }\n        });<\/p>\n<p>        console.log('Autoplastek Form Ready');\n    }<\/p>\n<p>    \/\/ Inicializar\n    if (document.readyState === 'loading') {\n        document.addEventListener('DOMContentLoaded', initAutoplastekForm);\n    } else {\n        initAutoplastekForm();\n    }<\/p>\n<p>    \/\/ Backup init para WordPress\n    setTimeout(initAutoplastekForm, 500);\n})();\n<\/script><\/p>","protected":false},"excerpt":{"rendered":"<p>CONT\u00c1CTANOS Estamos aqu\u00ed para ayudarte con tu proyecto Solicita Informaci\u00f3n Completa el formulario y nos pondremos en contacto contigo pronto. Nombre completo * Correo electr\u00f3nico * Tel\u00e9fono * Empresa * Sector al que perteneces * Selecciona una opci\u00f3nAutomotrizAeroespacialM\u00e9dicoHerramientasJuguetesOtro Cu\u00e9ntanos en qu\u00e9 podemos ayudarte * \u00bfC\u00f3mo nos encontraste? * Selecciona una opci\u00f3nGoogleLinkedInFacebookRecomendaci\u00f3nChatGPTOtro Enviar Informaci\u00f3n \u00a1Gracias por [&hellip;]<\/p>","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/autoplastek.com\/en\/wp-json\/wp\/v2\/pages\/1327"}],"collection":[{"href":"https:\/\/autoplastek.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/autoplastek.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/autoplastek.com\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/autoplastek.com\/en\/wp-json\/wp\/v2\/comments?post=1327"}],"version-history":[{"count":1,"href":"https:\/\/autoplastek.com\/en\/wp-json\/wp\/v2\/pages\/1327\/revisions"}],"predecessor-version":[{"id":1328,"href":"https:\/\/autoplastek.com\/en\/wp-json\/wp\/v2\/pages\/1327\/revisions\/1328"}],"wp:attachment":[{"href":"https:\/\/autoplastek.com\/en\/wp-json\/wp\/v2\/media?parent=1327"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}