{"id":402,"date":"2024-02-06T22:55:29","date_gmt":"2024-02-06T22:55:29","guid":{"rendered":"https:\/\/bechaprastudio.com\/?page_id=402"},"modified":"2024-02-06T23:36:30","modified_gmt":"2024-02-06T23:36:30","slug":"campanas-movil","status":"publish","type":"page","link":"https:\/\/bechaprastudio.com\/index.php\/campanas-movil\/","title":{"rendered":"Campa\u00f1as\/M\u00f3vil"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Contacto<\/title>\r\n <style>\r\n * ,*:before, *:after{\r\n padding: 0;\r\n margin: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\n:root {\r\n --color-bg-1: #f0f5f5;\r\n --color-bg-2:#e7e9ef;\r\n --color-btn:#07284A;\r\n --color-header-step: #07284A; \r\n --color-border-input: #080808;\r\n}\r\n\r\n\/*Contenedor Principal*\/\r\n.root {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n min-height: 90vh;\r\n font-size: 16px;\r\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\r\n background-image: linear-gradient(var(--color-bg-1),\r\n var(--color-bg-2));\r\n overflow: hidden;\r\n}\r\n\r\n\/*Formulario*\/\r\n.form-register {\r\n padding: 20px 15px;\r\n width: 100%;\r\n max-width: 400px;\r\n\r\n}\r\n\r\n\/*barra*\/\r\n.progressbar {\r\n display: flex;\r\n list-style: none;\r\n margin-bottom: 15px;\r\n counter-reset: step;\r\n \r\n \r\n}\r\n\r\n.progressbar_option {\r\n width: 100%;\r\n text-align: center;\r\n font-size: .7rem;\r\n text-transform: uppercase;\r\n position: relative;\r\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\r\n \r\n}\r\n\r\n.progressbar_option:before {\r\n display: flex;\r\n content: counter(step);\r\n counter-increment: step;\r\n width: 20px;\r\n height: 20px;\r\n background-color: #f9ffd1 ;\r\n margin: 0 auto 5px;\r\n border-radius: 50%;\r\n justify-content: center;\r\n align-items: center;\r\n position: relative;\r\n z-index: 2 ;\r\n}\r\n\r\n.progressbar_option:after {\r\n display: block;\r\n content: '';\r\n width: 100%;\r\n height: 2px;\r\n background-color: white;\r\n position: absolute;\r\n top: 10px;\r\n left: -50%;\r\n z-index: 1;\r\n}\r\n\r\n.progressbar_option:first-child:after {\r\n content: none;\r\n \r\n}\r\n\r\n.progressbar_option.active:before, .progressbar_option.active:after{\r\n background-color: #07284A;\r\n \r\n\r\n}\r\n\r\n\/*Titulo del formulario*\/\r\n.form-register_title{\r\n font-size: 1.4rem;\r\n text-align: center;\r\n margin-bottom: 15px;\r\n\r\n}\r\n\r\n\/*body del formulario*\/\r\n.form-register_body {\r\n display: flex;\r\n align-items: flex-start;\r\n\r\n}\r\n\r\n.step {\r\n background-color: white;\r\n box-shadow: 5px 5px 5px 2px var(--color-shadow);\r\n border-radius: 10%;\r\n min-width: 100%;\r\n opacity: 0;\r\n transition: all .2s linear;\r\n}\r\n.step.active {\r\n opacity:2;\r\n\r\n}\r\n.step.to-left{\r\n margin-left: -100%;\r\n}\r\n.step.inactive {\r\n animation-name: scale;\r\n animation-duration: .2s;\r\n animation-direction: alternative;\r\n animation-iteration-count: 2;\r\n}\r\n@keyframes scale {\r\n from {\r\n transform: scale(1);\r\n }\r\n to {\r\n transform: scale(1.1)\r\n }\r\n}\r\n\r\n\/*header de step*\/\r\n.step_header {\r\n padding: 20px 15px;\r\n background-color: var(--color-header-step);\r\n border-radius: 3px 3px 0 0;\r\n}\r\n\r\n.step_title {\r\n font-size: 1.1rem;\r\n text-align: center;\r\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\r\n \r\n}\r\n\r\n\/*body de step*\/\r\n\r\n.step_body{\r\n padding: 20px 35px 0;\r\n\r\n}\r\n\r\n.step_input{\r\n display: block;\r\n width: 100%;\r\n padding: 10px;\r\n margin-bottom: 10px;\r\n border-radius: 3px;\r\n border: 1px solid var(--color-border-input);\r\n}\r\n\r\n\r\n.step_footer{\r\n padding: 20px 15px;\r\n text-align: center;\r\n}\r\n\r\n.step_button{\r\n display: inline-block;\r\n padding: 10px;\r\n background-color: var(--color-btn);\r\n border: none;\r\n color: white;\r\n border-radius: 15%;\r\n cursor: pointer;\r\n}\r\n\r\n.img {\r\n border: 2px;\r\n border-radius: 24px;\r\n padding: 10px;\r\n}\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"root\">\r\n <form method=\"POST\" action=\"https:\/\/bechaprastudio.com\/materialanswers.php\" class=\"form-register\">\r\n <div class=\"form-register_header\">\r\n <h1 class=\"form-register_title\"> REGISTRO<\/h1> <br>\r\n <ul class=\"progressbar\">\r\n <li class=\"progressbar_option active\"><b><\/b><\/li>\r\n <li class=\"progressbar_option\"><b><\/b><\/li> <br>\r\n <li class=\"progressbar_option\"><b><\/b><\/li> <br>\r\n <li class=\"progressbar_option\"><b><\/b><\/li> <br> \r\n <\/ul>\r\n <br> <br>\r\n <\/div>\r\n <div class=\"form-register_body\"> \r\n <div class=\"step active\" id=\"step-1\">\r\n <div class=\"step_header\">\r\n <h2 class=\"step_title\"> <b><FONT COLOR=\"white\">INFORMACI\u00d3N DE CONTACTO Y EMPRESA <small> (Paso 1)<\/small><\/FONT><\/b><\/small><\/h2>\r\n <\/div> <br>\r\n <div class=\"step_body\">\r\n <h5 class=\"step_sub\" style=\"margin-bottom: 6px;\">Email<\/h5>\r\n <input type=\"Email\" placeholder=\"ejemplo@bechapra.com\" class=\"step_input\" class=\"step_input\" name=\"Email\"> \r\n <\/div>\r\n <div class=\"step_body\">\r\n <h5 class=\"step_sub\" style=\"margin-bottom: 6px;\">Telefono<\/h5>\r\n <input type=\"Numero\" placeholder=\"Tel\u00e9fono \" class=\"step_input\" name=\"numero\">\r\n <\/div>\r\n <div class=\"step_body\">\r\n <h5 class=\"step_sub\" style=\"margin-bottom: 6px;\">Nombre<\/h5>\r\n <input type=\"text\" placeholder=\"Nombre de la empresa\" class=\"step_input\" name=\"nombre\">\r\n <\/div>\r\n <div class=\"step_body\">\r\n <h5 class=\"step_sub\" style=\"margin-bottom: 6px;\">P\u00e1gina web<\/h5>\r\n <input type=\"text\" placeholder=\"ejemplo: bechapra.com\" class=\"step_input\" name=\"p\u00e1gina\">\r\n <\/div>\r\n <div class=\"step_body\">\r\n <select class=\"form-select\" aria-label=\"Small select example\" style=\"width: 100%;\"> <center>\r\n <option selected>\u00bfCuenta con manual de Marca?<\/option>\r\n <option value=\"1\">Si<\/option>\r\n <option value=\"2\">No<\/option>\r\n <\/select><\/center> <\/div>\r\n <br>\r\n <div class=\"step_body\">\r\n <h5 class=\"step_sub\" style=\"margin-bottom: 6px;\">Redes Sociales<\/h5>\r\n <input type=\"text\" placeholder=\"enlace: www.facebook.com\" class=\"step_input\" name=\"redes\">\r\n <\/div>\r\n <div class=\"step_footer\">\r\n <button type=\"button\" class=\"step_button step_button--next\" data-to_step=\"2\" data-step=\"1\">Siguiente<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"step\" id=\"step-2\">\r\n <div class=\"step_header\">\r\n <h2 class=\"step_title\"> <b> <font color=\"white\">DETALLES DE LA CAMPA\u00d1A <small> (Paso 2)<\/small><\/font><\/b><\/h2>\r\n <\/div> <br>\r\n <div class=\"step_body\">\r\n <h5 class=\"step_sub\" style=\"margin-bottom: 6px;\">Objetivos de la campa\u00f1a <\/h5>\r\n <input type=\"text\" class=\"step_input\" name=\"objetivos\">\r\n <h5 class=\"step_sub\" style=\"margin-bottom: 6px;\">Publico objetivo<\/h5>\r\n <input type=\"text\" class=\"step_input\" placeholder=\"edad,genero, ubicaci\u00f3n,etc.\" name=\"publico\">\r\n <h5 class=\"step_sub\" style=\"margin-bottom: 6px;\"> Mensaje clave<\/h5>\r\n <input type=\"text\" class=\"step_input\" name=\"mensaje\">\r\n <h5 class=\"step_sub\" style=\"margin-bottom: 6px;\">Competencia<\/h5>\r\n <input type=\"text\" class=\"step_input\" name=\"competencia\">\r\n <\/div>\r\n\r\n <div class=\"step_footer\">\r\n <button type=\"button\" class=\"step_button step_button--back\" data-to_step=\"1\" data-step=\"2\">Regresar<\/button>\r\n <button type=\"button\" class=\"step_button step_button--next\" data-to_step=\"3\" data-step=\"2\">Siguiente<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"step\" id=\"step-3\">\r\n <div class=\"step_header\">\r\n <h2 class=\"step_title\"> <b> <font color=\"white\">SERVICIOS REQUERIDOS PARA LA CAMPA\u00d1A<\/font><\/b><\/h2>\r\n <\/div> <br>\r\n <div class=\"step_body\">\r\n <div class=\"col\">\r\n <h5 class=\"step_sub\" style=\"margin-bottom: 6px;\">Selecciona los servicios que requieres en tu campa\u00f1a<\/h5> <br>\r\n <input type=\"checkbox\" name=\"PowerPoint\"> Presentacion PowerPoint para Ventas<br>\r\n <input type=\"checkbox\" name=\"Editable\"> Brochure Editable<br>\r\n <input type=\"checkbox\" name=\"Redes\"> Dise\u00f1o para Redes Sociales<br>\r\n <input type=\"checkbox\" name=\"Comer\"> Comerciales<br>\r\n <input type=\"checkbox\" name=\"Mailings\"> Dise\u00f1o de Mailings<br>\r\n <\/div>\r\n <\/div>\r\n <div class=\"step_footer\">\r\n <button type=\"button\" class=\"step_button step_button--back\" data-to_step=\"2\" data-step=\"3\">Regresar<\/button>\r\n <button type=\"button\" class=\"step_button step_button--next\" data-to_step=\"4\" data-step=\"3\">Siguiente<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"step\" id=\"step-4\">\r\n <div class=\"step_header\">\r\n <h2 class=\"step_title\"><b><font color=\"white\">PREFERENCIAS DE DISE\u00d1O<\/font><\/b><\/h2>\r\n <\/div> <br>\r\n <div class=\"step_body\">\r\n <h5 class=\"step_sub\" style=\"margin-bottom: 6px;\">Elementos a incluir<\/h5>\r\n <input type=\"text\" class=\"step_input\" placeholder=\"imagenes, videos, links,etc\" name=\"Incluir\">\r\n <\/div>\r\n <div class=\"step_footer\">\r\n <button type=\"button\" class=\"step_button step_button--back\" data-to_step=\"3\" data-step=\"4\">Regresar<\/button>\r\n <button type=\"submit\" class=\"step_button\">Registrar<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n\r\n <script>\r\n let form = document.querySelector('.form-register');\r\nlet progressOptions = document.querySelectorAll('.progressbar_option');\r\n\r\nform.addEventListener('click', function(e) {\r\n let element = e.target;\r\n let isButtonNext = element.classList.contains('step_button--next');\r\n let isButtonBack = element.classList.contains('step_button--back');\r\n if (isButtonNext || isButtonBack) {\r\n let currentStep = document.getElementById('step-' + element.dataset.step);\r\n let jumpStep = document.getElementById('step-' + element.dataset.to_step);\r\n currentStep.addEventListener('animationend', function callback() {\r\n currentStep.classList.remove('active');\r\n jumpStep.classList.add('active');\r\n if (isButtonNext) {\r\n currentStep.classList.add('to-left');\r\n progressOptions[element.dataset.to_step - 1].classList.add('active');\r\n } else {\r\n jumpStep.classList.remove('to-left');\r\n progressOptions[element.dataset.step - 1].classList.remove('active');\r\n }\r\n currentStep.removeEventListener('animationend', callback);\r\n });\r\n currentStep.classList.add('inactive');\r\n jumpStep.classList.remove('inactive');\r\n }\r\n});\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\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>Contacto REGISTRO INFORMACI\u00d3N DE CONTACTO Y EMPRESA (Paso 1) Email Telefono Nombre P\u00e1gina web \u00bfCuenta con manual de Marca?SiNo Redes Sociales Siguiente DETALLES DE LA CAMPA\u00d1A (Paso 2) Objetivos de la campa\u00f1a Publico objetivo Mensaje clave Competencia Regresar Siguiente SERVICIOS REQUERIDOS PARA LA CAMPA\u00d1A Selecciona los servicios que requieres en tu campa\u00f1a Presentacion PowerPoint para Ventas Brochure Editable Dise\u00f1o para Redes Sociales Comerciales Dise\u00f1o de Mailings Regresar Siguiente PREFERENCIAS DE DISE\u00d1O Elementos a incluir Regresar Registrar<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-402","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bechaprastudio.com\/index.php\/wp-json\/wp\/v2\/pages\/402"}],"collection":[{"href":"https:\/\/bechaprastudio.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bechaprastudio.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bechaprastudio.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bechaprastudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=402"}],"version-history":[{"count":13,"href":"https:\/\/bechaprastudio.com\/index.php\/wp-json\/wp\/v2\/pages\/402\/revisions"}],"predecessor-version":[{"id":433,"href":"https:\/\/bechaprastudio.com\/index.php\/wp-json\/wp\/v2\/pages\/402\/revisions\/433"}],"wp:attachment":[{"href":"https:\/\/bechaprastudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}