Formulario de Contacto – PLAN<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@300;400;500;700&display=swap\" rel=\"stylesheet\" \/>\n <link href=\"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons\" rel=\"stylesheet\" \/>\n <style>\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n font-family: 'Roboto', sans-serif;\n }\n\n body {\n background-color: #f8f9fa;\n color: #333;\n line-height: 1.6;\n }\n\n .container {\n max-width: 100%;\n padding: 20px;\n }\n\n .header {\n text-align: center;\n padding: 30px 20px;\n }\n\n .header .material-icons {\n font-size: 40px;\n color: #58c1a4;\n }\n\n .title {\n font-size: 24px;\n font-weight: bold;\n margin: 15px 0 5px;\n }\n\n .subtitle {\n font-size: 16px;\n color: #666;\n max-width: 600px;\n margin: 0 auto;\n }\n\n .form-container {\n background-color: #fff;\n border-radius: 15px;\n padding: 25px;\n margin: 10px auto 30px;\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);\n max-width: 600px;\n }\n\n .input-group {\n margin-bottom: 20px;\n }\n\n .label {\n font-size: 14px;\n color: #555;\n margin-bottom: 8px;\n font-weight: 500;\n display: block;\n }\n\n .input,\n .textarea {\n width: 100%;\n border: 1px solid #ddd;\n border-radius: 8px;\n padding: 15px;\n font-size: 16px;\n background-color: #fafafa;\n }\n\n .select-container {\n display: flex;\n align-items: center;\n justify-content: space-between;\n border: 1px solid #ddd;\n border-radius: 8px;\n padding: 15px;\n background-color: #fafafa;\n }\n\n .select-text {\n font-size: 16px;\n color: #333;\n }\n\n .submit-button {\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: #58c1a4;\n color: #fff;\n padding: 15px;\n border-radius: 8px;\n border: none;\n font-size: 16px;\n font-weight: 600;\n cursor: pointer;\n width: 100%;\n margin-top: 10px;\n transition: background-color 0.3s;\n }\n\n .submit-button:hover {\n background-color: #4caf90;\n }\n\n .submit-button .material-icons {\n margin-left: 10px;\n font-size: 20px;\n }\n\n .footer {\n text-align: center;\n margin-top: 30px;\n padding: 0 20px;\n }\n\n .footer-text {\n font-size: 14px;\n color: #666;\n margin-bottom: 15px;\n }\n\n .contact-info {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 10px;\n }\n\n .contact-icon {\n color: #58c1a4;\n margin-right: 10px;\n font-size: 18px;\n }\n\n .contact-text {\n font-size: 16px;\n color: #333;\n font-weight: 500;\n }\n\n @media (max-width: 600px) {\n .form-container {\n padding: 20px 15px;\n }\n\n .input,\n .textarea {\n padding: 12px;\n }\n }\n\n \/* Estilos para el nuevo modal con <dialog> *\/\n #success-dialog {\n border: none; \/* Elimina el borde predeterminado del navegador *\/\n padding: 20px;\n border-radius: 8px;\n max-width: 90%;\n width: 300px;\n text-align: center;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n background: white; \/* Color de fondo del modal *\/\n animation: slideUp 0.3s ease-out; \/* Animaci\u00f3n al aparecer *\/\n }\n\n \/* Pseudo-elemento para el fondo oscuro del modal cuando se usa showModal() *\/\n #success-dialog::backdrop {\n background: rgba(0, 0, 0, 0.3);\n animation: fadeInBackdrop 0.3s ease-out;\n }\n\n #success-dialog .material-icons {\n color: #58c1a4;\n font-size: 36px;\n margin-bottom: 10px;\n }\n\n #success-dialog h2 {\n font-size: 18px;\n margin-bottom: 10px;\n color: #333;\n }\n\n #success-dialog p {\n font-size: 14px;\n color: #666;\n margin-bottom: 15px;\n }\n\n #success-dialog button {\n background-color: #f0f0f0;\n color: #333;\n border: none;\n padding: 8px 16px;\n border-radius: 4px;\n cursor: pointer;\n font-size: 14px;\n transition: background-color 0.2s;\n }\n\n #success-dialog button:hover {\n background-color: #e0e0e0;\n }\n\n @keyframes fadeInBackdrop {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n @keyframes slideUp {\n from { \n transform: translateY(20px) scale(0.95);\n opacity: 0;\n }\n to { \n transform: translateY(0) scale(1);\n opacity: 1;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <span class=\"material-icons\">contact_mail<\/span>\n <h1 class=\"title\">Formulario de Contacto<\/h1>\n <p class=\"subtitle\">Completa este formulario y nos pondremos en contacto contigo<\/p>\n <\/div>\n\n <form id=\"contact-form\" class=\"form-container\">\n <div class=\"input-group\">\n <label for=\"nombre\" class=\"label\">Nombre completo *<\/label>\n <input type=\"text\" id=\"nombre\" name=\"nombre\" class=\"input\" placeholder=\"Tu nombre\" required>\n <\/div>\n\n <div class=\"input-group\">\n <label for=\"email\" class=\"label\">Correo electr\u00f3nico *<\/label>\n <input type=\"email\" id=\"email\" name=\"email\" class=\"input\" placeholder=\"tu@email.com\" required>\n <\/div>\n\n <div class=\"input-group\">\n <label for=\"telefono\" class=\"label\">Tel\u00e9fono<\/label>\n <input type=\"tel\" id=\"telefono\" name=\"telefono\" class=\"input\" placeholder=\"+52 477 123 4567\">\n <\/div>\n\n <div class=\"input-group\">\n <label class=\"label\">Asunto<\/label>\n <div class=\"select-container\">\n <span class=\"select-text\">Anunciarme en PLAN<\/span>\n <span class=\"material-icons\">keyboard_arrow_down<\/span>\n <\/div>\n <input type=\"hidden\" name=\"asunto\" value=\"Anunciarme en PLAN\">\n <\/div>\n\n <div class=\"input-group\">\n <label for=\"mensaje\" class=\"label\">Mensaje *<\/label>\n <textarea id=\"mensaje\" name=\"mensaje\" class=\"textarea\" placeholder=\"Cu\u00e9ntanos c\u00f3mo podemos ayudarte...\" required><\/textarea>\n <\/div>\n\n <button type=\"submit\" class=\"submit-button\">\n Enviar Mensaje\n <span class=\"material-icons\">send<\/span>\n <\/button>\n <\/form>\n\n <div class=\"footer\">\n <p class=\"footer-text\">Tambi\u00e9n puedes contactarnos directamente:<\/p>\n <div class=\"contact-info\">\n <span class=\"material-icons contact-icon\">email<\/span>\n <span class=\"contact-text\">contacto@saca-plan.com<\/span>\n <\/div>\n <div class=\"contact-info\">\n <span class=\"material-icons contact-icon\">phone<\/span>\n <span class=\"contact-text\">+52 477 123 4567<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <dialog id=\"success-dialog\">\n <div class=\"modal-content\">\n <span class=\"material-icons\">check_circle<\/span>\n <h2>\u00a1Mensaje enviado!<\/h2>\n <p>Gracias por contactarnos. Te responderemos pronto.<\/p>\n <button type=\"button\" onclick=\"closeDialog()\">Aceptar<\/button>\n <\/div>\n <\/dialog>\n\n <script>\n const form = document.getElementById('contact-form');\n const successDialog = document.getElementById('success-dialog');\n \n function closeDialog() {\n successDialog.close(); \/\/ Usa el m\u00e9todo nativo .close()\n }\n \n form.addEventListener('submit', function (e) {\n e.preventDefault();\n\n const formData = new FormData(form);\n\n fetch(\"https:\/\/formsubmit.co\/ajax\/contacto@saca-plan.com\", {\n method: \"POST\",\n headers: { \"Accept\": \"application\/json\" },\n body: formData\n })\n .then(response => {\n if (response.ok) {\n form.reset();\n successDialog.showModal(); \/\/ Usa el m\u00e9todo nativo .showModal() para mostrar y centrar\n } else {\n alert(\"Ocurri\u00f3 un error. Intenta de nuevo.\");\n }\n })\n .catch(() => {\n alert(\"Ocurri\u00f3 un error al enviar el formulario.\");\n });\n });\n \n \/\/ El di\u00e1logo se cierra autom\u00e1ticamente al hacer clic fuera si se usa showModal().\n \/\/ Si quisieras un comportamiento diferente, podr\u00edas agregar un listener:\n \/\/ successDialog.addEventListener('click', (event) => {\n \/\/ if (event.target === successDialog) { \/\/ Si el clic es en el backdrop\n \/\/ closeDialog();\n \/\/ }\n \/\/ });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Formulario de Contacto – PLAN contact_mail Formulario de Contacto Completa este formulario y nos pondremos en contacto contigo Nombre completo * Correo electr\u00f3nico * Tel\u00e9fono Asunto Anunciarme en PLAN keyboard_arrow_down Mensaje * Enviar Mensaje send Tambi\u00e9n puedes contactarnos directamente: email contacto@saca-plan.com phone +52 477 123 4567 check_circle \u00a1Mensaje enviado! Gracias por contactarnos. Te responderemos pronto. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-112","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/saca-plan.com\/inicio\/wp-json\/wp\/v2\/pages\/112","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/saca-plan.com\/inicio\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/saca-plan.com\/inicio\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/saca-plan.com\/inicio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/saca-plan.com\/inicio\/wp-json\/wp\/v2\/comments?post=112"}],"version-history":[{"count":22,"href":"https:\/\/saca-plan.com\/inicio\/wp-json\/wp\/v2\/pages\/112\/revisions"}],"predecessor-version":[{"id":136,"href":"https:\/\/saca-plan.com\/inicio\/wp-json\/wp\/v2\/pages\/112\/revisions\/136"}],"wp:attachment":[{"href":"https:\/\/saca-plan.com\/inicio\/wp-json\/wp\/v2\/media?parent=112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":112,"date":"2025-06-11T17:36:17","date_gmt":"2025-06-11T17:36:17","guid":{"rendered":"https:\/\/saca-plan.com\/inicio\/?page_id=112"},"modified":"2025-06-12T03:36:45","modified_gmt":"2025-06-12T03:36:45","slug":"112-2","status":"publish","type":"page","link":"https:\/\/saca-plan.com\/inicio\/112-2\/","title":{"rendered":""},"content":{"rendered":"\n\n\n\n \n \n Formulario de Contacto – PLAN<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@300;400;500;700&display=swap\" rel=\"stylesheet\" \/>\n <link href=\"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons\" rel=\"stylesheet\" \/>\n <style>\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n font-family: 'Roboto', sans-serif;\n }\n\n body {\n background-color: #f8f9fa;\n color: #333;\n line-height: 1.6;\n }\n\n .container {\n max-width: 100%;\n padding: 20px;\n }\n\n .header {\n text-align: center;\n padding: 30px 20px;\n }\n\n .header .material-icons {\n font-size: 40px;\n color: #58c1a4;\n }\n\n .title {\n font-size: 24px;\n font-weight: bold;\n margin: 15px 0 5px;\n }\n\n .subtitle {\n font-size: 16px;\n color: #666;\n max-width: 600px;\n margin: 0 auto;\n }\n\n .form-container {\n background-color: #fff;\n border-radius: 15px;\n padding: 25px;\n margin: 10px auto 30px;\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);\n max-width: 600px;\n }\n\n .input-group {\n margin-bottom: 20px;\n }\n\n .label {\n font-size: 14px;\n color: #555;\n margin-bottom: 8px;\n font-weight: 500;\n display: block;\n }\n\n .input,\n .textarea {\n width: 100%;\n border: 1px solid #ddd;\n border-radius: 8px;\n padding: 15px;\n font-size: 16px;\n background-color: #fafafa;\n }\n\n .select-container {\n display: flex;\n align-items: center;\n justify-content: space-between;\n border: 1px solid #ddd;\n border-radius: 8px;\n padding: 15px;\n background-color: #fafafa;\n }\n\n .select-text {\n font-size: 16px;\n color: #333;\n }\n\n .submit-button {\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: #58c1a4;\n color: #fff;\n padding: 15px;\n border-radius: 8px;\n border: none;\n font-size: 16px;\n font-weight: 600;\n cursor: pointer;\n width: 100%;\n margin-top: 10px;\n transition: background-color 0.3s;\n }\n\n .submit-button:hover {\n background-color: #4caf90;\n }\n\n .submit-button .material-icons {\n margin-left: 10px;\n font-size: 20px;\n }\n\n .footer {\n text-align: center;\n margin-top: 30px;\n padding: 0 20px;\n }\n\n .footer-text {\n font-size: 14px;\n color: #666;\n margin-bottom: 15px;\n }\n\n .contact-info {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 10px;\n }\n\n .contact-icon {\n color: #58c1a4;\n margin-right: 10px;\n font-size: 18px;\n }\n\n .contact-text {\n font-size: 16px;\n color: #333;\n font-weight: 500;\n }\n\n @media (max-width: 600px) {\n .form-container {\n padding: 20px 15px;\n }\n\n .input,\n .textarea {\n padding: 12px;\n }\n }\n\n \/* Estilos para el nuevo modal con <dialog> *\/\n #success-dialog {\n border: none; \/* Elimina el borde predeterminado del navegador *\/\n padding: 20px;\n border-radius: 8px;\n max-width: 90%;\n width: 300px;\n text-align: center;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n background: white; \/* Color de fondo del modal *\/\n animation: slideUp 0.3s ease-out; \/* Animaci\u00f3n al aparecer *\/\n }\n\n \/* Pseudo-elemento para el fondo oscuro del modal cuando se usa showModal() *\/\n #success-dialog::backdrop {\n background: rgba(0, 0, 0, 0.3);\n animation: fadeInBackdrop 0.3s ease-out;\n }\n\n #success-dialog .material-icons {\n color: #58c1a4;\n font-size: 36px;\n margin-bottom: 10px;\n }\n\n #success-dialog h2 {\n font-size: 18px;\n margin-bottom: 10px;\n color: #333;\n }\n\n #success-dialog p {\n font-size: 14px;\n color: #666;\n margin-bottom: 15px;\n }\n\n #success-dialog button {\n background-color: #f0f0f0;\n color: #333;\n border: none;\n padding: 8px 16px;\n border-radius: 4px;\n cursor: pointer;\n font-size: 14px;\n transition: background-color 0.2s;\n }\n\n #success-dialog button:hover {\n background-color: #e0e0e0;\n }\n\n @keyframes fadeInBackdrop {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n @keyframes slideUp {\n from { \n transform: translateY(20px) scale(0.95);\n opacity: 0;\n }\n to { \n transform: translateY(0) scale(1);\n opacity: 1;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <span class=\"material-icons\">contact_mail<\/span>\n <h1 class=\"title\">Formulario de Contacto<\/h1>\n <p class=\"subtitle\">Completa este formulario y nos pondremos en contacto contigo<\/p>\n <\/div>\n\n <form id=\"contact-form\" class=\"form-container\">\n <div class=\"input-group\">\n <label for=\"nombre\" class=\"label\">Nombre completo *<\/label>\n <input type=\"text\" id=\"nombre\" name=\"nombre\" class=\"input\" placeholder=\"Tu nombre\" required>\n <\/div>\n\n <div class=\"input-group\">\n <label for=\"email\" class=\"label\">Correo electr\u00f3nico *<\/label>\n <input type=\"email\" id=\"email\" name=\"email\" class=\"input\" placeholder=\"tu@email.com\" required>\n <\/div>\n\n <div class=\"input-group\">\n <label for=\"telefono\" class=\"label\">Tel\u00e9fono<\/label>\n <input type=\"tel\" id=\"telefono\" name=\"telefono\" class=\"input\" placeholder=\"+52 477 123 4567\">\n <\/div>\n\n <div class=\"input-group\">\n <label class=\"label\">Asunto<\/label>\n <div class=\"select-container\">\n <span class=\"select-text\">Anunciarme en PLAN<\/span>\n <span class=\"material-icons\">keyboard_arrow_down<\/span>\n <\/div>\n <input type=\"hidden\" name=\"asunto\" value=\"Anunciarme en PLAN\">\n <\/div>\n\n <div class=\"input-group\">\n <label for=\"mensaje\" class=\"label\">Mensaje *<\/label>\n <textarea id=\"mensaje\" name=\"mensaje\" class=\"textarea\" placeholder=\"Cu\u00e9ntanos c\u00f3mo podemos ayudarte...\" required><\/textarea>\n <\/div>\n\n <button type=\"submit\" class=\"submit-button\">\n Enviar Mensaje\n <span class=\"material-icons\">send<\/span>\n <\/button>\n <\/form>\n\n <div class=\"footer\">\n <p class=\"footer-text\">Tambi\u00e9n puedes contactarnos directamente:<\/p>\n <div class=\"contact-info\">\n <span class=\"material-icons contact-icon\">email<\/span>\n <span class=\"contact-text\">contacto@saca-plan.com<\/span>\n <\/div>\n <div class=\"contact-info\">\n <span class=\"material-icons contact-icon\">phone<\/span>\n <span class=\"contact-text\">+52 477 123 4567<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <dialog id=\"success-dialog\">\n <div class=\"modal-content\">\n <span class=\"material-icons\">check_circle<\/span>\n <h2>\u00a1Mensaje enviado!<\/h2>\n <p>Gracias por contactarnos. Te responderemos pronto.<\/p>\n <button type=\"button\" onclick=\"closeDialog()\">Aceptar<\/button>\n <\/div>\n <\/dialog>\n\n <script>\n const form = document.getElementById('contact-form');\n const successDialog = document.getElementById('success-dialog');\n \n function closeDialog() {\n successDialog.close(); \/\/ Usa el m\u00e9todo nativo .close()\n }\n \n form.addEventListener('submit', function (e) {\n e.preventDefault();\n\n const formData = new FormData(form);\n\n fetch(\"https:\/\/formsubmit.co\/ajax\/contacto@saca-plan.com\", {\n method: \"POST\",\n headers: { \"Accept\": \"application\/json\" },\n body: formData\n })\n .then(response => {\n if (response.ok) {\n form.reset();\n successDialog.showModal(); \/\/ Usa el m\u00e9todo nativo .showModal() para mostrar y centrar\n } else {\n alert(\"Ocurri\u00f3 un error. Intenta de nuevo.\");\n }\n })\n .catch(() => {\n alert(\"Ocurri\u00f3 un error al enviar el formulario.\");\n });\n });\n \n \/\/ El di\u00e1logo se cierra autom\u00e1ticamente al hacer clic fuera si se usa showModal().\n \/\/ Si quisieras un comportamiento diferente, podr\u00edas agregar un listener:\n \/\/ successDialog.addEventListener('click', (event) => {\n \/\/ if (event.target === successDialog) { \/\/ Si el clic es en el backdrop\n \/\/ closeDialog();\n \/\/ }\n \/\/ });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Formulario de Contacto – PLAN contact_mail Formulario de Contacto Completa este formulario y nos pondremos en contacto contigo Nombre completo * Correo electr\u00f3nico * Tel\u00e9fono Asunto Anunciarme en PLAN keyboard_arrow_down Mensaje * Enviar Mensaje send Tambi\u00e9n puedes contactarnos directamente: email contacto@saca-plan.com phone +52 477 123 4567 check_circle \u00a1Mensaje enviado! Gracias por contactarnos. Te responderemos pronto. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-112","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/saca-plan.com\/inicio\/wp-json\/wp\/v2\/pages\/112","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/saca-plan.com\/inicio\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/saca-plan.com\/inicio\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/saca-plan.com\/inicio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/saca-plan.com\/inicio\/wp-json\/wp\/v2\/comments?post=112"}],"version-history":[{"count":22,"href":"https:\/\/saca-plan.com\/inicio\/wp-json\/wp\/v2\/pages\/112\/revisions"}],"predecessor-version":[{"id":136,"href":"https:\/\/saca-plan.com\/inicio\/wp-json\/wp\/v2\/pages\/112\/revisions\/136"}],"wp:attachment":[{"href":"https:\/\/saca-plan.com\/inicio\/wp-json\/wp\/v2\/media?parent=112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}